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

您可以通過多種方法來執行此操作。 這是一個非常老套但快速的方法。 它涉及兩個步驟：

1. 獲取所有數組，並使用指定的鍵（在此示例中為“客戶端ID”）將它們合並為一個對象。
2. 獲取合並的對象，然后將其轉換回數組。

您可以使用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; }