时间戳

首页 > 解决方案 > 在javascript中组合两个不同大小的对象数组

javascript - 在javascript中组合两个不同大小的对象数组

问题描述

我有两个不同大小的数组，像这样

[{ id: 1, name: 'One', contacts: [] }, 
 { id: 2, name: 'Two', contacts: [] }, 
 { id: 3, name: 'Three', contacts: [] }, 
 { id: 4, name: 'Four', contacts: [] }]

[{ id: 1, name: 'One', contacts: [{ id: 100, name: "C1" }, { id: 101, name: "C2" }] },
 { id: 3, name: 'Three', contacts: [{ id: 120, name: "C1" }, { id: 121, name: "C2" }] },
 { id: 5, name: 'Five', contacts: [{ id: 420, name: "F1" }, { id: 421, name: "F2" }] }];

我在javascript中尝试了以下代码 

const mergeArray = (source, merge, by) => source.map(item => ({
    ...item,
    ...(merge.find(i => i[by] === item[by]) || {}),
    }));

    output =  mergeArray(this.oldArray1,this.oldArray2,'id');

它给出的输出为

[{ id: 1, name: 'One', contacts: [{ id: 100, name: "C1" }, { id: 101, name: "C2" }] }, 
{ id: 2, name: 'Two', contacts: [] }
{ id: 3, name: 'Three', contacts: [{ id: 120, name: "C1" }, { id: 121, name: "C2" }] }]

但是像这样的期望输出

[{ id: 1, name: 'One', contacts: [{ id: 100, name: "C1" }, { id: 101, name: "C2" }] }, 
{ id: 2, name: 'Two', contacts: [] }
{ id: 3, name: 'Three', contacts: [{ id: 120, name: "C1" }, { id: 121, name: "C2" }] },
{ id: 4, name: 'Four', contacts: [] }
{ id: 5, name: 'Five', contacts: [{ id: 420, name: "F1" }, { id: 421, name: "F2" }] }]

标签： javascriptecmascript-6

解决方案

您可以将数组收集在一个数组中，或者简单地连接数组，然后通过签入来减少该数组（如果id它在结果数组中）。如果未将对象添加到结果数组或如果存在，则contacts使用实际数据进行扩展。

var array1 = [{ id: 1, name: 'One', contacts: [] }, { id: 2, name: 'Two', contacts: [] }, { id: 3, name: 'Three', contacts: [] }, { id: 4, name: 'Four', contacts: [] }],
    array2 = [{ id: 1, name: 'One', contacts: [{ id: 100, name: "C1" }, { id: 101, name: "C2" }] }, { id: 3, name: 'Three', contacts: [{ id: 120, name: "C1" }, { id: 121, name: "C2" }] }, { id: 5, name: 'Five', contacts: [{ id: 420, name: "F1" }, { id: 421, name: "F2" }] }],
    merged = [array1, array2].reduce((r, a) => {
        a.forEach(o => {
            var object = r.find(({ id }) => id === o.id);
            if (!object) {
                return r.push(o);
            }
            object.contacts.push(...o.contacts);
        });
        return r;
    }, []);

console.log(merged);
.as-console-wrapper { max-height: 100% !important; top: 0; }

推荐阅读