美文网首页
优化js代码

优化js代码

作者: 索哥来了 | 来源:发表于2017-06-08 16:36 被阅读0次

    1.定义一个变量时,要使用 var 关键字。变量没有声明而直接赋值得话,默认会作为一个新的全局变量,要尽量避免使用全局变量。

    function fn(){
        a = 1
    }
    fn()
    console.log(a) // a为全局变量,结果 1
    
    function fn(){
        var a = 1
    }
    fn()
    console.log(a) // a is not defined
    

    2.使用 === 取代 == 。==和!=操作符会在需要的情况下自动转换数据类型。但===和!==不会,它们会同时比较值和数据类型,这也使得它们要比==和!=快。

    console.log([10] == 10)     // true
    console.log([10] === 10)        // false
    console.log('' == false)        // true
    console.log('' === false)       // false
    console.log("a" == true)        // false 
    console.log(!!"a" === true) // true
    console.log(0 == false)     // true
    console.log(0 === false)        // false
    

    3.行尾使用分号。实践中最好还是使用分号,忘了写也没事,大部分情况下JavaScript解释器都会自动添加。
    4.从数组中随机获取成员。

    var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119];
    var randomItem = items[Math.floor(Math.random() * items.length)];
    //Math.floor 求一个最接近它的整数,它的值小于或等于这个浮点数
    

    5.生成从0到指定值的数字数组

    var numbersArray = [] , max = 100;
    for( var i=1; numbersArray.push(i++) < max;);  // numbers = [1,2,3 ... 100]
    

    6.纯数字数组排序和打乱排序

    var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
    //打乱排序
    numbers = numbers.sort(function(){
        return Math.random() - 0.5
    });
    //从小到大排序
    numbers.sort(function(a,b){
        return a-b;
    });
    

    7.验证是否是数字

    function isNumber(n){
        return !isNaN(parseFloat(n)) && isFinite(n);
        //isFinite函数用于检查其参数是否是无穷大。
    }
    

    8.纯数字数组取最大最小值

    var  numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; 
    var maxInNumbers = Math.max.apply(Math, numbers); 
    var minInNumbers = Math.min.apply(Math, numbers);
    

    9.清空数组

    var myArray = [12 , 222 , 1000 ];  
    myArray.length = 0;
    

    length属性也能截断数组

    var arr = [1,2,3,4,5,6]
    arr.length = 3
    console.log(arr) //[1,2,3]
    

    10.删除数组某个元素的时候,不要用delete,要用splice

    var arr = [1,2,3,4,5,6]
    delete(arr[1])
    console.log(arr) //[1, undefined × 1, 3, 4, 5, 6]
    arr.splice(3,1);
    console.log(arr) //[1, undefined × 1, 3, 5, 6]
    

    11.使用原始操作符比函数快。

    //比如,一般不要这样:
    var min = Math.min(a,b); 
    arr.push(v);
    arr.unshift(v);
    
    //可以这样来代替:
    var min = a < b ? a : b; 
    arr[arr.length] = v;
    [v].concat(arr);
    

    12.使用 swtich/case 代替一大堆的 if else
    13.undefined 和 null 的区别

    undefined表示一个变量没有被声明,或者被声明了但没有被赋值
    null是一个表示“没有值”的值

    Javascript将未赋值的变量默认值设为undefined
    Javascript从来不会将变量设为null。它是用来让程序员表明某个用var声明的变量时没有值的。

    undefined不是一个有效的JSON,而null是
    undefined的类型(typeof)是undefined
    null的类型(typeof)是object

    它们都是基本类型

    var a;
    console.log(a); //undefined 
    
    console.log(b);// error--b is not defined
    
    console.log(typeof null); //object
    console.log(typeof undefined); //undefined
    
    null === undefined // false
    null == undefined // true
    

    14.测试js一小块代码的性能

    console.time("test");
    var arr = new Array(100),
        len = arr.length,
        i;
    
    for (i = 0; i < len; i++) {
        arr[i] = '第'+(i+1)+'个元素';
    };
    console.timeEnd("test"); //0.090087890625ms
    

    15.使用箭头函数

    // 使用functions
    var arr = [5,3,2,9,1];
    var arr1 = arr.map(function(x) {
        return x * x;
    });
    console.log(arr1)
    
    // 使用箭头函数
    var arr = [5,3,2,9,1];
    var arr1 = arr.map((x) => x*x);
    console.log(arr1)
    

    16.字符串转数字更快方法

    var str = '1.2'
    console.log(+str);
    

    17.使用或(||)运算 设置默认值

    function getName(name){
        name = name || 'lemei' ;
        console.log("My best friend's name is " + name);
    }
    getName();          // My best friend's name is lemei
    getName('zhima');   // My best friend's name is zhima
    

    17.使用!!

    console.log(!!"") // false
    console.log(!!0) // false
    console.log(!!null) // false
    console.log(!!undefined) // false
    console.log(!!NaN) // false
    
    console.log(!!"hello") // true
    console.log(!!1) // true
    console.log(!!{}) // true
    console.log(!![]) // true
    

    18.使用闭包实现异步循环

    for(var i = 0;i<5;i++){
        // 这里不方便写请求,用定时器模拟
        setTimeout(function(){
            console.log(i); //5,5,5,5,5
        },1000)
    }
    
    for(var i = 0;i<5;i++){
        (function(num){
            setTimeout(function(){
                console.log(num); //0,1,2,3,4
            },1000)
        })(i)
    }
    

    相关文章

      网友评论

          本文标题:优化js代码

          本文链接:https://www.haomeiwen.com/subject/yfftqxtx.html