Объединяем свойства двух объектов в JavaScript
Вступление
В JavaScript объект определяется как набор пар ключ-значение. Объект – непримитивный тип данных.
Вам часто придётся объединять объекты в один, который содержит все свойства его составных частей. Эта операция называется слиянием. Два наиболее распространенных способа сделать это:
- Используя оператор распространения (…)
- Используя метод Object.assign()
В этом уроке мы рассмотрим, как объединить два объекта в JavaScript.
После этого мы узнаем разницу между мелким слиянием и глубоким слиянием (это важно для полного понимания слияния объектов).
Объединяем объекты с помощью оператора распространения
Мы можем объединить разные объекты, используя оператор распространения (…). Это самый распространённый метод.
Два исходных объекта никак не изменяются. В итоге, вы получаете новый объект, построенный из двух.
Давайте создадим два объекта и объединим их:
const person = {
name: "John Doe",
age: 24
}
const job = {
title: "Full stack developer",
location: "Remote"
}
const employee = {...person, ...job};
console.log(employee);
Результат:
{
name: "John Doe",
age: 24,
title: "Full stack developer",
location: "Remote"
}
Примечание: если у этих двух объектов есть общие свойства, например, location, свойства второго объекта (job) перезапишут свойства первого объекта (person):
const person = {
name: "John Doe",
location: "Remote"
}
const job = {
title: "Full stack developer",
location: "Office"
}
const employee = {...person, ...job}
console.log(employee);
Результат:
{
name: 'John Doe',
location: 'Office',
title: 'Full stack developer'
}
Если вам нужно объединить больше двух объектов, самый правый объект переопределяет объекты слева.
Объединяем объекты с помощью Object.assign()
Ещё одним распространённым способом объединения двух или более объектов является метод Object.assign():
Object.assign(target, source1, source2, ...);
Этот метод копирует все свойства из одного или нескольких исходных объектов в целевой объект. Как и в случае с оператором распространения, при перезаписи используется самое правое значение:
const person = {
name: "John Doe",
age: 24,
location: "U.S.A"
}
const job = {
title: "Full stack developer",
location: "Remote"
}
const employee = Object.assign(person, job);
console.log(employee);
Результат будет следующим:
{
name: "John Doe",
age: 24,
location: "Remote",
title: "Full stack developer"
}
Опять-таки, имейте в виду, что объект, на который ссылается employee – новый объект, не связанный с объектами, на которые ссылается person или job.
Мелкое слияние и глубокое слияние
В случае неглубокого слияния, если одно из свойств исходного объекта – другой объект, целевой объект содержит ссылку на тот же объект, который существует в исходном объекте. В этом случае новый объект не создается.
Давайте изменим объект person и сделаем location объектом:
const person = {
name: "John Doe",
location: {
city: "London",
country: "England"
}
}
const job = {
title: "Full stack developer"
}
const employee = {...person, ...job};
console.log(employee.location === person.location);
Результат:
true
Мы видим, что ссылка на объект location как в объекте person, так и в объекте employee одинакова. Фактически, как оператор распространения (…), так и Object.assign() выполняют неглубокое слияние.
У JavaScript нет поддержки глубокого слияния. Однако существуют сторонние модули и библиотеки, которые поддерживают его, например _.merge от Lodash.
Заключение
В этом уроке мы рассмотрели, как объединить два объекта в JavaScript. Мы изучили оператор распространения (…) и метод Object.assign(), которые выполняют неглубокое слияние двух или более объектов в новый, не затрагивая составные части.