使用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教程: