React.js中如何按章节名合并同键多值的对象数组

假设你的原始数据结构类似这样（根据需求推测）：

const originalArray = [
  { chapter: '第一章', knowledge: '知识点1', content: '内容1' },
  { chapter: '第一章', knowledge: '知识点2', content: '内容2' },
  { chapter: '第二章', knowledge: '知识点3', content: '内容3' }
];

可以用Array.prototype.reduce()高效实现合并，核心逻辑是以章节名称为分组键，遍历数组时整合同章节的属性值：

const mergedArray = Object.values(
  originalArray.reduce((acc, curr) => {
    const key = curr.chapter;
    if (!acc[key]) {
      // 首次遇到该章节，复制对象并将需合并的属性转为数组
      acc[key] = {
        ...curr,
        knowledge: [curr.knowledge],
        content: [curr.content]
      };
    } else {
      // 已有该章节，将对应属性值追加到数组
      acc[key].knowledge.push(curr.knowledge);
      acc[key].content.push(curr.content);
    }
    return acc;
  }, {})
);

灵活调整说明 #

• 若需将属性值拼接为字符串，把push改为字符串拼接即可，比如acc[key].knowledge += '、' + curr.knowledge
• 该方法仅遍历一次数组，时间复杂度为O(n)，比多次循环筛选更高效
• 可根据实际存在的字段，灵活修改需要合并的属性逻辑

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