前言：

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

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

擴(kuò)展運(yùn)算符（spread）是三個(gè)點(diǎn)（ ... ）， 可以說(shuō)我在 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.展開(kāi)對(duì)象

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

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

二、進(jìn)行空檢查的最佳方法

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

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

后來(lái)，我的生命被簡(jiǎn)單的 if 拯救！

if (foo) {}

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

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

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

1.可選鏈操作符

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

以下示例檢查客戶地址的郵政編碼是否為 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()

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

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

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

鑒于 1 歐元等于 7.18 日元。

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

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 < items.length; 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)在我們來(lái)使用現(xiàn)在 JavaScript 提供的函數(shù)式編程方法來(lái)實(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 過(guò)濾掉非食品的項(xiàng)目，使用 reduce 來(lái)計(jì)算價(jià)格總和。

到此這篇關(guān)于學(xué)習(xí)JavaScript一定要知道的3個(gè)小技巧的文章就介紹到這了,更多相關(guān)JavaScript小技巧內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論