每个前端都应该掌握的7个代码优化的小技巧

本文将介绍7种JavaScript的优化技巧，这些技巧可以帮助你更好的写出简洁优雅的代码。

1. 字符串的自动匹配（Array.includes）

在写代码时我们经常会遇到这样的需求，我们需要检查某个字符串是否是符合我们的规定的字符串之一。最常见的方法就是使用||和===去进行判断匹配。但是如果大量的使用这种判断方式，定然会使得我们的代码变得十分臃肿，写起来也是十分累。其实我们可以使用Array.includes来帮我们自动去匹配。

代码示例：

// 未优化前的写法
const isConform = (letter) => {if (letter === "a" ||letter === "b" ||letter === "c" ||letter === "d" ||letter === "e") {return true;}return false;
}; 

// 优化后的写法
const isConform = (letter) =>["a", "b", "c", "d", "e"].includes(letter); 

2.for-of和for-in自动遍历

for-of和for-in，可以帮助我们自动遍历Array和object中的每一个元素,不需要我们手动跟更改索引来遍历元素。

注:我们更加推荐对象(object)使用for-in遍历，而数组(Array)使用for-of遍历

for-of

const arr = ['a',' b', 'c'];
// 未优化前的写法
for (let i = 0; i < arr.length; i++) {const element = arr[i];console.log(element);
} 

// 优化后的写法
for (const element of arr) { console.log(element);
}
// expected output: "a"
// expected output: "b"
// expected output: "c" 

for-in

const obj = {a: 1,b: 2,c: 3,
};
// 未优化前的写法
const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {const key = keys[i];const value = obj[key];// ...
} 

// 优化后的写法
for (const key in obj) {const value = obj[key];// ...
} 

3.false判断

如果你想要判断一个变量是否为null、undefined、0、false、NaN、''，你就可以使用逻辑非（!）取反，来帮助我们来判断,而不用每一个值都用===来判断

// 未优化前的写法
const isFalsey = (value) => {if (value === null ||value === undefined ||value === 0 ||value === false ||value === NaN ||value === "") {return true;}return false;
}; 

// 优化后的写法
const isFalsey = (value) => !value; 

4.三元运算符代替（if/else）

在我们编写代码的时候肯定遇见过if/else选择结构，而三元运算符可以算是if/else的一种语法糖，能够更加简洁的表示if/else。

// 未优化前的写法
let info;
if (value < minValue) {info = "Value is最小值";
} else if (value > maxValue) {info = "Value is最大值";
} else {info = "Value 在最大与最小之间";
} 

//优化后的写法
const info =value < minValue? "Value is最小值": value > maxValue ? "Value is最大值" : "在最大与最小之间"; 

5.函数调用的选择

三元运算符还可以帮我们判断当前情况下该应该调用哪一个函数，

function f1() {// ...
}
function f2() {// ...
}
// 未优化前的写法
if (condition) {f1();
} else {f2();
} 

// 优化后的写法
(condition ? f1 : f2)(); 

6.用对象代替switch/case选择结构

switch case通常是有一个case值对应一个返回值，这样的结构就类似于我们的对象，也是一个键对应一个值。我们就可以用我们的对象代替我们的switch/case选择结构，使代码更加简洁

const dayNumber = new Date().getDay();// 未优化前的写法
let day;
switch (dayNumber) {case 0:day = "Sunday";break;case 1:day = "Monday";break;case 2:day = "Tuesday";break;case 3:day = "Wednesday";break;case 4:day = "Thursday";break;case 5:day = "Friday";break;case 6:day = "Saturday";
} 

// 优化后的写法
const days = {0: "Sunday",1: "Monday",2: "Tuesday",3: "Wednesday",4: "Thursday",5: "Friday",6: "Saturday",
};
const day = days[dayNumber]; 

7. 逻辑或(||)的运用

如果我们要获取一个不确定是否存在的值时，我们经常会运用if判断先去判断值是否存在，再进行获取。如果不存在我们就会返回另一个值。我们可以运用逻辑或(||)的特性，去优化我们的代码

// 未优化前的写法
let name;
if (user?.name) {name = user.name;
} else {name = "Anonymous";
} 

// 优化后的写法
const name = user?.name || "Anonymous"; 

最后

整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。

有需要的小伙伴，可以点击下方卡片领取，无偿分享