如何在JavaScript中实现按type动态分组数据？

AI 小北

2026-8-12

动态按type分组数据的优化方案

你当前的分组方式需要预先声明固定数组，扩展性不足，以下是两种更优的动态分组实现方法：

方法一：使用`Array.prototype.reduce`（推荐）

reduce是处理数组分组最简洁的方式，无需预先定义分组容器，自动根据type创建对应分组：

const arr = [
  {"id":1,"type":"tv","name":"name1"},
  {"id":2,"type":"movie","name":"name2"},
  {"id":3,"type":"person","name":"name3"},
  {"id":4,"type":"tv","name":"name4"}
];

const groupedData = arr.reduce((result, item) => {
  // 若当前type的分组不存在，先初始化空数组
  if (!result[item.type]) {
    result[item.type] = [];
  }
  // 将当前元素推入对应分组
  result[item.type].push(item);
  return result;
}, {});

// 输出结果：{ tv: [...], movie: [...], person: [...] }
console.log(groupedData);

方法二：使用`forEach`配合对象

如果觉得reduce不够直观，也可以用forEach遍历数组，手动维护分组对象：

const arr = [
  {"id":1,"type":"tv","name":"name1"},
  {"id":2,"type":"movie","name":"name2"},
  {"id":3,"type":"person","name":"name3"},
  {"id":4,"type":"tv","name":"name4"}
];

const groupedData = {};
arr.forEach(item => {
  // 初始化分组数组（如果不存在）
  if (!groupedData[item.type]) {
    groupedData[item.type] = [];
  }
  groupedData[item.type].push(item);
});

console.log(groupedData);