如何用 JavaScript reduce 方法实现多层级对象数组的聚合与转换？

在 JavaScript 中处理数组时，reduce 常常被当作求和或拼接的工具，但它的本质是归约操作，可以在每一次迭代中基于累加器和当前元素返回任意类型的新累加器。当数据结构从一维数组升级为多层级对象数组，例如部门树、订单明细、嵌套分类等，reduce 的这种灵活性就变得非常关键。要让 reduce 完成复杂的聚合与转换，必须重新审视初始值、回调函数返回值以及累加器的结构设计。

从累加器模型理解多层级转换

reduce 接收两个参数：回调函数和初始值。回调函数又接收累加器、当前元素、当前索引和原数组四个参数。累加器的初始类型由第二个参数决定，如果省略初始值，reduce 会使用数组的第一个元素作为初始累加器，并从第二个元素开始迭代。这种机制在处理简单求和时很方便，但在构建多层级对象时很容易因为初始值类型不对而报错。

下面的代码展示了最基础的数字求和场景：

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 15

如果把累加器从数字换成对象，reduce 就能完成键值对的统计。例如统计一段文本中单词出现的频率：

const words = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const wordCount = words.reduce((acc, word) => {
  acc[word] = (acc[word] || 0) + 1;
  return acc;
}, {});
console.log(wordCount);
// { apple: 3, banana: 2, orange: 1 }

这里的初始值是一个空对象 {}，每次迭代都会修改这个对象并返回它。累加器可以是任意类型，包括嵌套对象、Map、数组甚至函数。多层级聚合的关键在于：累加器本身可以包含多层结构，而每次迭代都可以动态创建或更新深层属性。使用展开运算符可以保持不可变性，避免直接修改原累加器带来的副作用。

多层级对象数组的分组与聚合实战

实际业务中常见的数据结构往往不止一层。假设有一个订单数组，每个订单包含分类 category、产品名称 product 和金额 amount，我们希望按照分类和产品两个层级汇总总金额。使用 reduce 可以非常直接地构建出嵌套对象。

const orders = [
  { category: 'Electronics', product: 'Phone', amount: 200 },
  { category: 'Electronics', product: 'Laptop', amount: 800 },
  { category: 'Electronics', product: 'Phone', amount: 150 },
  { category: 'Clothing', product: 'Shirt', amount: 50 },
  { category: 'Clothing', product: 'Shirt', amount: 60 }
];

const aggregated = orders.reduce((acc, order) => {
  const { category, product, amount } = order;
  if (!acc[category]) {
    acc[category] = {};
  }
  if (!acc[category][product]) {
    acc[category][product] = 0;
  }
  acc[category][product] += amount;
  return acc;
}, {});

console.log(JSON.stringify(aggregated, null, 2));
// {
//   "Electronics": {
//     "Phone": 350,
//     "Laptop": 800
//   },
//   "Clothing": {
//     "Shirt": 110
//   }
// }

这段代码中，初始值是一个空对象。每次迭代先判断 acc[category] 是否存在，不存在则创建空对象，然后继续判断产品层级是否存在，不存在则初始化为 0。最后累加金额。整个过程只遍历一次原数组，时间复杂度为 O(n)，比传统的多层 for 循环加临时映射表更加简洁。

如果需要按更多维度聚合，例如在分类和产品之上再增加年份和月份，累加器的层级也会相应加深。此时可以借助动态键和展开运算符来保持代码清晰。下例同时按年份、月份、分类进行三层聚合：

const records = [
  { year: 2024, month: 1, category: 'A', value: 10 },
  { year: 2024, month: 1, category: 'B', value: 20 },
  { year: 2024, month: 2, category: 'A', value: 15 },
  { year: 2025, month: 1, category: 'A', value: 5 }
];

const multiLevel = records.reduce((acc, item) => {
  const { year, month, category, value } = item;
  acc[year] = acc[year] || {};
  acc[year][month] = acc[year][month] || {};
  acc[year][month][category] = (acc[year][month][category] || 0) + value;
  return acc;
}, {});

console.log(JSON.stringify(multiLevel, null, 2));
// {
//   "2024": {
//     "1": { "A": 10, "B": 20 },
//     "2": { "A": 15 }
//   },
//   "2025": {
//     "1": { "A": 5 }
//   }
// }

使用 || 运算符进行默认值初始化虽然简洁，但需要注意键名不能是 0、空字符串或 false 等假值，否则会被错误地覆盖。更安全的方式是使用 hasOwnProperty 或者直接用逻辑判断 if (acc[year] === undefined)。对于键来自用户输入的情况，建议使用 Map 或 Object.create(null) 来避免原型链污染。

多层级转换：扁平化与树形重建

除了汇总，reduce 还擅长在多层级结构之间进行形态转换。比如将一棵树形结构扁平化为带路径的数组，或者反过来根据路径数组重建嵌套对象。这两种操作在菜单管理、文件目录、权限系统等场景中非常常见。

先看一个将嵌套分类树扁平化的例子。给定一个包含 children 数组的树形对象，我们希望输出每个节点的完整路径和层级信息。可以结合递归和 reduce 来实现：

