成為現(xiàn)代 JavaScript 大師的 3 個(gè)小技巧

序

通常在 Angular 或 React 項(xiàng)目中，code review 時(shí)看到一些老式的 JavaScript 代碼，就會(huì)將開發(fā)人員歸類為初學(xué)者。但是，如果你知道以下 3 個(gè)技巧，你將被視為現(xiàn)代 JavaScript 的尤達(dá)大師。那么，讓我們開始我們的旅程吧！

一、神奇的擴(kuò)展運(yùn)算符

擴(kuò)展運(yùn)算符（spread）是三個(gè)點(diǎn)（...）， 可以說我在 JavaScript 中最喜歡的運(yùn)算符了。我主要在以下 3 種情況下使用：

1. 拷貝數(shù)組

const?arr?=?[1,?2,?3,?4]
const?newArr?=?[...arr]

console.log(newArr)??//?[1,?2,?3,?4]

2. 合并數(shù)組

const?numArr?=?[1,?2,?3,?4]
const?alphaArr?=?['a',?'b',?'c']
const?newArr?=?[...numArr,?...alphaArr]

console.log(newArr)?//?[1,?2,?3,?4,?'a',?'b',?'c']

3. 展開對(duì)象

const?rectangle?=?{?width:?10,?height:?10?}
const?cube?=?{?...rectangle,?length:?7?}

console.log(cube)?//?{width:?10,?height:?10,?length:?7}

二、空檢查的最佳方法

你還記得你寫的第一個(gè)空檢查代碼嗎？當(dāng) JavaScript 還沒有現(xiàn)在這個(gè)完善時(shí)，我曾在我的舊代碼中這樣寫：

if?(foo?!==?null?&&?foo?!==?undefined)?{?}

后來，我的生命被簡單的 if 拯救！

if?(foo)?{}

只要條件值 foo 不是下列值，都將為真值

• null
• undefined
• NaN
• 空字符串 ("")
• 0
• false

除了簡單的 if 之外，現(xiàn)代 JavaScript 的可選鏈操作符?.與空值合并運(yùn)算符?? 可以使我們的代碼更加簡潔

1. 可選鏈操作符

可選鏈操作符是訪問嵌套對(duì)象屬性的安全方式。這意味著在訪問一長串對(duì)象屬性時(shí)，我們不必進(jìn)行多次空檢查。當(dāng)嘗試訪問可能不存在的對(duì)象屬性時(shí)，可選鏈操作符將會(huì)使表達(dá)式更短、更簡明

以下示例檢查客戶地址的郵政編碼是否為 null ：

const?client?=?{
??name:?'Liu?Xing',
??address:?{
????zipcode:?'1234'
??}
}

//?老的取值方式
if?(client?&&?client.address?&&?client.address.zipcode)?{}
//?更加現(xiàn)代的可選鏈操作符方式
if?(client?.address?.zipcode)?{}

2. 空值合并運(yùn)算符

空值合并操作符（??）是一個(gè)邏輯操作符，當(dāng)左側(cè)的操作數(shù)為 null 或者 undefined 時(shí)，返回其右側(cè)操作數(shù)，否則返回左側(cè)操作數(shù)。

const?defaultMessage?=?'Hello?JavaScript?之禪'
const?msg?=?defaultMessage????'Hello?Liu?Xing';
console.log(msg);?//?Hello?JavaScript?之禪'

如果 defaultMessage 是null 或者 undefined 則將打印出 Hello Liu Xing

當(dāng)我們按順序使用它時(shí)，它會(huì)變得更強(qiáng)大：

console.log(firstName????lastName????'anonymous')

在這個(gè)例子中，如果 firstName 不是 null/undefined，它將顯示 firstName， 否則，如果 lastName 不是 null/undefined，它將顯示 lastName。最后，如果它們都為 null/undefined，它將顯示“anonymous”。

三、使用 .map()、.reduce() 和 .filter()

接下來，談?wù)摵瘮?shù)式和反應(yīng)式編程的強(qiáng)大技術(shù)！幾年前我第一次使用它時(shí)，它真的為我打開了一扇新的大門。現(xiàn)在每次看到這些簡潔的代碼，我仍然被它的美麗所震撼。

今天我舉例介紹三個(gè)最常用的方法：map、reduce 和 filter。

在新冠疫情 之前，我們?nèi)グ屠瓒燃?。于是他們?nèi)コ匈I了些東西。他們買了食物和日用品。但是所有的物品都是歐元，他們想知道每件物品的價(jià)格以及他們食物的人民幣總成本。

鑒于?1?歐元等于?7.18?元。

以傳統(tǒng)方式，我們將使用經(jīng)典循環(huán)來完成：

const?items?=?[
??{
????name:?'pineapple',
????price:?2,
????type:?'food'
??},
??{
????name:?'beef',
????price:?20,
????type:?'food'
??},
??{
????name:?'advocate',
????price:?1,
????type:?'food'
??},
??{
????name:?'shampoo',
????price:?5,
????type:?'other'
??}
]

let?sum?=?0
const?itemsInYuan?=?[]

for?(let?i?=?0;?i???const?item?=?items[i]
??item.price?*=?7.18
??itemsInYuan.push(item)
??if?(item.type?===?'food')?{
????sum?+=?item.price
??}
}

console.log(itemsInYuan)
/*
[
??{?name:?'pineapple',?price:?14.36,?type:?'food'?},
??{?name:?'beef',?price:?143.6,?type:?'food'?},
??{?name:?'advocate',?price:?7.18,?type:?'food'?},
??{?name:?'shampoo',?price:?35.9,?type:?'other'?}
]
*/
console.log(sum)?//?165.14

現(xiàn)在我們來使用現(xiàn)在 JavaScript 提供的函數(shù)式編程方法來實(shí)現(xiàn)這個(gè)計(jì)算。

const?itemsInYuan?=?items.map(item?=>?{
??const?itemInYuan?=?{?...item?}
??itemInYuan.price?*=?7.18
??return?itemInYuan
})

const?sum?=?itemsInYuan.filter(item?=>?item.type?===?'food').reduce((total,?item)?=>?total?+?item.price,?0)

上述示例使用map方法將歐元轉(zhuǎn)為元，使用?filter?過濾掉非食品的項(xiàng)目，使用?reduce?來計(jì)算價(jià)格總和。

關(guān)于 JavaScript 數(shù)組的更詳細(xì)總結(jié)，推薦閱讀 Javascript 數(shù)組及其方法詳解

親愛的讀者，

感謝你的時(shí)間。我們下期再見！

如果你在評(píng)論區(qū)留下的想法，我會(huì)十分高興。