如何用JavaScript将扁平数组重塑为结构化对象数组

在业务开发中，我们常拿到类似 [{type:'a',name:'x'},{type:'a',name:'y'},{type:'b',name:'z'}] 这样的扁平数组，而组件期望的是 [{type:'a',items:['x','y']},{type:'b',items:['z']}] 的结构化对象数组。下面说明具体的重塑方式。

为什么需要重塑扁平数组

扁平数组便于存储和传输，但前端视图大多依赖树状或分组数据。直接渲染扁平数据会导致界面逻辑复杂，因此需要在拿到数据后做一次转换。

使用 reduce 进行分组转换

最核心的思路是遍历原数组，以某个字段作为分组键，把同组元素收拢进一个对象。代码示例如下：

// 原始扁平数组
const flatList = [
  { type: 'fruit', name: 'apple' },
  { type: 'fruit', name: 'banana' },
  { type: 'meat', name: 'beef' }
];

// 重塑为结构化对象数组
const structured = flatList.reduce((acc, cur) => {
  const group = acc.find(item => item.type === cur.type);
  if (group) {
    group.items.push(cur.name);
  } else {
    acc.push({ type: cur.type, items: [cur.name] });
  }
  return acc;
}, []);

console.log(structured);
// 输出: [{type:'fruit',items:['apple','banana']},{type:'meat',items:['beef']}]

使用 Map 优化查找性能

上面的 find 在大数据量下偏慢，可改用 Map 缓存分组对象：

const flatList = [
  { type: 'fruit', name: 'apple' },
  { type: 'fruit', name: 'banana' },
  { type: 'meat', name: 'beef' }
];

const map = new Map();
const result = [];

for (const item of flatList) {
  if (!map.has(item.type)) {
    const entry = { type: item.type, items: [] };
    map.set(item.type, entry);
    result.push(entry);
  }
  map.get(item.type).items.push(item.name);
}

console.log(result);

处理嵌套层级的情况

如果扁平数据带有 parentId，可以用两次遍历建立树形对象数组。此时依旧是先归组再挂子节点，思路与上面一致。

掌握这两种方式，就能应对绝大多数 JavaScript 扁平数组到结构化对象数组的转换需求。

JavaScript数组重塑对象数组修改时间：2026-07-30 01:48:20