js前端代码优化 - 02上文js前端代码优化 - 01，讲解了**if逻辑判断**的几种优化方法，本文将继续总结js代

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第25天，点击查看活动详情

上文js前端代码优化 - 01讲解了if逻辑判断的几种优化方法，本文将继续总结js代码优化实例。

for循环优化

提到for循环优化，不得不提到性能方面的考虑。平时我们常用的循环语句不外乎： for()， while()， for(in)，for(of)这几种循环 for循环语句比较常用，如下：

for(let i=0;i<arr.length;i++){
  console.log(i)
}

实际上，arr.length每次遍历都需要计算一次，如果数组长度相当大时，会比较耗费性能，因此可以提前计算arr.lenght的长度，这样仅需要计算一次长度，优化了性能。

优化后：

const length = arr.length;
for(let i=0;i<length;i++){
  console.log(i)
}

关于for-of 和for-in

for(in) 语句的效率极差，因为它需要查询散列键，所以应该尽量少用。for-of 比 for-in 循环遍历数组更好。

优化前

if (test !== null || test !== undefined || test !== "") {
   testValue = test
}

优化后

const testValue = test || ""

这里也可以使用新语法可选链或者双问号

可选链用法：当a.e可能为undefined,则可以使用a.e?.f

双问号用法：

const foo = null ?? "aaa";

当要声明两个具有相同值或相同类型的变量时，可以使用简写方式。即：let a, b = 1;

当处理多个变量并进行赋值的时候，使用“解构”可以使得代码更加友好。

优化前

let a, b, c;
a = 1;
b = 2;
c = 3;

优化后

let [a, b, c] = [1, 2, 3];

传统的数组去重有相当多方法，比如循环遍历，用indexof等，现在，我们可以使用ES6 的 Set 方法。

Set 本身是一个构造函数，用来生成 Set 。它类似于数组，但是成员的值都是唯一的，没有重复的值。如下为Set 方法的使用：

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