如何合并多个JSON对象数组并为元素添加type属性？

我有多个包含JSON对象数组的结构：

• a: [{h:1, i:2}, {o:1, p:2}]
• b: [{j:1, k:2}]
• c: [{l:1, m:2}]

想要合并成一个数组，同时为每个元素添加对应的type属性，目标输出：

[{type: 'a', h:1, i:2}, {type: 'a', o:1, p:2}, {type: 'b', j:1, k:2}, {type: 'c', l:1, m:2}]

你当前的代码是将多个对象合并成了一个新对象，既没有把数组元素合并为一个数组，也没有实现给每个元素添加type属性的逻辑，所以达不到预期效果。以下是两种可行的解决方案：

方法一：手动处理后合并 #

针对每个数据源，先用map给数组元素添加type属性，再合并所有处理后的数组：

const a = {"a":[{"h":1, "i":2}, {"o":1, "p":2}]};
const b = {"b":[{"j":1, "k":2}]};
const c = {"c":[{"l":1, "m":2}]};

// 给a数组的每个元素添加type: 'a'
const processedA = a.a.map(item => ({ type: 'a', ...item }));
// 给b数组的每个元素添加type: 'b'
const processedB = b.b.map(item => ({ type: 'b', ...item }));
// 给c数组的每个元素添加type: 'c'
const processedC = c.c.map(item => ({ type: 'c', ...item }));

// 合并所有处理后的数组
const result = [...processedA, ...processedB, ...processedC];

console.log(result);

方法二：通用函数批量处理 #

如果有更多类似数据源，用通用函数批量处理可以避免重复代码：

const a = {"a":[{"h":1, "i":2}, {"o":1, "p":2}]};
const b = {"b":[{"j":1, "k":2}]};
const c = {"c":[{"l":1, "m":2}]};

function mergeWithType(...sources) {
  return sources.flatMap(source => {
    // 获取当前数据源的类型标识（如'a'、'b'）
    const type = Object.keys(source)[0];
    // 为数组每个元素添加type属性并返回
    return source[type].map(item => ({ type, ...item }));
  });
}

const result = mergeWithType(a, b, c);
console.log(result);

关键说明 #

• 使用map遍历数组时，通过扩展运算符...item保留原元素的所有属性，同时新增type字段。
• 方法二中的flatMap会自动将多个处理后的子数组合并为一个一维数组，无需额外执行合并操作。
• 注意type的值需要用引号包裹（如'a'），否则会被JavaScript当作未定义变量处理，和目标输出的逻辑一致。

内容的提问来源于stack exchange，提问作者le za a