如何在JavaScript中按ID将第一个数组的对象值合并到第二个数组？

可以通过以下高效方式实现需求：

1. 先把第一个数组转成id与value的映射对象，后续能快速通过id匹配对应值
2. 遍历第二个数组，为每个对象补充value字段：
   • 若映射对象里有对应id的value，直接取用
   • 无匹配id时，设置value为空字符串

完整代码示例 #

// 带value的源数组
const arrWithValue = [
    {
        "id": 1,
        "name": "jumlah_sd",
        "title": "Jumlah SD",
        "value": "1222"
    },
    {
        "id": 2,
        "name": "jumlah_smp",
        "title": "Jumlah SMP",
        "value": "1322"
    }
];

// 需要补充value的目标数组
const arrToMerge = [
    {
        "id": 1,
        "name": "jumlah_sd",
        "title": "Jumlah SD"
    },
    {
        "id": 2,
        "name": "jumlah_smp",
        "title": "Jumlah SMP"
    },
    {
        "id": 3,
        "name": "jumlah_sma",
        "title": "Jumlah SMA"
    }
];

// 构建id到value的映射表
const valueMap = arrWithValue.reduce((acc, item) => {
    acc[item.id] = item.value;
    return acc;
}, {});

// 合并生成新数组
const mergedArray = arrToMerge.map(item => ({
    ...item,
    value: valueMap[item.id] ?? ""
}));

console.log(mergedArray);

代码说明 #

• 用reduce构建映射表，把数组转成{id: value}结构，后续查找效率为O(1)
• 用map遍历目标数组，通过扩展运算符...保留原对象所有属性，再补充value字段
• 使用空值合并运算符??确保：当对应id不存在时，value被设为空字符串（相比||，能正确处理0这类假值场景）

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