使用 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]
解析
map方法会遍历res.data中的每个对象。- 每次遍历时，
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]
解析
reduce初始化一个空数组[]作为accumulator的初始值。- 在每次遍历中，将当前元素的
id推入到accumulator数组中。 - 最终
reduce返回的accumulator数组即为目标数组[1, 2, 3]。
优点
- 灵活性高，支持更复杂的聚合操作。
- 适用于需要累计或合并数据的情况。