使用正确的数组方法来提高你的 JS 技能

我看到很多初级开发人员在需要处理数组时使用 forEach。

forEach我将向您展示并帮助您根据当前上下文使用正确的数组方法避免过度滥用！

forEach

何时使用？

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

如果您需要迭代一个数组以执行特定的操作（例如控制台记录每个项目）。

每次需要填充新数组时，不应使用 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

筛选

何时使用？

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

示例👇

例如，如果你想删除奇数

❌ 使用 forEach

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

✅ 带过滤器

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

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

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

地图

何时使用？

当您需要将项目从数组转换到另一个数组时！

示例👇

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

❌ 使用 forEach

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

✅ 附有地图

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

💡 使用时，map您需要在每次迭代中返回一个项目（转换后的项目）。

减少

何时使用？

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

示例👇

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

❌ 使用 forEach

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

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

✅ 减少

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

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

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

寻找

何时使用？

当您需要找到符合条件的物品并且之后使用该物品时。

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

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

// ...

// Use item afterwards

一些

何时使用？

如果您需要检查您的某个物品是否符合某个条件（如find），但之后您不需要使用该物品。

示例👇

例如，如果您想检查数组中是否有数字 2。

find如果之后不使用 item，或者仅使用 item 来检查值是否存在undefined（以了解条件是否匹配），则使用是不好的

❌ 使用 find

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

✅ 有一些

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

💡some如果至少有一项符合您的条件，则返回布尔值

每一个

何时使用？

every与 类似some，它会检查所有商品是否符合条件。与 不同，some它只会在只有一个商品符合条件时返回 true，而every只有所有商品都符合条件时才返回 true！

TLDR；

正如您所看到的，您可以根据上下文使用很多数组方法，因此您可以避免过度滥用forEach！

对于将读取您的代码的其他开发人员来说，使用取决于当前上下文的方法也是一个好主意（例如，如果我看到过滤器，我知道我们需要从这个数组中过滤一个值）

我上面没有展示的一个很好的观点是，你可以组合数组方法（除非forEachforEach 不返回值）。

所以你可以做到这一点👇

您需要从数组中滤除奇数值，并将事件编号乘以 2。

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

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

我希望你喜欢这篇文章！

🎁 如果您在Twitter上关注我并给我发送消息，您可以Underrated skills in javascript, make the difference免费获得我的新书😁 并节省 19 美元💵💵

或者在这里获取

🇫🇷🥖 对于法国开发者，你可以查看我的YoutubeChannel

🎁我的新闻通讯

☕️ 你可以支持我的作品🙏

🏃‍♂️ 你可以关注我 👇

🕊 推特：https://twitter.com/code__oz

👨‍💻 Github：https://github.com/Code-Oz

你也可以标记🔖这篇文章！