zoukankan      html  css  js  c++  java
  • js相关小技巧

    1.清空type=file的input文件上传控件的内容,相当于重置。txtFile是该input的id

        $("#txtFile").val("");
        $("#txtFile").attr("title","");
        $("#txtFile").parent().find("input[type=text]").val("");

    2.判断某个对象是否是数组

        function isArray(obj){
            return Object.prototype.toString.call(obj)=='[object Array]'
        }

     3.数组去重

    function unique(arr){
        return Array.from(new Set(arr));
    }

     4.变量转换(最快捷的)

    var PI="3.14";
    var sPI=PI+"";    //变为字符串
    var intPI=~~PI;  //变为int
    var floatPI=1*PI;//变为float
    var bPI=!!PI;      //变为boolean型 (任何不为空的字符串和不为0的整数都是true)
    var aPI=[PI];      //变为数组
    
    转换日期和正则表达式尽量用构造函数
    转换日期:
    var date=new Date("2017-01-01 12:30:30.824");
    
    正则表达式:
    var reg=new RegExp(/pattern/flags);

    5.十六进制、八进制和科学计数法

    var hex=0xFF;//十六进制表示法 (十进制的值是255)
    var octal=020;  //八进制表示法 (十进制的值是16)
    var dec=1e3;//十进制的科学计数法 (十进制的值是1000)
    var dec2=(1000).toExponential();//将十进制转换成科学技术法 1e3

    6.判断属性是否存在,最好用 对象.属性 的方式判断

    //如果存在全局变量property
    if(window.property){
    
    }else{
    
    }

    7.在创建对象时,返回当前对象的函数便于链式操作

    function Person(name){
        this.name=name;  
    
        this.changeName=function(name){
            this.name=name;
            return this;
        }
    
         this.sayHello=function(){
            alert(`hello, ${this.name}!`);
            return this;
        }
    }
    
    var person=new Person("小强");
    person.sayHello().changeName("小明").sayHello();

    8.使用replace方法时,用正则表达式匹配需要被替换的字符串,并用函数返回的值去替换该字符串。

    var h={H:"Hello",W:"world"};
    
    var hello="H, W!";
    //第一种写法
    //如果正则表达式中没有圆括号(),传入函数的参数有两个。word代表整个被正则表达式匹配的字符串,index代表该匹配的字符串(word)在整个字符串中的索引
    hello=hello.replace(/w/g,function(word,index){
        word=h[word];
        //一定要返回一个字符串 去替换 被匹配的字符串,不然就会返回undefined字符串去替换被匹配的字符串。因为如果没有写renturn的话,函数会自动返回一个undefined值。
        return word;
    });
    
    //第二种写法
    //如果正则表达式中有圆括号(),传入函数的参数有三个。word代表整个被正则表达式匹配的字符串,element代表圆括号()中被匹配的字符串,index代表word在整个字符串中的索引
    hello=hello.replace(/(w)/g,function(word,element,index){
        word=h[element];
        return word;
    })
    alert(hello);//Hello, world!

    9.十进制转换为十六进制或八进制,也可以反转过来

    var int=10;
    var hex=int.toString(16);//结果:a  (转换为16进制,结果类型是字符串)
    hex=parseInt(hex,16);//结果:10  (将16进制类型的字符串 转换为十进制的整数)
    
    var octal=int.toString(8);//结果:12  (同理)
    octal=parseInt(octal,8);//结果:10

    10.更快的取整,使用双波浪线~~操作符

    var int=(~~30.12);//30
    int=(~~-30.483);//-30
    int=(~~0.5132);//0
    int=(~~NaN);//0   注意:如果执行失败,则返回0
    int=(~~undefined);//0
    int=(~~null);//0

    11.字符串模版

    //ES6新增了一种将变量组合为字符串的方法,使用${变量}的形式。
    //注意,这种使用方式需要在``中使用。`字符是左上方,数字键盘1左边的那个,ESC键下面的那个键。现目前,支持ES6的浏览器都可以这样使用字符串模版方式。
    var name="小明";
    var age=21;
    var str=`${name}已经${age}岁啦!`;
    alert(str);//小明已经21岁啦!

     12.让div的滚动条始终保持在底部

    //im-list是一个div的class,该div的overflow样式设置为auto
    $(".im-list").scrollTop($(".im-list")[0].scrollHeight);

     13.console.log打印出不一样的文本

    //console.log可以像C语言一样格式化输出
    console.log("%c%s", "color: red; background: yellow; font-size: 24px; font-weight: bold;", "u6253u5370u6548u679c!")

    打印结果:

  • 相关阅读:
    var、let、const之间的区别
    es5和es6的区别
    [2020CCPC威海G] Caesar Cipher
    [CF1437E] Make It Increasing
    [CF1437C] Chef Monocarp
    [CF1436D] Bandit in a City
    [CF1418D] Trash Problem
    [CF1419E] Decryption
    [CF1420C2] Pokémon Army (hard version)
    [CF1424M] Ancient Language
  • 原文地址:https://www.cnblogs.com/williamwsj/p/7083799.html
Copyright © 2011-2022 走看看