寫了這么多年 JavaScript ，竟然還不知道這些技巧？
不少人有五年的?JavaScript?經(jīng)驗(yàn)，但實(shí)際上可能只是一年的經(jīng)驗(yàn)重復(fù)用了五次而已。完成同樣的邏輯和功能，有人可以寫出意大利面條一樣的代碼，也有人兩三行簡(jiǎn)潔清晰的代碼就搞定了。簡(jiǎn)潔的代碼不但方便閱讀，還能減少?gòu)?fù)雜邏輯和出錯(cuò)的可能性。本文就介紹一些常用的JavaScript簡(jiǎn)化技巧，日常開發(fā)都用得上。
1. 簡(jiǎn)化條件表達(dá)式
經(jīng)常碰到這種情況，要判斷某個(gè)變量是否為指定的某些值，用常規(guī)的邏輯表達(dá)式會(huì)很長(zhǎng)。我的做法是把這些值放進(jìn)數(shù)組里：
//?太長(zhǎng)的邏輯表達(dá)式
if?(x?===?'abc'?||?x?===?'def'?||?x?===?'ghi'?||?x?==='jkl')?{
????//其他邏輯
}
//?簡(jiǎn)寫
if?(['abc',?'def',?'ghi',?'jkl'].includes(x))?{
???//其他邏輯
}
2. 簡(jiǎn)化 if ... else
if...else太常用了，以至于很多人都忘了其實(shí)還有其他方式來(lái)判斷條件。比如簡(jiǎn)單的變量賦值，完全沒(méi)必要用這種冗長(zhǎng)的語(yǔ)句，一行表達(dá)式就搞定了：
//?新手的寫法
let?test=?boolean;
if?(x?>?100)?{
????test?=?true;
}?else?{
????test?=?false;
}
//?簡(jiǎn)寫表達(dá)式
let?test?=?(x?>?10)???true?:?false;
//?更直接的
let?test?=?x?>?10;
console.log(test);
三元表達(dá)式可以做復(fù)雜的條件分支判斷，不過(guò)犧牲了一些可讀性：
let?x?=?300,
let?test2?=?(x?>?100)???'greater?100'?:?(x?'less?50'?:?'between?50?and?100';
console.log(test2);?//?"greater?than?100"
3. 判空并賦默認(rèn)值
Code Review 的時(shí)候我經(jīng)?？吹竭@樣的代碼，判斷變量不是null，undefined，''的時(shí)候賦值給第二個(gè)變量，否則給個(gè)默認(rèn)值：
if?(first?!==?null?||?first?!==?undefined?||?first?!==?'')?{
????let?second?=?first;
}
//?簡(jiǎn)寫
let?second?=?first?||?'';
4. 簡(jiǎn)寫循環(huán)遍歷
for?循環(huán)是最基本的，但是有點(diǎn)繁瑣?？梢杂?code style="margin: 0px 2px;padding: 2px 4px;max-width: 100%;box-sizing: border-box !important;word-wrap: break-word !important;font-size: 14px;overflow-wrap: break-word;border-radius: 4px;color: rgb(30, 107, 184);background-color: rgba(27, 31, 35, 0.0470588);font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;">for...in、for...of或者forEach代替：
//?Longhand
for?(var?i?=?0;?i?
//?Shorthand
for?(let?i?in?testData)?or??for?(let?i?of?testData)
數(shù)組遍歷：
function?testData(element,?index,?array)?{
??console.log('test['?+?index?+?']?=?'?+?element);
}
[11,?24,?32].forEach(testData);
//?打印輸出:?test[0]?=?11,?test[1]?=?24,?test[2]?=?32
4. 簡(jiǎn)化 switch
這個(gè)技巧也很常用，把switch??轉(zhuǎn)換成對(duì)象的key-value形式，代碼簡(jiǎn)潔多了：
//?Longhand
switch?(data)?{
??case?1:
????test1();
??break;
??case?2:
????test2();
??break;
??case?3:
????test();
??break;
??//?And?so?on...
}
//?Shorthand
var?data?=?{
??1:?test1,
??2:?test2,
??3:?test
};
data[anything]?&&?data[anything]();
5. 簡(jiǎn)化多行字符串拼接
如果一個(gè)字符串表達(dá)式過(guò)長(zhǎng)，我們可能會(huì)拆成多行拼接的方式。不過(guò)隨著 ES6 的普及，更好的做法是用模板字符串：
//longhand
const?data?=?'abc?abc?abc?abc?abc?abc\n\t'
????+?'test?test,test?test?test?test\n\t'
//shorthand
const?data?=?`abc?abc?abc?abc?abc?abc
?????????test?test,test?test?test?test`
6. 善用箭頭函數(shù)簡(jiǎn)化 return
ES6 的箭頭函數(shù)真是個(gè)好東西，當(dāng)函數(shù)簡(jiǎn)單到只需要返回一個(gè)表達(dá)式時(shí)，用箭頭函數(shù)最合適不過(guò)了，return都不用寫：
Longhand:
//longhand
function?getArea(diameter)?{
??return?Math.PI?*?diameter
}
//shorthand
getArea?=?diameter?=>?(
??Math.PI?*?diameter;
)
7. 簡(jiǎn)化分支條件語(yǔ)句
又是你，if...else if...else！跟switch類似，也可以用key-value形式簡(jiǎn)化：
//?Longhand
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);
}
//?Shorthand
var?types?=?{
??test1:?test1,
??test2:?test2,
??test3:?test3,
??test4:?test4
};
var?func?=?types[type];
(!func)?&&?throw?new?Error('Invalid?value?'?+?type);?func();
8. 重復(fù)字符串 N 次
有時(shí)候出于某種目的需要將字符串重復(fù) N 次，最笨的方法就是用for循環(huán)拼接。其實(shí)更簡(jiǎn)單的方法是用repeat：
//longhand?
let?test?=?'';?
for(let?i?=?0;?i???test?+=?'test?';?
}?
console.log(str);?//?test?test?test?test?test?
//shorthand?
'test?'.repeat(5);
9. 指數(shù)運(yùn)算
能省則省，低碳環(huán)保。
//longhand
Math.pow(2,3);?//?8
//shorthand
2**3?//?8
10. 數(shù)字分隔符
這是比較新的語(yǔ)法，ES2021 提出來(lái)的，數(shù)字字面量可以用下劃線分割，提高了大數(shù)字的可讀性：
//?舊語(yǔ)法
let?number?=?98234567
//?新語(yǔ)法
let?number?=?98_234_567
總結(jié)
沒(méi)啥好總結(jié)的，拿去用就是了。