使用map,filter,reduce和find編寫JavaScript循環

如何在可能使用循環的JavaScript中執行常規操作,如何使用map(),filter(),reduce()和find()

循環通常以任何編程語言用於對數組執行操作:給定數組後,您可以遍歷其元素並執行計算。

讓我們看看如何選擇常見需求並使用功能編程方法,而不是使用循環。

注意:我不建議一種方法替代另一種方法。我只想介紹執行同一件事的不同方法,也許還向您介紹迄今為止可能從未使用過的新功能。

mapfilterreducefind

這些是3個真正強大的數組函數:

  • map返回具有相同長度的數組,
  • filter顧名思義,它返回的數組比原始數組少
  • reduce返回單個值(或對象)
  • find返回滿足條件的數組中的第一項

mapfilterreduce是在ES5中引入的,因此多年來您可以安全地在每種瀏覽器中使用它們。

find在ES6 / ES2015中引入。

他們提供了更多陳述式,而不是命令式方法(描述什麼應該發生,而不是寫應該發生的每一點處理)

在每個元素上執行一些操作map

循環看起來像這樣:

const performSomething = (item) => {
  //...
  return item
}
const items = ['a', 'b', 'c']
items.forEach((item) => {
  performSomething(item)
})

通過聲明性方法,您可以告訴JavaScript使用以下命令在每個元素上執行一些操作:

const items = ['a', 'b', 'c']
const newArray = items.map((item) => performSomething(item))

這將生成一個新數組,而無需編輯原始數組(我們稱之為不變性)

由於我們在map回調函數中使用了一個函數,因此我們可以將示例重寫為:

const items = ['a', 'b', 'c']
const newArray = items.map(performSomething)

在數組中查找單個元素

有時您需要在數組中查找特定項目,然後將其返回。

這是循環執行的方式:

const items = [
  { name: 'a', content: { /* ... */ }},
  { name: 'b', content: { /* ... */ }},
  { name: 'c', content: { /* ... */ }}
]
for (const item of items) {
  if (item.name === 'b') {
    return item
  }
}

這是非循環版本,使用find()(ES6 +):

const b = items.find((item) => item.name === 'b')

這是使用相同的功能filter()(ES5 +):

const b = items.filter((item) => item.name === 'b').shift()

如果數組為空,則shift()返回數組中的第一項,而不會引發錯誤(返回undefined在這種情況下)。

筆記:shift()對數組進行變異,但對其進行變異的數組是由返回的數組filter(),而不是原始數組。如果這聽起來不可接受,則可以檢查數組是否不為空,並使用b[0]

出於學習目的(在實踐中沒有多大意義),這裡使用的是相同的功能reduce()

const items = [
  { name: 'a', content: { /* ... */ }},
  { name: 'b', content: { /* ... */ }},
  { name: 'c', content: { /* ... */ }}
]

const b = items.reduce((result, item) => { if (item.name === ‘b’) { result = item } return result }, null)

filter()reduce()將遍歷所有數組項,而find()會更快。

遍歷數組以計算每個項目的屬性

使用reduce()從數組中獲取單個值。例如對項目求和content.value財產:

const items = [
  { name: 'a', content: { value: 1 }},
  { name: 'b', content: { value: 2 }},
  { name: 'c', content: { value: 3 }}
]

使用循環:

let count = 0
for (const item of items) {
  count += item.content.value
}

可以寫成

const count = items.reduce((result, { content: { value } }) => result + value, 0)

免費下載我的JavaScript初學者手冊


更多js教程: