首页 > 解决方案 > 合并两个 JavaScript 对象和冲突的属性

问题描述

假设我有两个对象:

var obj1 = {cars: 'ford', fruit: 'peach', other: ['bar']}
var obj2 = {cars: 'ferrari', info: 'foo', other: ['baz']}

现在我想合并这两个对象和任何冲突的属性。预期结果:

{cars: ['ford', 'ferrari'], fruit: 'peach', info: 'foo', other: ['bar', 'baz']}

但是,使用对象传播

{...obj1, ...obj2}

退货

{cars: 'ferrari', fruit: 'peach', info: 'foo', other: ['baz']}

有没有办法合并两个对象并将冲突的属性合并到数组中而不是覆盖?
注意:我需要纯 JS

标签: javascriptnode.jsmergejavascript-objects

解决方案


您可以按属性合并并检查目标是否不是数组或 thje 值是否为数组。

const
    merge = (target, source) => Object.entries(source).reduce((o, [k, v]) => {
        if (k in o) {
            if (!Array.isArray(o[k])) o[k] = [o[k]];
            [].concat(v).forEach(item => {
                if (!o[k].includes(item)) o[k].push(item);
            });
        } else {
            o[k] = v;
        }
        return o;
    }, target);

var obj1 = { cars: 'ford', fruit: 'peach', other: ['bar'] },
    obj2 =  {cars: 'ferrari', info: 'foo', other: ['baz'] },
    result = [obj1, obj2].reduce(merge, {});

console.log(result);


推荐阅读