JavaScript 中根据 key 合并不同的两个数组

// 输入
const source = [{ "id": 1, "a": 50 }, { "id": 2, "a": 55 }, { "id": 4, "a": 100 }]
const target =  [{ "id": 1, "b": 40 }, { "id": 3, "b": 45 }, { "id": 4, "b": 110 }]
// 输出
const output =  [
    { "id": 1, "a": 50, "b": 40 },
    { "id": 3, "b": 45 },
    { "id": 4, "a": 100, "b": 110 },
]

将 source 和 target 两个数组合并成为 output 数组。我们可以看到 source 和 target 两个数组是通过 id 对应的值进行合并的，这里使用遍历 target 数组，遍历的每一项都与 source 使用 find 方法去找到对应 source 数据。由于考虑到 source 和 target 数组中可能存在相同的 key, 所以我们使用回调函数将结果返回，默认直接将 source 数据和遍历的 target 项一起返回。
具体代码实现如下：

function handleMergeArrayObj(source, target, sourceKey, targetKey, cb) {
    return target.map(element => {
        const row = (source.find(item => item[sourceKey] === element[targetKey]) || {})
        return cb ? cb(row, element) : { ...row, ...element }
    })
}

// 调用
console.log(handleMergeArrayObj(source, target, 'id', 'id'))