使用 map 和 reduce 提取对象数组中的 id 并组成新数组

在开发过程中，经常需要对 API 返回的数据进行处理，例如从对象数组中提取某些字段，并将它们组成新的数组。这里我们将介绍如何通过 JavaScript 的 map 和 reduce 方法来完成这一需求，并深入比较这两者的用法与适用场景。

需求：提取 id 字段组成新数组

假设我们有如下数据结构：

const res = {
  data: [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
  ]
}

我们的目标是从 res.data 中提取每个对象的 id 字段，将它们组成一个新的数组，最终得到结果：

[1, 2, 3]

使用 map 实现需求

map 方法用于遍历数组中的每个元素，并对每个元素执行相同的操作，生成一个新数组。它的典型应用场景是逐个处理元素，创建新数组。

代码示例

const ids = res.data.map(item => item.id)
console.log(ids) // 输出: [1, 2, 3]

解析

1. map 方法会遍历 res.data 中的每个对象。
2. 每次遍历时，item => item.id 会将对象的 id 提取出来，形成一个包含 id 的新数组。

优点

• 简洁明了，代码可读性高。
• 专为创建新数组而设计，适用于提取、格式化或转换数组的场景。

使用 reduce 实现需求

reduce 方法用于对数组执行累积操作，它可以生成一个最终的单一值（可以是数组、对象等）。它常用于聚合数据或进行复杂的数据处理。

代码示例

const ids = res.data.reduce((accumulator, item) => {
  accumulator.push(item.id) // 将id推入累积数组
  return accumulator         // 返回更新后的累积数组
}, []) // 初始化累积值为空数组 []

console.log(ids) // 输出: [1, 2, 3]

解析

1. reduce 初始化一个空数组 [] 作为 accumulator 的初始值。
2. 在每次遍历中，将当前元素的 id 推入到 accumulator 数组中。
3. 最终 reduce 返回的 accumulator 数组即为目标数组 [1, 2, 3]。

优点

• 灵活性高，支持更复杂的聚合操作。
• 适用于需要累计或合并数据的情况。