Объединение нескольких массивов объектов одинаковой длины в 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

Вы можете уменьшить массивы и назначить объект объекту с тем же индексом.

Это работает для произвольного числа массивов.

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

Answer 4

Вы можете перебрать один из массивов, используя 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.