Объединяем свойства двух объектов в 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(), которые выполняют неглубокое слияние двух или более объектов в новый, не затрагивая составные части.

Ответить