JavaScript中对象数组的Reduce操作及特定结构数组生成方法

嘿，这两个都是JavaScript数组操作里的高频场景，我来一步步给你拆解说明～

reduce() 是数组的高阶函数，核心作用是把数组元素逐步累积成一个最终值。处理对象数组时，关键是先明确你要得到的结果类型（数字、对象、数组等），再定义**累加器（accumulator）**的初始值和每次迭代的逻辑。下面举几个实用的典型场景：

场景1：计算对象数组中某个属性的总和 #

比如有一组商品数据，要快速算出总价格：

const products = [
  { id: 1, price: 20 },
  { id: 2, price: 30 },
  { id: 3, price: 50 }
];

const totalPrice = products.reduce((acc, product) => {
  // 把每个商品的price累加到累加器acc中
  return acc + product.price;
}, 0); // 初始值设为0，保证第一次迭代有基准值

console.log(totalPrice); // 输出：100

场景2：按对象的某个属性分组 #

比如把用户按年龄归类：

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 25 }
];

const groupedByAge = users.reduce((acc, user) => {
  // 检查累加器里是否已有当前年龄的分组，没有就创建空数组
  if (!acc[user.age]) {
    acc[user.age] = [];
  }
  // 将当前用户加入对应分组
  acc[user.age].push(user);
  return acc;
}, {}); // 初始值设为空对象，用来存储分组结果

console.log(groupedByAge);
// 输出：{ 25: [{name: 'Alice', age:25}, {name: 'Charlie', age:25}], 30: [{name: 'Bob', age:30}] }

场景3：将对象数组转换为键值对映射 #

比如把用户ID作为键，用户名称作为值，方便快速查找：

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

const userMap = users.reduce((acc, user) => {
  acc[user.id] = user.name;
  return acc;
}, {});

console.log(userMap); // 输出：{ 1: 'Alice', 2: 'Bob' }

核心逻辑总结：先确定最终结果的类型，设置对应的初始值，然后在每次迭代中更新累加器即可。

先明确需求：我们有包含0到99的数组 randomArr，要生成一个新数组，里面有100个元素，每个元素的结构是 [{index: i}, {title: title${i}}]（i为randomArr的索引值，也就是0到99）。

最简洁的方法是用数组的map()方法，它专门用来做“一对一”的元素转换：

const randomArr = [...Array(100).keys()];
// 这里的i就是randomArr里的元素值，刚好是0到99，符合需求
const resultArr = randomArr.map(i => [
  { index: i },
  { title: `title${i}` }
]);

console.log(resultArr);
// 输出示例：[[{index:0}, {title:'title0'}], [{index:1}, {title:'title1'}], ..., [{index:99}, {title:'title99'}]]

如果想更严谨（比如担心原数组元素不是连续的索引），可以用map()的第二个参数（当前元素的索引）来取值：

const randomArr = [...Array(100).keys()];
const resultArr = randomArr.map((_, i) => [
  { index: i },
  { title: `title${i}` }
]);

这里的_是占位符，表示我们不需要原数组的元素值，只需要它的索引i，结果和上面完全一致。

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