本篇文章我們一起來(lái)看一下JavaScript的18個(gè)優(yōu)化技巧，適合所有正在使用 JavaScript 編程的開(kāi)發(fā)人員閱讀，本文的目的在于幫助大家更加熟練的運(yùn)用 JavaScript 語(yǔ)言來(lái)進(jìn)行開(kāi)發(fā)工作，希望對(duì)大家有幫助。

1. 多個(gè)條件的判斷

當(dāng)我們需要進(jìn)行多個(gè)值的判斷時(shí)，我們可以使用數(shù)組的includes方法。

//Bad if (x === 'iphoneX' || x === 'iphone11' || x === 'iphone12') { //code...  } //Good if (['iphoneX', 'iphone11', 'iphone12'].includes(x)) { //code... }

2. If true … else

當(dāng)if-else條件的內(nèi)部不包含更大的邏輯時(shí)，三目運(yùn)算符會(huì)更好。

// Bad let test= boolean; if (x > 100) { test = true; } else { test = false; } // Good let test = (x > 10) ? true : false; //or we can simply use let test = x > 10;

嵌套條件后，我們保留如下所示的內(nèi)容（復(fù)雜點(diǎn)的三目）：

let x = 300, let test2 = (x > 100) ? 'greater 100' : (x < 50) ? 'less 50' : 'between 50 and 100'; console.log(test2); // "greater than 100"

3. Null、Undefined、’’ 空值檢查

有時(shí)要檢查我們?yōu)橹狄玫淖兞渴欠癫粸閚ull或Undefined 或 '' ,我們可以使用短路寫(xiě)法

// Bad if (first !== null || first !== undefined || first !== '') { let second = first; } // Good 短路寫(xiě)法 let second = first|| '';

4. 空值檢查和分配默認(rèn)值

當(dāng)我們賦值，發(fā)現(xiàn)變量為空需要分配默認(rèn)值 可以使用以下短路寫(xiě)法

let first = null, let second = first || 'default' console.log(second)

4. 雙位操作符

位操作符是 JavaScript 初級(jí)教程的基本知識(shí)點(diǎn)，但是我們卻不常使用位操作符。因?yàn)樵诓惶幚矶M(jìn)制的情況下，沒(méi)有人愿意使用 1 和 0。

但是雙位操作符卻有一個(gè)很實(shí)用的案例。你可以使用雙位操作符來(lái)替代 Math.floor( )。雙否定位操作符的優(yōu)勢(shì)在于它執(zhí)行相同的操作運(yùn)行速度更快

// Bad Math.floor(4.9) === 4  //true // Good ~~4.9 === 4  //true

5. ES6常見(jiàn)小優(yōu)化 – 對(duì)象屬性

const x,y = 5 // Bad const obj = { x:x, y:y } // Good const obj = { x, y }

6. ES6常見(jiàn)小優(yōu)化-箭頭函數(shù)

//Bad function sayHello(name) {   console.log('Hello', name); } setTimeout(function() {   console.log('Loaded') }, 2000) list.forEach(function(item) {   console.log(item) }) // Good const sayHello = name => console.log('Hello', name) setTimeout(() => console.log('Loaded'), 2000) list.forEach(item => console.log(item))

7. ES6常見(jiàn)小優(yōu)化-隱式返回值

返回值是我們通常用來(lái)返回函數(shù)最終結(jié)果的關(guān)鍵字。只有一個(gè)語(yǔ)句的箭頭函數(shù)，可以隱式返回結(jié)果（函數(shù)必須省略括號(hào)（{ }），以便省略返回關(guān)鍵字）。

要返回多行語(yǔ)句（例如對(duì)象文本），需要使用（）而不是{ }來(lái)包裹函數(shù)體。這樣可以確保代碼以單個(gè)語(yǔ)句的形式進(jìn)行求值。

