本文主要是分享一下平時(shí)前端工程師，在寫(xiě)前端代碼過(guò)程中的一些代碼優(yōu)化，以及使用的一些小技巧，來(lái)使我們的代碼更加簡(jiǎn)潔，可讀性更強(qiáng)，更易維護(hù)。

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

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

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

代碼示例：

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

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

2. 三目運(yùn)算符

代碼示例：

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

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

雖然三目簡(jiǎn)潔一些，但是復(fù)雜的邏輯，不建議使用。
因?yàn)閺?fù)雜邏輯會(huì)導(dǎo)致代碼可讀性變差，所以在實(shí)際使用中需要我們根據(jù)情況去取舍。

3. 解構(gòu)

代碼示例：

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

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

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

4. 使用可選的鏈接運(yùn)算符（?.）

?.作用與 . 操作符類(lèi)似。

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

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

代碼示例：

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

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

?.提供了一種方法來(lái)簡(jiǎn)化被連接對(duì)象的值訪問(wèn)，保證訪問(wèn)數(shù)據(jù)的安全性。它可以用于對(duì)象、數(shù)組、函數(shù)中。這個(gè)語(yǔ)法很有用，在項(xiàng)目中使用可以達(dá)到事半功倍的效果。

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

代碼示例：

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

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

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

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

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

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

代碼示例：

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

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

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

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

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

代碼示例：

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

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

8. 等到多個(gè)Promise完成

我們?cè)陂_(kāi)發(fā)中，經(jīng)常會(huì)遇到一個(gè)需求，有a,b, 2個(gè)http請(qǐng)求，我們需要等到a,b, 2個(gè)接口都請(qǐng)求成功，返回?cái)?shù)據(jù)后才能去做動(dòng)作c。

這時(shí)候， 每當(dāng)您需要執(zhí)行多個(gè)任務(wù)并等待它們完成時(shí)，此技巧就很重要。由于每個(gè)任務(wù)都是異步運(yùn)行的，因此可以并行處理它們，并且一旦所有承諾都得到解決，就可以使用返回的數(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在處理多個(gè)異步處理時(shí)非常有用，比如說(shuō)：一個(gè)頁(yè)面上需要等兩個(gè)或多個(gè)ajax的數(shù)據(jù)回來(lái)以后才正常顯示，在此之前只顯示loading圖標(biāo)。

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

9. for-of 使用

for-of，可以幫助我們自動(dòng)遍歷Array和object中的每一個(gè)元素,不需要我們手動(dòng)跟更改索引來(lái)遍歷元素。

代碼示例：

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

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

不推薦使用 for-in，因?yàn)?for-in 的 性能很差 ，他會(huì)迭代所有的私有和共有屬性，原型鏈一級(jí)級(jí)查很耗性能。

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