如何用JavaScript将JSON数组中同model的img字段合并为数组？

原始JSON示例 #

[
  { "model": "modelA", "img": "img1.jpg" },
  { "model": "modelA", "img": "img2.jpg" },
  { "model": "modelB", "img": "img3.jpg" },
  { "model": "modelC", "img": "img4.jpg" },
  { "model": "modelB", "img": "img5.jpg" }
]

目标JSON结构 #

[
  { "model": "modelA", "img": ["img1.jpg", "img2.jpg"] },
  { "model": "modelB", "img": ["img3.jpg", "img5.jpg"] },
  { "model": "modelC", "img": ["img4.jpg"] }
]

问题分析 #

用map+filter的方式容易出现重复创建同一model对象的问题——map会遍历每一项，每次遇到相同model时都会生成新对象，最终结果里会出现重复的model条目，无法实现合并需求。

正确实现代码 #

用Array.reduce()做聚合处理是最直接高效的方式，它能帮我们累积同一个model对应的所有img：

const originalData = [
  { "model": "modelA", "img": "img1.jpg" },
  { "model": "modelA", "img": "img2.jpg" },
  { "model": "modelB", "img": "img3.jpg" },
  { "model": "modelC", "img": "img4.jpg" },
  { "model": "modelB", "img": "img5.jpg" }
];

const mergedData = Object.values(originalData.reduce((acc, item) => {
  // 若当前model已在累加器中，直接追加img到数组
  if (acc[item.model]) {
    acc[item.model].img.push(item.img);
  } else {
    // 若model不存在，创建新对象并将img转为数组
    acc[item.model] = {
      model: item.model,
      img: [item.img]
    };
  }
  return acc;
}, {}));

console.log(mergedData);

代码解释 #

1. reduce的初始值是一个空对象{}，用来暂存每个model对应的合并后对象
2. 遍历原始数组的每一项：
   • 若当前model已在累加器中，将当前item的img推入对应对象的img数组
   • 若model不存在，创建包含该model和img数组的新对象存入累加器
3. 最后用Object.values()提取累加器对象的所有值，转换成目标要求的数组结构

如果坚持要用map+filter，可以先获取去重的model列表，再遍历每个model筛选对应img：

// 获取去重后的model列表
const uniqueModels = [...new Set(originalData.map(item => item.model))];

const mergedData = uniqueModels.map(model => {
  // 筛选当前model的所有img并整理成数组
  const imgs = originalData.filter(item => item.model === model).map(item => item.img);
  return { model, img: imgs };
});

这种方式逻辑简单，但性能不如reduce——每个model都会触发一次全数组遍历，数据量大时差异明显。

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