從兩個陣列創建一個物件

我有兩個物件陣列：

const headers = [
  {
    ID: "1",
    Header: "General",
  },
  {
    ID: "2",
    Header: "Misc",
  },
  ...
]

const terms = [
  {
    Header: "General",
    Term: "Lorem ipsum",
    Definition: "Lorem ipsum",
  },      
  {
    Header: "General",
    Term: "Lorem ipsum",
    Definition: "Lorem ipsum",
  },
  {
    Header: "Misc",
    Term: "Lorem ipsum",
    Definition: "Lorem ipsum",
  },
  {
    Header: "General",
    Term: "Lorem ipsum",
    Definition: "Lorem ipsum",
  },
  {
    Header: "General",
    Term: "Lorem ipsum",
    Definition: "Lorem ipsum",
  },
  {
    Header: "General",
    Term: "Lorem ipsum",
    Definition: "Lorem ipsum",
  },
  ...
]

我想要一個物件，它以每個標題作為鍵，并以所有術語的陣列作為值：

{
  "General: [
    {
      Term: "Lorem ipsum",
      Definition: "Lorem ipsum",
    }
    {
      Term: "Lorem ipsum",
      Definition: "Lorem ipsum",
    },
    ...
  ],
  "Misc": [
    {
      Term: "Lorem ipsum",
      Definition: "Lorem ipsum",
    },
    {
      Term: "Lorem ipsum",
      Definition: "Lorem ipsum",
    },
    {
      Term: "Lorem ipsum",
      Definition: "Lorem ipsum",
    },
    ...
  ],
  ...
}

我猜有一種方法可以用 .map .foreach .filter 或一些組合來做到這一點，但一整天都在碰壁。包括只是嘗試將問題轉化為我在這里嘗試做的事情，以便我可以找到更好的搜索結果。任何幫助將不勝感激。謝謝！

uj5u.com熱心網友回復：

您可以結合使用reduce和forEach來獲得結果。這將只需要遍歷陣列一次，而不是terms像嵌套forEach回圈那樣遍歷兩次。

const obj = headers.reduce((a, o) => { a[o.Header] = []; return a; }, {});
terms.forEach(({ Header, ...x }) => obj[Header].push(x));

說明：reduce從陣列轉換為物件。然后forEach回圈并將這些術語添加到新創建的物件中。

這是一個作業示例：

顯示代碼片段

const headers = [
  {
    ID: '1',
    Header: 'General',
  },
  {
    ID: '2',
    Header: 'Misc',
  },
];

const terms = [
  {
    Header: 'General',
    Term: 'Lorem ipsum',
    Definition: 'Lorem ipsum',
  },
  {
    Header: 'General',
    Term: 'Lorem ipsum',
    Definition: 'Lorem ipsum',
  },
  {
    Header: 'Misc',
    Term: 'Lorem ipsum',
    Definition: 'Lorem ipsum',
  },
  {
    Header: 'General',
    Term: 'Lorem ipsum',
    Definition: 'Lorem ipsum',
  },
  {
    Header: 'General',
    Term: 'Lorem ipsum',
    Definition: 'Lorem ipsum',
  },
  {
    Header: 'General',
    Term: 'Lorem ipsum',
    Definition: 'Lorem ipsum',
  },
];

const obj = headers.reduce((a, o) => { a[o.Header] = []; return a; }, {});
terms.forEach(({ Header, ...x }) => obj[Header].push(x));
console.log(obj);

uj5u.com熱心網友回復：

如果您不需要額外的屬性，一個基本的方法是：

const outputObj = {}
headers.forEach(header => {
    const headerArr = outputObj[header.Header] = [];
    terms.forEach(term => {
        const {Header, Term, Definition} = term;
        if (Header === header.Header) {
            headerArr.push({Term, Definition});
        }
    })
})

這將遍歷每個標題并將 Header 屬性添加為帶有空陣列的鍵，然后第二個回圈將遍歷術語并僅添加術語和定義（省略標題）。

uj5u.com熱心網友回復：

您可以將forEach此處用作：

const dict = {};
headers.forEach(({ Header }) => (dict[Header] = []));
terms.forEach(({ Header, ...rest }) => dict[Header].push(rest));
console.log(dict);

const headers = [
  {
    ID: "1",
    Header: "General",
  },
  {
    ID: "2",
    Header: "Misc",
  },
];

const terms = [
  {
    Header: "General",
    Term: "Lorem ipsum",
    Definition: "Lorem ipsum",
  },
  {
    Header: "General",
    Term: "Lorem ipsum",
    Definition: "Lorem ipsum",
  },
  {
    Header: "Misc",
    Term: "Lorem ipsum",
    Definition: "Lorem ipsum",
  },
  {
    Header: "General",
    Term: "Lorem ipsum",
    Definition: "Lorem ipsum",
  },
  {
    Header: "General",
    Term: "Lorem ipsum",
    Definition: "Lorem ipsum",
  },
  {
    Header: "General",
    Term: "Lorem ipsum",
    Definition: "Lorem ipsum",
  },
];

const dict = {};
headers.forEach(({ Header }) => (dict[Header] = []));
terms.forEach(({ Header, ...rest }) => dict[Header].push(rest));
console.log(dict);

標籤：javascript 数组

上一篇：如何在物件陣列中獲取具有唯一值的鍵？(JavaScript)

下一篇：根據JavaScript可用性加載不同的PHP檔案