|
看到很多初级前端开发人员在需要处理数组时经常会使用 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
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)
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)
一起学习更多前端知识，微信搜索【小帅的编程笔记】，每天更新
|