本文主要是分享一下平時前端工程師，在寫前端代碼過程中的一些代碼優(yōu)化，以及使用的一些小技巧，來使我們的代碼更加簡潔，可讀性更強，更易維護。

1. 字符串的自動匹配（includes的優(yōu)化）

includes是ES7新增的 API，與indexOf不同的是includes直接返回的是Boolean值，indexOf則返回的索引值, 數(shù)組和字符串都有includes方法。

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

代碼示例：

// 未優(yōu)化前的代碼
if(code==='202' || code === '203' || code === '204') {return 1
}else{return 2
}

// 優(yōu)化后的寫法
if(['202','203','204'].includes(code)){retrun 1
}else{return 2
}

2. 三目運算符

代碼示例：

// 未優(yōu)化前的代碼
let demo
if(code==='201') {demo = 1
}else if (code==='202'){demo = 2
}else{demo = 99
}

// 優(yōu)化后的寫法
let demo = code==='201' ? 1 : code==='202' ? 2 : 99

雖然三目簡潔一些，但是復雜的邏輯，不建議使用。
因為復雜邏輯會導致代碼可讀性變差，所以在實際使用中需要我們根據(jù)情況去取舍。

3. 解構(gòu)

代碼示例：

// 未優(yōu)化前的代碼
const demo1 = {name: '回憶哆啦沒有A夢',age: 27,skill:['js','vue','python','react']
}
const demo2 = {name: demo2.name,age: demo2.age,
}
console.log(demo2) //  {name: '回憶哆啦沒有A夢',age: 27}

// 優(yōu)化后的寫法
const demo1 = {name: '回憶哆啦沒有A夢',age: 27,skill:['js','vue','python','react']
}
const {name,age} = demo1
const demo2 ={name, age}
console.log(demo2) //  {name: '回憶哆啦沒有A夢',age: 27}
console.log(name) //  '回憶哆啦沒有A夢'
console.log(age) //  27

使用解構(gòu)語法，開發(fā)人員可以快速將數(shù)組中的值或?qū)ο笾械膶傩越獍街付ǖ淖兞恐小?/p>

4. 使用可選的鏈接運算符（?.）

?.作用與 . 操作符類似。

不同的是 ?. 如果對象鏈上的引用是 null 或者 undefined 時， . 操作符會像前言中的例子拋出一個錯誤，而 ?. 操作符則會按照短路計算的方式進行處理，返回 undefined。

可選鏈操作符也可用于函數(shù)調(diào)用，如果操作符前的函數(shù)不存在，也將會返回 undefined。

代碼示例：

// 未優(yōu)化前的代碼
let code;
if (data?.code) {code = data.code;
} else {code = "201";
}

// 優(yōu)化后的寫法
const code = data?.code || "201";

?.提供了一種方法來簡化被連接對象的值訪問，保證訪問數(shù)據(jù)的安全性。它可以用于對象、數(shù)組、函數(shù)中。這個語法很有用，在項目中使用可以達到事半功倍的效果。

5. 將參數(shù)作為對象傳遞

代碼示例：

// 未優(yōu)化前的代碼
const creatData = (name,skill,age)=>{// ...
}
creatData('回憶哆啦沒有A夢',['js','vue','python','react'],27)

// 優(yōu)化后的寫法
const creatData = ({name,age,skill})=>{// ...
}
creatData({name: '回憶哆啦沒有A夢',age: 27,skill:['js','vue','python','react']
})

這樣傳遞參數(shù)的方式的好處：

• 參數(shù)的順序不再重要，開發(fā)人員可以專注于交付高質(zhì)量的代碼，而不必反復檢查功能定義。
• 由于IDE將專注于您提供的特定參數(shù)，因此自動完成變得更加容易。
• 當函數(shù)調(diào)用指定每個屬性的值時，此方法以明確的方式傳達意圖，后續(xù)維護的時候，也不必害怕因為傳錯參數(shù)順序?qū)е聢?zhí)行錯誤。
• 大型代碼庫將從附加的詳細信息中受益匪淺。

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

我們經(jīng)常遇到復雜邏輯判斷的情況，通常會用if/else或者switch/case來實現(xiàn)多個條件判斷，但這樣會有個問題，隨著邏輯復雜度的增加，代碼中的if/else/switch/case會變得越來越臃腫，越來越看不懂，所以我們可以這樣優(yōu)化下代碼。

代碼示例：

// 未優(yōu)化前的代碼
let activeText;
switch (code) {case 500:activeText= "通用錯誤消息";break;case 501:activeText= "無法識別請求";break;case 502:activeText= "網(wǎng)關或者代理錯誤";break;case 503:activeText= "服務器維護或者過載";break;case 504:activeText= "未收到響應";break;case 505:activeText= "服務器不支持";break;
}

借助 Object 的 { key: value } 結(jié)構(gòu)，我們可以在 Object 中枚舉所有的情況，然后將 key 作為索引，直接通過 Object.key 或者 Object[key] 來獲取內(nèi)容。

// 優(yōu)化后的寫法
const texts = {500: "通用錯誤消息",501: "無法識別請求",502: "網(wǎng)關或者代理錯誤",503: "服務器維護或者過載",504: "未收到響應",505: "服務器不支持",
};
const activeText = texts [code];

7. 判斷一個變量是否為null、undefined、0、false、NaN、""

如果你想要判斷一個變量是否為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;

8. 等到多個Promise完成

我們在開發(fā)中，經(jīng)常會遇到一個需求，有a,b, 2個http請求，我們需要等到a,b, 2個接口都請求成功，返回數(shù)據(jù)后才能去做動作c。

這時候， 每當您需要執(zhí)行多個任務并等待它們完成時，此技巧就很重要。由于每個任務都是異步運行的，因此可以并行處理它們，并且一旦所有承諾都得到解決，就可以使用返回的數(shù)據(jù)。

const promiseA = = new Promise((resolve, reject) => {resolve('成功了')
});
const promiseB = new Promise((resolve, reject) => {resolve('success')
});
let promiseC = Promse.reject('失敗')Promise.all([promiseA , promiseB ]).then((result) => {console.log(result)               // ['成功了', 'success']
}).catch((error) => {console.log(error)
})Promise.all([promiseA ,promiseB ,promiseC ]).then((result) => {console.log(result)
}).catch((error) => {console.log(error)      // 失敗了，打出 '失敗'
})

Promse.all在處理多個異步處理時非常有用，比如說：一個頁面上需要等兩個或多個ajax的數(shù)據(jù)回來以后才正常顯示，在此之前只顯示loading圖標。

除了Promse.all，還有個Promse.race ，race就是“賽跑”。
Promse.race 意思就是說，Promise.race([promiseA , promiseB ,promiseC])里面哪個結(jié)果獲得的快，就返回那個結(jié)果，不管結(jié)果本身是成功狀態(tài)還是失敗狀態(tài)。

9. for-of 使用

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

代碼示例：

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

// 優(yōu)化后的寫法
for (const demo of arr) {console.log(demo);
}
// a
// b
// c

不推薦使用 for-in，因為 for-in 的 性能很差 ，他會迭代所有的私有和共有屬性，原型鏈一級級查很耗性能。

未完待續(xù)，持續(xù)更新…