Объединить свойства двух объектов динамически в JavaScript

Автор оригинала: Abhilash Kakumanu.

Вступление

В JavaScript объект определяется как коллекция Ключевое значение Пары. Объект также является не примитивным типом данных.

Вы будете часто нужно объединить объекты в один, который содержит все отдельные свойства его составных частей. Эта операция называется Слияние Отказ Два наиболее распространенных способа сделать это:

• Использование оператора распространения ( ... )
• Используя Объект.assign () метод

В этом руководстве мы посмотрим на Как объединить два объекта динамически в JavaScript Отказ

После этого мы осмотрим разницу между Неглубокое слияние и Deep Merge Потому что это важно для полного понимания объединения объекта.

Слияние объектов 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"
}

Примечание: Если между этими двумя объектами есть общие свойства, такие как они оба имеют Расположение , свойства от второго объекта ( задания ) перезапишет свойства первого объекта ( 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'
}

Если объединяются более двух объектов, самый правый объект переопределяет те, слева.

Объекты JavaScript с использованием Object.Assign ()

Еще один распространенный способ объединения двух или более объектов – использовать встроенный Объект.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"
}

Опять же, имейте в виду, что объект, на который ссылается сотрудник это совершенно новый объект, и никоим образом не связан с объектами, на которые ссылаются человек или работа Отказ

Мелко слияние против глубокого слива

В случае Неглубокое слияние Если один из свойств на исходном объекте является еще один объект, целевой объект содержит ссылку на тот же объект, который существует в исходном объекте. Новый объект не создан в этом случае.

Давайте настроим предыдущий человек объект и сделать Расположение объект для себя:

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

Мы видим, что ссылка на Расположение объект в обоих человек и сотрудник Объект одинаково. На самом деле, оба оператора распространения ( ... ) и Объект.assign () выполнить неглубокое слияние.

У JavaScript нет Deep Merge Поддержка из коробки. Тем не менее, есть сторонние модули и библиотеки, которые поддерживают его, как Лодаш Отказ

Заключение

В этом руководстве мы посмотрели на Как объединить два объекта в JavaScript Отказ Мы исследовали оператор по распространению ( ... ) и Объект.assign () Метод, который оба выполняют Неглубокое слияние из двух или более объектов в новый, не затрагивая составляющие детали.