Для формирования массива объектов на основе двух других массивов объектов в JavaScript вы можете использовать различные методы и подходы в зависимости от задачи. Ниже я рассмотрю два наиболее распространенных метода.
1. Использование циклов:
В этом подходе вы будете перебирать элементы из двух исходных массивов и создавать новые объекты, на основе которых будет формироваться целевой массив.
const array1 = [{ id: 1, name: 'John' }, { id: 2, name: 'Alice' }]; const array2 = [{ id: 1, age: 27 }, { id: 2, age: 30 }]; const newArray = []; for (let i = 0; i < array1.length; i++) { const object1 = array1[i]; for (let j = 0; j < array2.length; j++) { const object2 = array2[j]; if (object1.id === object2.id) { const mergedObject = { id: object1.id, name: object1.name, age: object2.age }; newArray.push(mergedObject); break; } } } console.log(newArray);
В данном примере мы объединяем элементы массивов array1
и array2
на основе общего свойства id
. Таким образом, если id
первого объекта в массиве array1
соответствует id
первого объекта в массиве array2
, мы создаем новый объединенный объект и добавляем его в newArray
. Мы используем вложенные циклы для сравнения каждого объекта из array1
со всеми объектами из array2
.
2. Использование метода map()
:
Метод map()
позволяет сформировать новый массив, основываясь на уже существующем массиве. В данном случае, мы будем использовать два вызова метода map()
, чтобы совместить элементы из двух исходных массивов.
const array1 = [{ id: 1, name: 'John' }, { id: 2, name: 'Alice' }]; const array2 = [{ id: 1, age: 27 }, { id: 2, age: 30 }]; const newArray = array1.map((object1) => ({ id: object1.id, name: object1.name, age: array2.find((object2) => object2.id === object1.id)?.age })); console.log(newArray);
Мы используем метод map()
для перебора каждого элемента из array1
и создания нового объекта. Внутри map()
используется метод find()
, который находит первый объект в array2
с совпадающим id
. Если объект совпадающего id
найден, мы добавляем его свойство age
к новому объекту в newArray
. Обратите внимание, что мы использовали опциональную цепочку (?.
), чтобы избежать ошибки, если find()
не находит совпадений.
Оба метода дают одинаковый результат. Выбор между ними зависит от ваших предпочтений и конкретного контекста использования.