const categoryTree = [
  {
    name: 'Electronics',
    children: [
      { name: 'Phone', children: [] },
      { name: 'Laptop', children: [
        { name: 'Gaming', children: [] }
      ]}
    ]
  },
  {
    name: 'Clothing',
    children: [
      { name: 'Shirt', children: [] }
    ]
  }
];

function flattenTree(nodes, parentPath = '', result = []) {
  return nodes.reduce((acc, node) => {
    const path = parentPath ? parentPath + '/' + node.name : node.name;
    acc.push({ name: node.name, path, level: path.split('/').length });
    if (node.children && node.children.length > 0) {
      flattenTree(node.children, path, acc);
    }
    return acc;
  }, result);
}

const flatList = flattenTree(categoryTree);
console.log(flatList);
// [
//   { name: 'Electronics', path: 'Electronics', level: 1 },
//   { name: 'Phone', path: 'Electronics/Phone', level: 2 },
//   { name: 'Laptop', path: 'Electronics/Laptop', level: 2 },
//   { name: 'Gaming', path: 'Electronics/Laptop/Gaming', level: 3 },
//   { name: 'Clothing', path: 'Clothing', level: 1 },
//   { name: 'Shirt', path: 'Clothing/Shirt', level: 2 }
// ]

这里 flattenTree 内部使用 reduce 遍历当前层级节点，同时将累积结果数组作为初始值传入。递归调用时没有使用返回值，而是直接修改同一个 acc 数组，这样避免重复创建数组。路径用斜杠拼接，便于后续按路径切分。

反过来，如果已经有一个扁平路径列表，想要重建嵌套树，同样可以用 reduce 逐层挂载。例如根据文件路径数组构建目录结构：

const paths = [
  'src/index.js',
  'src/utils/helper.js',
  'src/components/Button.js',
  'docs/readme.md'
];

function buildTree(pathArray) {
  const root = {};
  pathArray.reduce((acc, path) => {
    const parts = path.split('/');
    let current = root;
    parts.forEach((part, index) => {
      if (!current[part]) {
        current[part] = index === parts.length - 1 ? null : {};
      }
      current = current[part];
    });
    return acc;
  }, root);
  return root;
}

console.log(JSON.stringify(buildTree(paths), null, 2));
// {
//   "src": {
//     "index.js": null,
//     "utils": { "helper.js": null },
//     "components": { "Button.js": null }
//   },
//   "docs": { "readme.md": null }
// }

这个例子中 reduce 的累加器其实就是 root 对象本身，回调内部通过 forEach 逐级深入，遇到不存在的键就创建对象，最后一级用 null 表示文件。这种方法的好处是代码完全基于路径字符串，无需复杂递归，而且可以通过修改 null 标记来区分文件和目录。

常见误区与优化策略

使用 reduce 处理多层级对象数组时，有几个高频错误需要特别留意。第一个是忘记提供初始值。如果数组可能为空，或者希望累加器从对象开始，省略初始值会导致 reduce 使用第一个元素作为初始累加器，后续如果尝试给累加器添加属性就可能报错。例如下面这段代码在空数组上调用会抛出 TypeError：

const empty = [];
const result = empty.reduce((acc, item) => {
  acc[item.key] = item.value;
  return acc;
}); // TypeError: Reduce of empty array with no initial value

正确的做法是始终提供与目标结构一致的初始值，例如 {}、[] 或 new Map()。第二个常见错误是回调函数中忘记返回累加器。箭头函数如果使用花括号体，必须显式写 return acc，否则下一次迭代的累加器会变成 undefined，导致属性访问失败。

const list = [{ k: 'a', v: 1 }, { k: 'b', v: 2 }];
const bad = list.reduce((acc, item) => {
  acc[item.k] = item.v;
  // 缺少 return acc
}, {});
console.log(bad); // undefined
// 第二次迭代时 acc 为 undefined，会抛出 TypeError

除了避免错误，性能优化也很重要。当累加器是普通对象且键来自外部输入时，可能会受到原型链的影响。例如键名为 __proto__ 会污染原型。使用 Object.create(null) 创建无原型对象，可以彻底消除这个隐患。另一个优化是在大规模数据下使用 Map 代替普通对象，因为 Map 的键可以是任意类型，并且查找和插入性能更稳定。

const largeData = Array.from({ length: 10000 }, (_, i) => ({
  group: 'group_' + (i % 100),
  value: i
}));

const mapAgg = largeData.reduce((acc, item) => {
  const prev = acc.get(item.group) || 0;
  acc.set(item.group, prev + item.value);
  return acc;
}, new Map());

console.log(mapAgg.size); // 100
console.log(mapAgg.get('group_0')); // 495000

在上面的代码中，初始值是一个 Map 实例，使用 get 和 set 方法完成聚合。Map 保留键的插入顺序，并且不会出现原型链污染问题。如果需要最终输出普通对象，可以在 reduce 完成后使用 Object.fromEntries(mapAgg) 转换。通过合理设计累加器类型和结构，reduce 可以成为处理复杂多层级数据转换的利器，让代码更加函数式和可读。

JavaScript reduce多层级对象数组聚合与转换修改时间：2026-08-28 08:45:36