將對象嵌套數組合並為一個新數組

Question

給定下面的對象，我正在尋找一種干凈有效的方法來從每個項目的“ subItems”數組創建數組。

const items = [{
    'a': 'a1',
    'b': 'b1',
    'subItems': [
        {'c': 'c1'},
        {'d': 'd1'}
    ]
  },
  {
    'e': 'e1',
    'subItems': [
      {'f': 'f1'},
      {'g': 'g1'}
    ]
  }
];

因此，對於此示例，我需要的結果是：

const groupedSubItems = [{c: c1},{d:d1},{f:f1},{g:g1}];

目前，我只是循環遍歷並封裝所有數組，但是這似乎並不是解決此問題的最佳方法：

let groupedSubItems = [];
items.forEach(function(item) {
  if (item.subItems) {
    groupedSubItems = groupedSubItems.concat(item.subItems);
  }
});

注意：如圖所示，所有子項目數組只能使用相同的鍵向下一層，並且可能存在也可能不存在。

Answer 1

您可以將concat與傳播語法和map方法結合使用來創建子項數組。

 const items = [{"a":"a1","b":"b1","subItems":[{"c":"c1"},{"d":"d1"}]},{"e":"e1","subItems":[{"f":"f1"},{"g":"g1"}]}] const subItems = [].concat(...items.map(({subItems}) => subItems || [])); console.log(subItems) 

Answer 2

首先，您只想獲得以下子項：

var itemsSubItems = items.map(function(item) { return item.subItems; });
// [ [ { item: 1 }, { item: 2 } ], [ { item: 3 } ] ]

這為您提供了一個數組數組。 數組中的每個元素仍然代表一個項目：該項目的子項目。 現在，您只需要子項目數組，而不是由項目定界。

var subItems = itemsSubItems.reduce(function(si, current) {
  return si.concat(current);
}, []);

對於外部數組中的每個子項數組，將它們連接到一個新數組。

一個簡短的ES6示例：

const subItems = items.map(item => item.subItems).reduce((a, c) => a.concat(c), []);

Answer 3

您可以通過對項目數組應用reduce來輕松實現這一目標。

const items = [{"a":"a1","b":"b1","subItems":[{"c":"c1"},{"d":"d1"}]},{"e":"e1","subItems":[{"f":"f1"},{"g":"g1"}]}];

const subItems = items.reduce((acc, actual) => acc.concat(actual['subItems']||[]),[]);

Answer 4

您可以使用forEach和散布運算符...以獲得所需的結果

 const items = [{'a': 'a1','b': 'b1','subItems': [{'c': 'c1'},{'d': 'd1'}]},{'e': 'e1','subItems': [{'f': 'f1'},{'g': 'g1'}]}]; const subItems = []; items.forEach(obj => subItems.push(...obj.subItems)); console.log(subItems);