如何用JavaScript合并数组中同ID对象并添加语言键？

别担心，刚接触reduce和filter确实会有点懵，我一步步给你讲清楚怎么实现这个需求。

核心思路 #

我们主要用Array.prototype.reduce()来做聚合分组——它可以帮我们把数组里的元素按ID归类，然后把同一ID下的不同语言内容整合到对应的语言键里。最后再把聚合后的结果转换成目标数组结构就好。

具体实现步骤 #

1. 先假设你的原始数据结构（如果和你的实际数据有出入，调整字段名即可） #

const originalItems = [
  { id: 101, lang: 'zh-CN', name: '苹果', desc: '红色的水果' },
  { id: 101, lang: 'en-US', name: 'Apple', desc: 'Red fruit' },
  { id: 102, lang: 'zh-CN', name: '香蕉', desc: '黄色的水果' },
  { id: 102, lang: 'ja-JP', name: 'バナナ', desc: '黄色い果物' },
  { id: 103, lang: 'en-US', name: 'Orange', desc: 'Orange fruit' }
];

2. 使用reduce进行分组合并 #

const mergedData = Object.values(
  originalItems.reduce((acc, item) => {
    // 提取当前条目的id、语言和其他内容
    const { id, lang, ...rest } = item;
    
    // 如果当前id还没在累加器里，初始化一个新对象
    if (!acc[id]) {
      acc[id] = {
        id: id,
        translations: {} // 用来存放不同语言的内容
      };
    }
    
    // 把当前语言的内容添加到translations里
    acc[id].translations[lang] = rest;
    
    return acc;
  }, {}) // 初始值是一个空对象，用来存储分组后的结果
);

3. 解释代码里的关键部分 #

• reduce的第一个参数是回调函数，acc是我们的累加器（用来存分组后的临时数据），item是当前遍历到的数组元素。
• const { id, lang, ...rest } = item：用解构赋值把id和lang单独拿出来，剩下的内容放到rest里（比如name、desc这些字段）。
• if (!acc[id])：检查当前ID是否已经在累加器里，如果没有，就创建一个包含id和空translations的对象。
• acc[id].translations[lang] = rest：把当前语言对应的内容存入translations的对应键下。
• 最后用Object.values()把累加器（一个以ID为键的对象）转换成数组，就是我们要的目标结构。

4. 最终结果示例 #

运行上面的代码后，mergedData会变成：

[
  {
    "id": 101,
    "translations": {
      "zh-CN": { "name": "苹果", "desc": "红色的水果" },
      "en-US": { "name": "Apple", "desc": "Red fruit" }
    }
  },
  {
    "id": 102,
    "translations": {
      "zh-CN": { "name": "香蕉", "desc": "黄色的水果" },
      "ja-JP": { "name": "バナナ", "desc": "黄色い果物" }
    }
  },
  {
    "id": 103,
    "translations": {
      "en-US": { "name": "Orange", "desc": "Orange fruit" }
    }
  }
]

额外补充：如果需要筛选特定ID #

如果你之后需要筛选出某几个ID的条目，可以用filter配合上面的结果，比如：

// 筛选id为101和102的条目
const filteredData = mergedData.filter(item => [101, 102].includes(item.id));

这样就完美实现你的需求啦，要是你的原始数据字段不一样，只要调整解构和赋值的部分就行~

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