19個(gè)JS超有用的簡寫技巧

1.三元操作符

當(dāng)想寫if...else語句時(shí)，使用三元操作符來代替。

const?x?=?20;
let?answer;
if?(x?>?10)?{
????answer?=?'is?greater';
}?else?{
????answer?=?'is?lesser';
}??

簡寫：

const answer = x > 10 ? 'is greater' : 'is lesser';

也可以嵌套if語句：const big = x > 10 ? " greater 10" : x

2.短路求值簡寫方式

當(dāng)給一個(gè)變量分配另一個(gè)值時(shí)，想確定源始值不是null，undefined或空值?？梢詫懽珜懸粋€(gè)多重條件的if語句。

if?(variable1?!==?null?||?variable1?!==?undefined?||?variable1?!==?'')?{
?????????let?variable2?=?variable1;
}
????

或者可以使用短路求值方法：const variable2 = variable1 || 'new';

3.聲明變量簡寫方法

let?x;
let?y;
let?z?=?3;

簡寫方法：let x, y, z=3;

4.if存在條件簡寫方法

if (likeJavaScript === true)

簡寫：

if (likeJavaScript)

只有l(wèi)ikeJavaScript是真值時(shí)，二者語句才相等

如果判斷值不是真值，則可以這樣：

let?a;
if?(?a?!==?true?)?{
???//?do?something...
}

簡寫：

let?a;
if?(?!a?)?{
???//?do?something...
}

5.JavaScript循環(huán)簡寫方法

for (let i = 0; i < allImgs.length; i++)

簡寫：for (let index in allImgs)也可以使用Array.forEach：

function?logArrayElements(element,?index,?array)?{
??console.log("a["?+?index?+?"]?=?"?+?element);
}
[2,?5,?9].forEach(logArrayElements);

//?logs:
//?a[0]?=?2
//?a[1]?=?5
//?a[2]?=?9

6.短路評(píng)價(jià)

給一個(gè)變量分配的值是通過判斷其值是否為null或undefined，則可以：

let?dbHost;
if?(process.env.DB_HOST)?{
??dbHost?=?process.env.DB_HOST;
}?else?{
??dbHost?=?'localhost';
}???

簡寫：const dbHost = process.env.DB_HOST || 'localhost';

7.十進(jìn)制指數(shù)

當(dāng)需要寫數(shù)字帶有很多零時(shí)（如10000000），可以采用指數(shù)（1e7）來代替這個(gè)數(shù)字：for (let i = 0; i < 10000; i++) {}簡寫：

for?(let?i?=?0;?i?1e7;?i++)?{}

//?下面都是返回true
1e0?===?1;
1e1?===?10;
1e2?===?100;
1e3?===?1000;
1e4?===?10000;
1e5?===?100000;

8.對(duì)象屬性簡寫

如果屬性名與key名相同，則可以采用ES6的方法：const obj = { x:x, y:y };

簡寫：

const obj = { x, y };

9.箭頭函數(shù)簡寫

傳統(tǒng)函數(shù)編寫方法很容易讓人理解和編寫，但是當(dāng)嵌套在另一個(gè)函數(shù)中，則這些優(yōu)勢(shì)就蕩然無存。

function?sayHello(name)?{
??console.log('Hello',?name);
}

setTimeout(function()?{
??console.log('Loaded')
},?2000);

list.forEach(function(item)?{
??console.log(item);
});?

簡寫：

sayHello?=?name?=>?console.log('Hello',?name);

setTimeout(()?=>?console.log('Loaded'),?2000);

list.forEach(item?=>?console.log(item));

10.隱式返回值簡寫

經(jīng)常使用return語句來返回函數(shù)最終結(jié)果，一個(gè)單獨(dú)語句的箭頭函數(shù)能隱式返回其值（函數(shù)必須省略{}為了省略return關(guān)鍵字）

為返回多行語句（例如對(duì)象字面表達(dá)式），則需要使用()包圍函數(shù)體。

