[一文学会] 正确的使用JavaScript数组迭代方法

看到很多初级前端开发人员在需要处理数组时经常会使用 forEach。

今天让我们来根据使用场景来正确的使用数组方法，避免一股脑的全部使用forEach。

forEach

什么时候用呢?

正如之前所说，我们不需要过度去滥用 forEach。 但在某些情况下 forEach 是一个非常好的方法。

如果需要迭代数组来执行特定操作（例如console.log每个元素）。

我们 不应该使用forEach 用来给一个变量赋值，因为它并不会返回任何的值。

👇

const items = [1, 2, 3, 4, 5]

items.forEach(item => console.log(item))

forEach 不会 返回任何值

// 
// ...
const toto = items.forEach(item => console.log(item))
toto // undefined

filter

什么时候用呢?

顾名思义，filter允许我们根据条件过滤数组中的某些值。

例子 👇

比如，我们想删除奇数

❌ 使用 forEach

const items = [1, 2, 3, 4]
const evenValue = []
items.forEach(item => {
   if (item % 2 == 0) {
      evenValue.push(item)
   }
})

✅ 使用 filter

const items = [1, 2, 3, 4]

const evenValue = items.filter(currentValue => {
  return currentValue % 2 == 0
})

💡当我们使用 filter 时，我们应该在每次迭代中返回一个布尔值（过滤器的条件）。（否则 JS 引擎会将返回值强制转换为布尔值！）

map

什么时候用呢?

当我们需要将数组元素从数组转换为另一个数组时！

例子 👇

例如，如果我们想将数组中的所有值乘以 2。

❌ 使用 forEach

const items = [1, 2, 3, 4]
const result = []
items.forEach(item => {
  result.push(item * 2)
})

✅ 使用 map

const items = [1, 2, 3, 4]
const result = items.map(item => {
  return item * 2
})

💡 当我们使用 map 时，我们需要在每次迭代中返回一个值（转换后的值）。

reduce

什么时候用呢?

当我们需要从数组中获取 单个值 时。 这个“单个值”可以是一个数组。

例子 👇

例如，如果我们想对数组中的所有数字求和。

❌ 使用 forEach

const items = [1, 2, 3, 4]
let accumulator = 0

items.forEach(item => {
  accumulator += item
})

✅ 使用 reduce

const items = [1, 2, 3, 4]

const sum = items.reduce((accumulator, currentValue) => {
  return accumulator += currentValue
}, 0)

💡 当使用 reduce 时，我们需要在每次迭代中返回累加器（reduce 方法返回的值），我们还应该初始化这个累加器（在上面的例子中我们初始化 累加器到0）！

find

什么时候用呢?

当我们需要在数组中找到符合条件的元素并在之后使用该元素时。

const items = [1, 2, 3, 4]

const item = items.find(item => item === 3)

// ...

// 使用item

some

什么时候用呢?

如果我们需要检查其中一个元素是否符合条件（比如“find”），但之后我们不需要使用该元素。

例子 👇

例如，如果我们想检查数组是有数字 2。

如果我们 之后不使用该item，或者只是使用 item 来检查值是否为“undefined”（来判断该item是否存在），使用 find 是不好的

❌ 使用 find

const items = [1, 2, 3, 4]
const item = items.find(item => item === 2)
if (item !== undefined) {
   // ...
}

✅ 使用 some

const items = [1, 2, 3, 4]
const hasNumber2 = items.some(item => item === 2)
if (hasNumber2) {
   ...
}

💡 some 将返回布尔值，数组中至少 一项符合你的我们的条件

every

什么时候用呢?

every 类似于 some，它会检查 所有的元素 是否符合条件。 如果只有一项与条件匹配，some 将返回 true，当所有项目都匹配条件时，every 将返回 true！

总结

看了上面的一些小例子，希望我们可以根据上下文环境使用正确的数组方法，可以避免过度滥用 forEach！

对于阅读我们代码的其他开发人员来说，正确的使用数组方法也是一个非常好的习惯（例如，如果我看到filter，就知道肯定是需要从该数组中过滤一些元素）

还有一个更好使用方法就是链式调用，注意不包括 forEach （因为 forEach 不返回值）

所以我们可以实现下面这个例子👇

假设需要从数组中过滤奇数并将每个数乘以 2。

const items = [1, 2, 3, 4]

const result = items
	.filter(item => item % 2 == 0 )
	.map(item => item * 2)

一起学习更多前端知识，微信搜索【小帅的编程笔记】，每天更新