合并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; }