將對象數組轉換為具有更多鍵值對的其他對象數組

Question

我有一個場景，我需要將下面的對象數組轉換為其他對象數組，如下所示：

給定數組：

let a = [{value : 2}, {value: 4}, {value: 7}, {value: 9}];
let b = [{name : dataA}, {name: dataB}, {name: dataC}, {name: dataD}]

需要最終輸出::

let c = [{value:2, name: dataA},{value:4, name: dataB},{value:7, name: dataC},{value:9, name: dataD}]

我很困惑如何做到這一點。

Answer 1

你可以用reduce來做到：

 let a = [{value : 2}, {value: 4}, {value: 7}, {value: 9}]; let b = [{name : 'dataA'}, {name: 'dataB'}, {name: 'dataC'}, {name: 'dataD'}] const output = a.reduce((aggArr, child, index) => { child.name = b[index].name; aggArr.push(child) return aggArr; }, []) console.log(output);

你也可以用地圖來做到這一點：

 let a = [{value : 2}, {value: 4}, {value: 7}, {value: 9}]; let b = [{name : 'dataA'}, {name: 'dataB'}, {name: 'dataC'}, {name: 'dataD'}] const output = a.map((child, index) => { child.name = b[index].name; return child; }) console.log(output);

您還可以更一般地執行此操作，以便將任何和所有鍵值對合並在一起，並在發生沖突時保存一組值。

這看起來像（具有更復雜的初始數據）：

 let a = [ {value : 2, letter: 'a'}, {value: 4, letter: 'b'}, {value: 7, letter: 'c'}, {value: 9, letter: 'd'} ]; let b = [ {value: 4, name : 'dataA'}, {value: 6, name: 'dataB'}, {value: 14, name: 'dataC'}, {value: 18, name: 'dataD'} ] const output = a.map((child, index) => { Object.keys(b[index]).forEach(key => { if (child.hasOwnProperty(key)){ child[key] = [child[key], b[index][key]]; } else{ child[key] = b[index][key]; } }); return child; }) console.log(output);

輸出是：

output = [
  {value : [2, 4], letter: 'a', name : 'dataA'},
  {value: [4, 8], letter: 'b', name : 'dataB'},
  {value: [7, 14], letter: 'c', name : 'dataC'},
  {value: [9, 18], letter: 'd', name : 'dataD'}
];

如果你不關心碰撞或者它們永遠不會發生，那么你可以簡化這個：

 let a = [ {value : 2, letter: 'a'}, {value: 4, letter: 'b'}, {value: 7, letter: 'c'}, {value: 9, letter: 'd'} ]; let b = [ {value: 4, name : 'dataA'}, {value: 6, name: 'dataB'}, {value: 14, name: 'dataC'}, {value: 18, name: 'dataD'} ] const output = a.map((child, index) => { return Object.assign(child, b[index]); }) console.log(output);

所以請注意碰撞是如何處理的：

輸出是：

output = [
  {value : 4, letter: 'a', name : 'dataA'},
  {value: 8, letter: 'b', name : 'dataB'},
  {value: 14, letter: 'c', name : 'dataC'},
  {value: 18, letter: 'd', name : 'dataD'}
];

即第二個數組的值覆蓋第一個

同樣重要的是，從 Edge 12 開始支持Object.assign()但在 IE 中根本不支持它 - 但當然它在所有主要瀏覽器中都受支持：

https://caniuse.com/#feat=mdn-javascript_builtins_object_assign

最后，我們還可以將return Object.assign(child, b[index])替換為return {...child, ...b[index]}但對此的支持並不那么好（盡管所有現代瀏覽器都支持它）：

https://caniuse.com/#feat=mdn-javascript_operators_spread_spread_in_object_literals