JavaScript 按 ID 和名称将 3 个对象数组合并为 1 个对象数组

Question

我不知道最好的方法。我有 3 个对象数组

arr1 = [
{Client ID:"1", Client Name:"ABC", D1:"some data", D2:"more data"},
{Client ID:"2", Client Name:"DEF", D1:"some data", D2:"more data"},
{Client ID:"3", Client Name:"GHI", D1:"some data", D2:"more data"}
]


arr2 = [
{Client ID:"1", Client Name:"ABC", D3:"and more data", D4:"more more data"},
{Client ID:"2", Client Name:"DEF", D3:"and more data", D4:"more more data"},
{Client ID:"3", Client Name:"GHI", D3:"and more data", D4:"more more data"}
]

arr3 = [
{Client ID:"1", Client Name:"ABC", D5:"other data", D6:"extra Data"},
{Client ID:"2", Client Name:"DEF", D5:"other data", D6:"extra Data"},
{Client ID:"3", Client Name:"GHI", D5:"other data", D6:"extra Data"}
]

我想合并成

newArr = [
{Client ID:"1", Client Name:"ABC", D1:"some data", D2:"more data", D3:"and more data", D4:"more more data", D5:"other data", D6:"extra Data"},
{Client ID:"2", Client Name:"DEF", D1:"some data", D2:"more data", D3:"and more data", D4:"more more data", D5:"other data", D6:"extra Data"},
{Client ID:"3", Client Name:"GHI", D1:"some data", D2:"more data", D3:"and more data", D4:"more more data", D5:"other data", D6:"extra Data"}
]

另一个问题是，所有 3 个数组并不总是包含数据！有时我可能只结合 arr2 和 arr3 或 arr1 和 arr3 或 arr1 和 arr2。

谢谢！

Answer 1

Array#concat 所有数组，然后使用 array#reduce 创建具有相同 Client ID 的合并对象，然后使用 Object.values() 提取值。

var arr1 = [{"Client ID":"1", "Client Name":"ABC", "D1":"some data", D2:"more data"},{"Client ID":"2", "Client Name":"DEF", "D1":"some data", D2:"more data"},{"Client ID":"3","Client Name":"GHI", "D1":"some data", D2:"more data"}],
    arr2 = [{"Client ID":"1", "Client Name":"ABC", "D3":"and more data", "D4":"more more data"},{"Client ID":"2", "Client Name":"DEF", "D3":"and more data", "D4":"more more data"},{"Client ID":"3", "Client Name":"GHI", "D3":"and more data", "D4":"more more data"}],
    arr3 = [{"Client ID":"1", "Client Name":"ABC", "D5":"other data", "D6":"extra Data"},{"Client ID":"2", "Client Name":"DEF", "D5":"other data", "D6":"extra Data"},{"Client ID":"3", "Client Name":"GHI", "D5":"other data", "D6":"extra Data"}],
    result = Object.values([].concat(arr1,arr2, arr3).reduce((r,o) => {
      r[o['Client ID']] = r[o['Client ID']] || {};
      Object.assign(r[o['Client ID']], o);
      return r;
    },{}));

console.log(result);

Answer 2

有多种方法可以做到这一点。这是一种非常古老但快速的方法。它包括两个步骤：

获取所有数组并使用指定的键将它们合并到一个对象中（本例中为'Client ID'）。
获取合并后的对象并将其转换回数组。

您可以使用 Lodash 或其他库来完成其中的某些操作，但即使全部使用普通 JavaScript 也不会太复杂。

var arr1 = [
{"Client ID":"1", "Client Name":"ABC", D1:"some data", D2:"more data"},
{"Client ID":"2", "Client Name":"DEF", D1:"some data", D2:"more data"},
{"Client ID":"3", "Client Name":"GHI", D1:"some data", D2:"more data"}
];

var arr2 = [
{"Client ID":"1", "Client Name":"ABC", D3:"and more data", D4:"more more data"},
{"Client ID":"2", "Client Name":"DEF", D3:"and more data", D4:"more more data"},
{"Client ID":"3", "Client Name":"GHI", D3:"and more data", D4:"more more data"}
];

var arr3 = [
{"Client ID":"1", "Client Name":"ABC", D5:"other data", D6:"extra Data"},
{"Client ID":"2", "Client Name":"DEF", D5:"other data", D6:"extra Data"},
{"Client ID":"3", "Client Name":"GHI", D5:"other data", D6:"extra Data"}
];

console.log( mergeArrays( 'Client ID', [ arr1, arr2, arr3 ] ) );

function mergeArrays( key, arrays ) {
    // First merge the arrays into an object
    // indexed by the specified key
    var merged = {};
    arrays.forEach( function( array ) {
        array.forEach( function( item ) {
            var id = item[key];
            var target = merged[id];
            if( ! target ) target = merged[id] = {};
            for( var name in item ) {
                if( item.hasOwnProperty(name) ) {
                    target[name] = item[name];
                }
            }
        });
    });
    // Now convert the merged object back to an array
    var result = [];
    for( var id in merged ) {
        if( merged.hasOwnProperty(id) ) {
            result.push( merged[id] );
        }
    }
    return result;
}

JavaScript 按 ID 和名称将 3 个对象数组合并为 1 个对象数组

JavaScript Merging 3 Arrays of Objects into 1 Array of Objects by ID and Name

javascript

arrays

object

multidimensional-array

array-merge