前端js代码优化

今天给大家分享下js代码优化的相关技巧。

1.使用“+”转换为数值

    我们平时开发过程中需要将数字字符串创转为number类型，大多数都会用JavaScript parseInt() 函数，请看我下面的例子：

1 function toNumber(strNumber){
2      return +strNumber;  
3 }
4 console.log(toNumber("123456"));// 123456

5 console.log(toNumber("abc"));// NaN

7 //作用于Date函数直接返回时间戳
8 console.log(+new Date());// 156826526698565255

  注意只能用于数字字符串，否则返回“NaN”。

2.减少条件代码

 

if(conected){
    login();
}
//上述可以简写为
conected &&  login();

 

3.在循环中缓存array.length

我们在开发中，通常遇到要循环遍历数组的情况，大家一般都会像下面一样写循环遍历，循环体中，每循环一次，就要重计算数组长度，如果数组太大，会影响程序性能。我们应该缓存数组的长度，提高程序性能。

 

//优化前
for( var i=0;i<array.length;i++){
   ......
}
//优化后
for( var i=0 , length = array.length;i<length;i++){
   ......
}

 

4.获取数组中最后的元素

 

1 var array = [1,2,3,4,5,6];
2 console.log(array.slice(-1));// [6]
3 console.log(array.slice(-2));// [5,6]
4 console.log(array.slice(-3));// [4,5,6]

 

5.数组截断

 

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

 

6.数组合并

    在开发中，我遇到一次需要：实现下拉刷新的功能，需要不断向数组中添加新数组。我当时用到的是Array.concat()方法。但是数据量大的时候会出现长时间数据加载不出来的情况。我在网上查找了半天解决了这个问题，使用Array.push.apply(arry1,arry2)来实现。减少内存消耗。

 

//优化前
var arry1 = [1,2,3];
var arry2 = [4,5,6];
console.log(arry1.concat(arry2));//[1,2,3,4,5,6]

//优化后
var arry3 = [1,2,3];
var arry4 = [4,5,6];
console.log(arry3.push.apply(arry4));//[1,2,3,4,5,6]

 

 

 

 

 

今天的知识分享到这里，希望大家每天都能进步一点点！

 

 

 

 

 

 

 

 

 

 

 

 

 

toNumber

转载于:https://www.cnblogs.com/wzq201607/p/wzq_js_optimization.html