//Bad function calcCircumference(diameter) {   return Math.PI * diameter } // Good const calcCircumference = diameter => (   Math.PI * diameter )

8. ES6常見(jiàn)小優(yōu)化-解構(gòu)賦值

const form = { a:1, b:2, c:3 } //Bad const a = form.a const b = form.b const c = form.c // Good const { a, b, c } = form

9. ES6常見(jiàn)小優(yōu)化-展開(kāi)運(yùn)算符

返回值是我們通常用來(lái)返回函數(shù)最終結(jié)果的關(guān)鍵字。只有一個(gè)語(yǔ)句的箭頭函數(shù)，可以隱式返回結(jié)果（函數(shù)必須省略括號(hào)（{ }），以便省略返回關(guān)鍵字）。

要返回多行語(yǔ)句（例如對(duì)象文本），需要使用（）而不是{ }來(lái)包裹函數(shù)體。這樣可以確保代碼以單個(gè)語(yǔ)句的形式進(jìn)行求值。

const odd = [ 1, 3, 5 ] const arr = [ 1, 2, 3, 4 ] // Bad const nums = [ 2, 4, 6 ].concat(odd) const arr2 = arr.slice( ) // Good const nums = [2 ,4 , 6, ...odd] const arr2 = [...arr]

10. 數(shù)組常見(jiàn)處理

掌握數(shù)組常見(jiàn)方法，記在腦子里，不要寫(xiě)的時(shí)候再去看API了，這樣可以有效提升編碼效率，畢竟這些方法每天都在用

every some filter map forEach find findIndex reduce includes

const arr = [1,2,3] //every 每一項(xiàng)都成立，才會(huì)返回true console.log( arr.every(it => it>0 ) ) //true //some 有一項(xiàng)都成了，就會(huì)返回true console.log( arr.some(it => it>2 ) ) //true //filter 過(guò)濾器 console.log( arr.filter(it => it===2 ) ) //[2] //map 返回一個(gè)新數(shù)組 console.log( arr.map(it => it==={id:it} ) ) //[ {id:1},{id:2},{id:3} ] //forEach 沒(méi)有返回值 console.log( arr.forEach(it => it===console.log(it)) ) //undefined //find 查找對(duì)應(yīng)值 找到就立馬返回符合要求的新數(shù)組 console.log( arr.find(it => it===it>2) ) //3 //findIndex 查找對(duì)應(yīng)值 找到就立馬返回符合要求新數(shù)組的下標(biāo) console.log( arr.findIndex(it => it===it>2) ) //2 //reduce 求和或者合并數(shù)組 console.log( arr.reduce((prev,cur) => prev+cur) ) //6 //includes 求和或者合并數(shù)組 console.log( arr.includes(1) ) //true //數(shù)組去重 const arr1 = [1,2,3,3] const removeRepeat = (arr) => [...new Set(arr1)]//[1,2,3] //數(shù)組求最大值 Math.max(...arr)//3 Math.min(...arr)//1 //對(duì)象解構(gòu) 這種情況也可以使用Object.assign代替 let defaultParams={     pageSize:1,     sort:1 } //goods1 let reqParams={     ...defaultParams,     sort:2 } //goods2 Object.assign( defaultParams, {sort:2} )

11. 比較返回

在return語(yǔ)句中使用比較可以將代碼從5行減少到1行。

// Bad let test const checkReturn = () => {     if (test !== undefined) {         return test;     } else {         return callMe('test'); } } // Good const checkReturn = () => { return test || callMe('test'); }

12. 短函數(shù)調(diào)用

我們可以使用三元運(yùn)算符來(lái)實(shí)現(xiàn)這類函數(shù)。

const test1 =() => {   console.log('test1'); } const test2 =() => {   console.log('test2'); } const test3 = 1; if (test3 == 1) {   test1() } else {   test2() } // Good test3 === 1? test1():test2()

13.switch代碼塊(ifelse代碼塊)簡(jiǎn)寫(xiě)

