本文將介紹7種JavaScript的優(yōu)化技巧，這些技巧可以幫助你更好的寫出簡潔優(yōu)雅的代碼。

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

在寫代碼時我們經(jīng)常會遇到這樣的需求，我們需要檢查某個字符串是否是符合我們的規(guī)定的字符串之一。最常見的方法就是使用||和===去進行判斷匹配。但是如果大量的使用這種判斷方式，定然會使得我們的代碼變得十分臃腫，寫起來也是十分累。其實我們可以使用Array.includes來幫我們自動去匹配。

代碼示例：

// 未優(yōu)化前的寫法
const isConform = (letter) => {if (letter === "a" ||letter === "b" ||letter === "c" ||letter === "d" ||letter === "e") {return true;}return false;
}; 

// 優(yōu)化后的寫法
const isConform = (letter) =>["a", "b", "c", "d", "e"].includes(letter); 

2.for-of和for-in自動遍歷

for-of和for-in，可以幫助我們自動遍歷Array和object中的每一個元素,不需要我們手動跟更改索引來遍歷元素。

注:我們更加推薦對象(object)使用for-in遍歷，而數(shù)組(Array)使用for-of遍歷

for-of

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

// 優(yōu)化后的寫法
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,
};
// 未優(yōu)化前的寫法
const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {const key = keys[i];const value = obj[key];// ...
} 

// 優(yōu)化后的寫法
for (const key in obj) {const value = obj[key];// ...
} 

3.false判斷

如果你想要判斷一個變量是否為null、undefined、0、false、NaN、''，你就可以使用邏輯非（!）取反，來幫助我們來判斷,而不用每一個值都用===來判斷

// 未優(yōu)化前的寫法
const isFalsey = (value) => {if (value === null ||value === undefined ||value === 0 ||value === false ||value === NaN ||value === "") {return true;}return false;
}; 

// 優(yōu)化后的寫法
const isFalsey = (value) => !value; 

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

在我們編寫代碼的時候肯定遇見過if/else選擇結(jié)構(gòu)，而三元運算符可以算是if/else的一種語法糖，能夠更加簡潔的表示if/else。

// 未優(yōu)化前的寫法
let info;
if (value < minValue) {info = "Value is最小值";
} else if (value > maxValue) {info = "Value is最大值";
} else {info = "Value 在最大與最小之間";
} 

//優(yōu)化后的寫法
const info =value < minValue? "Value is最小值": value > maxValue ? "Value is最大值" : "在最大與最小之間"; 

5.函數(shù)調(diào)用的選擇

三元運算符還可以幫我們判斷當前情況下該應(yīng)該調(diào)用哪一個函數(shù)，

function f1() {// ...
}
function f2() {// ...
}
// 未優(yōu)化前的寫法
if (condition) {f1();
} else {f2();
} 

// 優(yōu)化后的寫法
(condition ? f1 : f2)(); 

6.用對象代替switch/case選擇結(jié)構(gòu)

switch case通常是有一個case值對應(yīng)一個返回值，這樣的結(jié)構(gòu)就類似于我們的對象，也是一個鍵對應(yīng)一個值。我們就可以用我們的對象代替我們的switch/case選擇結(jié)構(gòu)，使代碼更加簡潔

const dayNumber = new Date().getDay();// 未優(yōu)化前的寫法
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";
} 

// 優(yōu)化后的寫法
const days = {0: "Sunday",1: "Monday",2: "Tuesday",3: "Wednesday",4: "Thursday",5: "Friday",6: "Saturday",
};
const day = days[dayNumber]; 

7. 邏輯或(||)的運用

如果我們要獲取一個不確定是否存在的值時，我們經(jīng)常會運用if判斷先去判斷值是否存在，再進行獲取。如果不存在我們就會返回另一個值。我們可以運用邏輯或(||)的特性，去優(yōu)化我們的代碼

// 未優(yōu)化前的寫法
let name;
if (user?.name) {name = user.name;
} else {name = "Anonymous";
} 

// 優(yōu)化后的寫法
const name = user?.name || "Anonymous"; 

最后

整理了75個JS高頻面試題，并給出了答案和解析，基本上可以保證你能應(yīng)付面試官關(guān)于JS的提問。

有需要的小伙伴，可以點擊下方卡片領(lǐng)取，無償分享