JavaScript中如何用reduce处理对象数组？提取指定字段示例

没问题，这就给你演示怎么用reduce来实现这个对象数组的转换需求。虽然其实用map会更直观，但既然你明确要求用reduce，咱们就一步步来实现：

首先，先看完整的代码实现：

const originalArray = [
  {id: 1, name: 'jhon', lastname: 'doe', age: 30},
  {id: 2, name: 'max', lastname: 'wall', age: 20},
  {id: 3, name: 'fer', lastname: 'baneg', age: 15}
];

// 纯函数风格的reduce实现
const transformedArray = originalArray.reduce((acc, curr) => {
  // 从当前对象中提取需要的id和name字段，创建新对象
  const simplifiedObj = { id: curr.id, name: curr.name };
  // 用展开运算符合并累加器和新对象，返回新数组
  return [...acc, simplifiedObj];
}, []);

console.log(transformedArray);
// 输出结果：
// [ {id: 1, name: 'jhon'}, {id: 2, name: 'max'}, {id: 3, name: 'fer'} ]

代码解释： #

• reduce的第二个参数[]是初始累加器值，表示我们从一个空数组开始构建结果
• 回调函数里的acc是当前的累加器（也就是我们正在构建的结果数组），curr是原数组中当前遍历到的对象
• 我们创建一个只包含id和name的新对象，然后通过展开运算符[...acc, simplifiedObj]把它加入到累加器中，返回更新后的数组——这种写法是纯函数，不会修改原累加器数组，避免副作用

如果你追求代码简洁或者更好的性能（不用每次创建新数组），也可以用push的方式修改累加器：

// 更简洁的实现方式
const transformedArray = originalArray.reduce((acc, curr) => {
  acc.push({ id: curr.id, name: curr.name });
  return acc;
}, []);

这种写法直接在累加器数组上push新对象，然后返回原累加器，性能稍好，而且因为初始累加器是我们自己创建的空数组，也不会产生意外的副作用。

补充：为什么不用map？ #

其实这个场景是典型的一对一数组转换，用Array.map()会更直观，代码也更短：

const transformedArray = originalArray.map(item => ({ id: item.id, name: item.name }));

不过既然你指定要用reduce，上面的两种写法都能完美实现你的需求。

内容的提问来源于stack exchange，提问作者FeRcHo