function?calcCircumference(diameter)?{
??return?Math.PI?*?diameter
}

var?func?=?function?func()?{
??return?{?foo:?1?};
};???

簡寫：

calcCircumference?=?diameter?=>?(
??Math.PI?*?diameter;
)

var?func?=?()?=>?({?foo:?1?});?

11.默認(rèn)參數(shù)值

為了給函數(shù)中參數(shù)傳遞默認(rèn)值，通常使用if語句來編寫，但是使用ES6定義默認(rèn)值，則會(huì)很簡潔：

function?volume(l,?w,?h)?{
??if?(w?===?undefined)
????w?=?3;
??if?(h?===?undefined)
????h?=?4;
??return?l?*?w?*?h;
}

簡寫：

volume?=?(l,?w?=?3,?h?=?4?)?=>?(l?*?w?*?h);

volume(2)?//output:?24???

12.模板字符串

傳統(tǒng)的JavaScript語言，輸出模板通常是這樣寫的。

const?welcome?=?'You?have?logged?in?as?'?+?first?+?'?'?+?last?+?'.'

const?db?=?'http://'?+?host?+?':'?+?port?+?'/'?+?database;

ES6可以使用反引號(hào)和${}簡寫：

const?welcome?=?`You?have?logged?in?as?${first}?${last}`;

const?db?=?`http://${host}:${port}/${database}`;??

13.解構(gòu)賦值簡寫方法

在web框架中，經(jīng)常需要從組件和API之間來回傳遞數(shù)組或?qū)ο笞置嫘问降臄?shù)據(jù)，然后需要解構(gòu)它

const?observable?=?require('mobx/observable');
const?action?=?require('mobx/action');
const?runInAction?=?require('mobx/runInAction');

const?store?=?this.props.store;
const?form?=?this.props.form;
const?loading?=?this.props.loading;
const?errors?=?this.props.errors;
const?entity?=?this.props.entity;

簡寫：

import?{?observable,?action,?runInAction?}?from?'mobx';

const?{?store,?form,?loading,?errors,?entity?}?=?this.props;?

也可以分配變量名：

const?{?store,?form,?loading,?errors,?entity:contact?}?=?this.props;
//最后一個(gè)變量名為contact?

14.多行字符串簡寫

需要輸出多行字符串，需要使用+來拼接：

const?lorem?=?'Lorem?ipsum?dolor?sit?amet,?consectetur\n\t'
????+?'adipisicing?elit,?sed?do?eiusmod?tempor?incididunt\n\t'
????+?'ut?labore?et?dolore?magna?aliqua.?Ut?enim?ad?minim\n\t'
????+?'veniam,?quis?nostrud?exercitation?ullamco?laboris\n\t'
????+?'nisi?ut?aliquip?ex?ea?commodo?consequat.?Duis?aute\n\t'
????+?'irure?dolor?in?reprehenderit?in?voluptate?velit?esse.\n\t'

使用反引號(hào)，則可以達(dá)到簡寫作用：

const?lorem?=?`Lorem?ipsum?dolor?sit?amet,?consectetur
????adipisicing?elit,?sed?do?eiusmod?tempor?incididunt
????ut?labore?et?dolore?magna?aliqua.?Ut?enim?ad?minim
????veniam,?quis?nostrud?exercitation?ullamco?laboris
????nisi?ut?aliquip?ex?ea?commodo?consequat.?Duis?aute
????irure?dolor?in?reprehenderit?in?voluptate?velit?esse.`

15.擴(kuò)展運(yùn)算符簡寫

擴(kuò)展運(yùn)算符有幾種用例讓JavaScript代碼更加有效使用，可以用來代替某個(gè)數(shù)組函數(shù)。

//?joining?arrays
const?odd?=?[1,?3,?5];
const?nums?=?[2?,4?,?6].concat(odd);

//?cloning?arrays
const?arr?=?[1,?2,?3,?4];
const?arr2?=?arr.slice()

