Объединить объекты 2 массивов

Question

Давайте рассмотрим пример.

let arr1 = [{image: "some_image_url_1.png"}, {image: "some_image_url_2.png"}]

let arr2 = [{value: "some value 1"}, {value: "some value 2"}]

Мне нужно объединить эти 2 массива объектов и создать следующий массив.

let result = [{image: "some_image_url_1.png", value: "some value 1"}, {image: "some_image_url_2.png", value: "some value 2"}]

Есть ли какое-нибудь решение сделать это с угловым 2? Может с Лодашем?

Answer 1

Angular использует машинописную и стрелочную нотацию. Вам нужна только одна строка:

let result = arr1.map((item, index) => ({...item, ...arr2[index]}));

Answer 2

Для произвольного числа массивов и неравной длины вы можете уменьшить массив и Object.assign для объектов.

var array1 = [{image: "some_image_url_1.png"}, {image: "some_image_url_2.png"}],
    array2 = [{value: "some value 1"}, {value: "some value 2"}],
    result = [array1, array2].reduce(
        (r, a) => (a.forEach((o, i) => Object.assign(r[i] = r[i] || {}, o)), r),
        []
    );
    
console.log(result);

Answer 3

Для создания нового массива из существующих массивов вы можете использовать map():

let arr1 = [{image: "some_image_url_1.png"}, {image: "some_image_url_2.png"}]

let arr2 = [{value: "some value 1"}, {value: "some value 2"}]

let result = arr1.map(function(i, idx){
  var obj = {};
  obj.image = i.image; 
  obj.value = arr2[idx].value;
  return obj;
});

console.log(result)

[{image: "some_image_url_1.png", value: "some value 1"},
{image: "some_image_url_2.png", value: "some value 2"}]

Answer 4

Используйте Object.assign для достижения этой цели, когда вам не нужно зависеть от имени ключа для объекта, которое в вашем случае равно value. Вы можете использовать код с большей гибкостью в отношении свойств name:

let arr1 = [{image: "some_image_url_1.png"}, {image: "some_image_url_2.png"}]

let arr2 = [{value: "some value 1"}, {value: "some value 2"}]

let res = [];
arr1.forEach(function(obj, index){
  let newObj = Object.assign(obj, arr2[index])
  res.push(newObj);
});

console.log(res);

Основным преимуществом использования Object.assign является то, что он позволяет объединять объекты с несколькими свойствами, такими как:

let arr1 = [{image: "some_image_url_1.png"}, {image: "some_image_url_2.png"}]

let arr2 = [{value: "some value 1", anotherValue: 'anotherValue1'}, {value: "some value 2",  anotherValue: 'anotherValue2'}]

let res = [];
arr1.forEach(function(obj, index){
  let newObj = Object.assign(obj, arr2[index])
  res.push(newObj);
});

console.log(res);

Answer 5

Используйте функцию карты JavaScript.

var arr1 = [1, 2, 3]
var arr2 = ['a', 'b', 'c']

var result = arr1.map(function(e, i) {
  return [e, arr2[i]];
});

См. карта

Answer 6

Если вы довольны изменением реальных объектов в arr1, вы можете сделать что-то простое, например:

arr1.forEach((item, i) => item.value = arr2[i].value)

Если вы не хотите изменять исходные массивы, вы можете использовать Object.assign для создания нового объекта:

arr1.map((item, i) => Object.assign({}, item, arr2[i]))