合并JavaScript中相同长度的多个对象数组

Question

Here are examples of the arrays that I need to merge

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

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

I have tried Object.assign({},urls, images). That ends up just deleting urls in that instance because it does not deep copy. The keys for each object in the array are the same!

Answer 1

If you are certainly sure they are both equal size, you definitely can run through one of them with Array.prototype.map method. Actually, you should use Object.assign if you want to merge an object with a more generic way.

 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

you can use ES6 instead of Object.assign.

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

Answer 2

You could map over one of the arrays and use the index to get the other array's item:

 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) 

Or you could use Array.from like this:

 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

You could iterate over one of the arrays using Array.prototype.map , and using the index provided to the callback function, you can get corresponding value in the other array.

Here's an example:

 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 }))); 

Here the parameters passed into the callback function are t : the item from urls array and id : index of t in urls array.

Answer 4

You could reduce the arrays and assign the object to the object with the same index.

This works for an arbitrary count of arrays.

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