簡寫：

//?joining?arrays
const?odd?=?[1,?3,?5?];
const?nums?=?[2?,4?,?6,?...odd];
console.log(nums);?//?[?2,?4,?6,?1,?3,?5?]

//?cloning?arrays
const?arr?=?[1,?2,?3,?4];
const?arr2?=?[...arr];

不像concat()函數(shù)，可以使用擴(kuò)展運(yùn)算符來在一個(gè)數(shù)組中任意處插入另一個(gè)數(shù)組。

const?odd?=?[1,?3,?5?];
const?nums?=?[2,?...odd,?4?,?6];???

也可以使用擴(kuò)展運(yùn)算符解構(gòu)：

const?{?a,?b,?...z?}?=?{?a:?1,?b:?2,?c:?3,?d:?4?};
console.log(a)?//?1
console.log(b)?//?2
console.log(z)?//?{?c:?3,?d:?4?}

16.強(qiáng)制參數(shù)簡寫

JavaScript中如果沒有向函數(shù)參數(shù)傳遞值，則參數(shù)為undefined。為了增強(qiáng)參數(shù)賦值，可以使用if語句來拋出異常，或使用強(qiáng)制參數(shù)簡寫方法。

function?foo(bar)?{
??if(bar?===?undefined)?{
????throw?new?Error('Missing?parameter!');
??}
??return?bar;
}

簡寫：

mandatory?=?()?=>?{
??throw?new?Error('Missing?parameter!');
}

foo?=?(bar?=?mandatory())?=>?{
??return?bar;
}???

17.Array.find簡寫

想從數(shù)組中查找某個(gè)值，則需要循環(huán)。在ES6中，find()函數(shù)能實(shí)現(xiàn)同樣效果。

const?pets?=?[
??{?type:?'Dog',?name:?'Max'},
??{?type:?'Cat',?name:?'Karl'},
??{?type:?'Dog',?name:?'Tommy'},
]

function?findDog(name)?{
??for(let?i?=?0;?i????if(pets[i].type?===?'Dog'?&&?pets[i].name?===?name)?{
??????return?pets[i];
????}
??}
}???

簡寫：

pet?=?pets.find(pet?=>?pet.type?==='Dog'?&&?pet.name?===?'Tommy');
console.log(pet);?//?{?type:?'Dog',?name:?'Tommy'?}

18.Object[key]簡寫

考慮一個(gè)驗(yàn)證函數(shù)

function?validate(values)?{
??if(!values.first)
????return?false;
??if(!values.last)
????return?false;
??return?true;
}

console.log(validate({first:'Bruce',last:'Wayne'}));?//?true?

假設(shè)當(dāng)需要不同域和規(guī)則來驗(yàn)證，能否編寫一個(gè)通用函數(shù)在運(yùn)行時(shí)確認(rèn)？

//?對(duì)象驗(yàn)證規(guī)則
const?schema?=?{
??first:?{
????required:true
??},
??last:?{
????required:true
??}
}

//?通用驗(yàn)證函數(shù)
const?validate?=?(schema,?values)?=>?{
??for(field?in?schema)?{
????if(schema[field].required)?{
??????if(!values[field])?{
????????return?false;
??????}
????}
??}
??return?true;
}


console.log(validate(schema,?{first:'Bruce'}));?//?false
console.log(validate(schema,?{first:'Bruce',last:'Wayne'}));?//?true?

現(xiàn)在可以有適用于各種情況的驗(yàn)證函數(shù)，不需要為了每個(gè)而編寫自定義驗(yàn)證函數(shù)了

19.雙重非位運(yùn)算簡寫

有一個(gè)有效用例用于雙重非運(yùn)算操作符?？梢杂脕泶鍹ath.floor()，其優(yōu)勢(shì)在于運(yùn)行更快，可以閱讀此文章了解更多位運(yùn)算。

Math.floor(4.9) === 4 //true

簡寫：~~4.9 === 4 //true