我們可以將條件保存在key-value對(duì)象中，然后可以根據(jù)條件使用。

// Bad switch (data) {   case 1:     test1();   break;   case 2:     test2();   break;   case 3:     test();   break;   // And so on... } // Good const data = {   1: test1,   2: test2,   3: test } data[anything] && data[anything]() // Bad if (type === 'test1') {   test1(); } else if (type === 'test2') {   test2(); } else if (type === 'test3') {   test3(); } else if (type === 'test4') {   test4(); } else {   throw new Error('Invalid value ' + type); } // Good const types = {   test1: test1,   test2: test2,   test3: test3,   test4: test4 }; const func = types[type]; (!func) && throw new Error('Invalid value ' + type); func();

14. 多行字符串簡(jiǎn)寫(xiě)

當(dāng)我們?cè)诖a中處理多行字符串時(shí)，可以這樣做：

// Bad const data = 'abc abc abc abc abc abcnt' + 'test test,test test test testnt' // Good const data = `abc abc abc abc abc abc          test test,test test test test`

15. Object.entries() Object.values() Object.keys()

Object.entries() 該特性可以將一個(gè)對(duì)象轉(zhuǎn)換成一個(gè)對(duì)象數(shù)組。

Object.values()可以拿到對(duì)象value值

Object.keys()可以拿到對(duì)象key值

const data = { test1: 'abc', test2: 'cde' } const arr1 = Object.entries(data) const arr2 = Object.values(data) const arr3 = Object.keys(data) /** arr1 Output: [      [ 'test1', 'abc' ],     [ 'test2', 'cde' ], ] **/ /** arr2 Output: ['abc', 'cde'] **/ /** arr3 Output: ['test1', 'test2'] **/

16. 多次重復(fù)一個(gè)字符串

為了多次重復(fù)相同的字符，我們可以使用for循環(huán)并將它們添加到同一個(gè)循環(huán)中，如何簡(jiǎn)寫(xiě)呢？

//Bad  let test = '';  for(let i = 0; i < 5; i ++) {    test += 'test,';  }  console.log(str);// test,test,test,test,test, //good  console.log('test,'.repeat(5))

17. 冪的簡(jiǎn)寫(xiě)

數(shù)學(xué)指數(shù)冪函數(shù)的good如下：

//Bad  Math.pow(2,3)// 8 //good  2**3 // 8

18. 數(shù)字分隔符

你現(xiàn)在只需使用 _ 即可輕松分隔數(shù)字。這將使處理大量數(shù)據(jù)變得更加輕松。

//old syntax let number = 98234567 //new syntax let number = 98_234_567

如果你想使用JavaScript最新版本（ES2021/ES12）的最新功能，請(qǐng)檢查以下內(nèi)容：

• 1.replaceAll()：返回一個(gè)新字符串，其中所有匹配的模式都被新的替換詞替換。

• 2.Promise.any()：需要一個(gè)可迭代的Promise對(duì)象，當(dāng)一個(gè)Promise完成時(shí)，返回一個(gè)帶有值的Promise。

• 3.weakref：此對(duì)象持有對(duì)另一個(gè)對(duì)象的弱引用，不阻止該對(duì)象被垃圾收集。

• 4.FinalizationRegistry：讓你在對(duì)象被垃圾回收時(shí)請(qǐng)求回調(diào)。

• 5.私有方法：方法和訪問(wèn)器的修飾符：私有方法可以用#聲明。

• 6.邏輯運(yùn)算符：&&和||運(yùn)算符。

• 7.Intl.ListFormat：此對(duì)象啟用對(duì)語(yǔ)言敏感的列表格式。

• 8.Intl.DateTimeFormat：該對(duì)象啟用對(duì)語(yǔ)言敏感的日期和時(shí)間格式。

【推薦學(xué)習(xí)：javascript高級(jí)教程】