前端优化js代码小技巧

1. 使用“+”转换为number类型

• 我们平时开发过程中需要将数字转化为number类型，大多数会用Number(), *1, parseInt()等方法，也可直接在数字字符串前面加上“+”。

let num = '1'
console.log(typeof(num)) //string
console.log(typeof(+num)) // number

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

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

2.减少条件代码

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

3.循环中缓存array.length

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

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

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

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

5.数组截断

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

6.数组合并

• 在开发中，如遇到实现下拉刷新的功能，需要不断向数组中添加新数组。首先想到的是Array.concat()方法，但是数据量大的时候会出现长时间加载不出来的情况。可使用Array.push.apply(arr1,arr2)来实现，减少内存消耗。

//优化前
let arr1 = [1,2,3];
let arr2 = [4,5,6];
console.log(arr1.concat(arr2));//[1,2,3,4,5,6]

//优化后
let arr3 = [1,2,3];
let arr4 = [4,5,6];
console.log(arr3.push.apply(arr4));//[1,2,3,4,5,6]