如何按对象的type属性对JavaScript数组中的对象进行分组？

嘿，这个分组需求在日常开发里挺常见的，用JavaScript的Array.reduce()就能优雅解决，我给你一步步拆解实现过程：

核心思路 #

先通过reduce把原数组按type归类成一个键为type、值为对应数据数组的对象，再把这个对象转换成你需要的数组格式。如果需要排除某些类型（比如你示例里的bicycle），只需要加个简单的判断就行。

完整代码实现 #

var arr = [ 
  {type: "motorbike", model: "ducati monster 797", quantity: 2}, 
  {type: "car", model: "audi", quantity: 4}, 
  {type: "truck", model: "ford", quantity: 1}, 
  {type: "car", model: "bmw", quantity: 1}, 
  {type: "bicycle", model: "giant", quantity: 3}, 
  {type: "truck", model: "MAN", quantity: 1}, 
  {type: "car", model: "dodge 2012", quantity: 3} 
];

// 1. 用reduce生成按type分组的对象，同时排除bicycle类型
const groupedObj = arr.reduce((acc, item) => {
  // 跳过bicycle类型，如果你不需要排除可以删掉这行
  if (item.type === 'bicycle') return acc;

  // 若当前type还未初始化，创建空数组
  if (!acc[item.type]) {
    acc[item.type] = [];
  }
  // 提取model和quantity存入对应数组
  acc[item.type].push({ model: item.model, quantity: item.quantity });
  return acc;
}, {});

// 2. 将分组对象转换为目标数组格式
const arr2 = Object.entries(groupedObj).map(([type, data]) => ({
  type,
  data
}));

console.log(arr2);
// 输出结果就是你需要的格式

代码解释 #

• Array.reduce()：遍历原数组，累积生成一个分组对象。每遇到一个新的type，就初始化一个空数组；遇到已存在的type，就把当前项的model和quantity推入对应的数组。
• Object.entries()：把分组对象的键值对转换成[type, data]格式的数组，方便后续用map转换。
• Array.map()：把每个[type, data]数组转换成你需要的对象结构。

如果不需要排除bicycle，只需要删掉if (item.type === 'bicycle') return acc;这一行就行，这样结果里会包含bicycle的分组。

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