ITPub博客

首页 > 应用开发 > Javascript > 6个JS优化代码技巧,让你受用终生

6个JS优化代码技巧,让你受用终生

原创 Javascript 作者:松前卡气 时间:2025-05-08 09:27:48 0 删除 编辑

分享几个本人认为比较实用的技巧给大家,有错误的地方请大家指出来共同交流

1.Insert item inside an Array(向数组中插入元素)

向一个数组中插入元素是平时很常见的一件事情。你可以使用 push 在数组尾部插入元素 , 可以用 unshift 在数组头部插入元素 , 也可以用 splice 在数组中间插入元素。

        var arr = [1,2,3,4,5];
         //old method
        arr.push(6);
        //new method 快43%
        arr[arr.length] = 6;
       
        var arr = [1,2,3,4,5];
        //old method
        arr.unshift(0);
        //new method 快98%
        [0].concat(arr);

2.Tip to measure performance of a javascript block (测量 javascript 代码块性能的小知识)

快速的测量 javascript 的性能,我们可以使用 console 的方法,例如

            console.time("Array initialize");
        var arr = new Array(100),
            len = arr.length,
            i;
       
        for (i = 0; i < len; i++) {
            arr[i] = new Object();
        };
        console.timeEnd("Array initialize"); // 0.711ms

 

3.Fat Arrow Functions (箭头函数)

语法 : 更少的代码行 ; 不再需要一遍一遍的打 function 了

语义 : 从上下文中捕获 this 关键字      

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

4.Converting to number fast way (转换为数字的更快方法)  

将字符串转换为数字是极为常见的。最简单和快速的方法是使用 +( 加号 ) 来实现。      

              var one = '1';
        var numberOne = +one; // Number 1
        var one = '1';
        var negativeNumberOne = -one; // Number -1

5.Use === instead of == (使用 === 而不是 == )

  == ( 或者 !=) 操作在需要的情况下自动进行了类型转换。 === ( 或 !==) 操作不会执行任何转换。 === 在比较值和类型时,可以说比 == 更快。

          [10] ==  10      // 为 true
        [10] === 10      // 为 false
       
        '10' ==  10      // 为 true
        '10' === 10      // 为 false
       
         []  ==  0       // 为 true
         []  === 0       // 为 false
       
         ''  ==  false   // 为 true 但 true == "a" 为false
         ''  === false   // 为 false

6.Check if a property is in a Object (检查某对象是否有某属性)

       //method1
            var myObject = {
              name: '@tips_js'
            };
            if (myObject.name) { }
       
        //method2
            var myObject = {
              name: '@tips_js'
            };
       
            myObject.hasOwnProperty('name'); // true
            'name' in myObject; // true
       
            myObject.hasOwnProperty('valueOf'); // false, valueOf 继承自原型链
            'valueOf' in myObject; // true


来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/70044235/viewspace-3083510/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2025-03-11

  • 博文量
    36
  • 访问量
    41916