合並JavaScript中相同長度的多個對象數組

Question

這是我需要合並的數組的示例

const urls = [{url:"http:/..."},{url:"http:/..."},{url:"http:/..."}]; 
const images = [{image:"..."},{image:"..."},{image:"..."}];

const merged = [{url:"http:/...", image:"..."},{url:"http:/...", image:"..."},{url:"http:/...", image:"..."}]

我已經嘗試過Object.assign（{}，urls，images）。 最終只能刪除該實例中的url，因為它不會進行深度復制。 數組中每個對象的鍵都相同！

Answer 1

如果您確定它們大小相等，則可以使用Array.prototype.map方法遍歷其中之一。 實際上，如果要以更通用的方式合並對象，則應使用Object.assign 。

 const urls = [{url:"http:/..."},{url:"http:/..."},{url:"http:/..."}]; const images = [{image:"..."},{image:"..."},{image:"..."}]; const results = urls.map((url, index) => Object.assign({}, url, images[index]) ); console.log(results) 

ES6

您可以使用ES6代替Object.assign。

const results = urls.map((url, index) => 
  ({...url, ...images[index]})
);

Answer 2

您可以map一個數組，並使用索引獲取另一個數組的項：

 const urls = [{url:"http:/0..."},{url:"http:/1..."},{url:"http:/2..."}]; const images = [{image:"0..."},{image:"1..."},{image:"2..."}]; const newArray = urls.map((url, i) => ({...url, ...images[i] }) ) console.log(newArray) 

或者您可以像這樣使用Array.from ：

 const urls = [{url:"http:/0..."},{url:"http:/1..."},{url:"http:/2..."}], images = [{image:"0..."},{image:"1..."},{image:"2..."}]; const length = urls.length const newArray = Array.from({ length }, (_, i) => ({ ...urls[i], ...images[i] }) ) console.log(newArray) 

Answer 3

您可以使用Array.prototype.map遍歷一個數組，並使用提供給回調函數的索引，在另一個數組中獲取相應的值。

這是一個例子：

 const urls = [{url:"http:/..."},{url:"http:/..."},{url:"http:/..."}]; const images = [{image:"..."},{image:"..."},{image:"..."}]; console.log(urls.map((t, id) => ({ image: images[id].image, url: t.url }))); 

在這里，傳遞給回調函數的參數是t ： urls數組中的項， id ： t在urls數組中的索引。

Answer 4

您可以減少數組並將對象分配給具有相同索引的對象。

這適用於任意數量的數組。

 const urls = [{url:"http:/..."}, { url: "http:/..." }, { url: "http:/..." }], images = [{ image: "..." }, { image: "..." }, { image: "..." }], result = [urls, images] .reduce((r, a) => ( a.forEach((o, i) => Object.assign(r[i] = r[i] || {}, o)), r ), []); console.log(result); 

 .as-console-wrapper { max-height: 100% !important; top: 0; }