Вступление

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

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

• Использование оператора распространения ( ... )
• Использование Object.assign()

В этом руководстве мы рассмотрим, как динамически объединить два объекта в JavaScript .

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

Объединение объектов 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' 
 } 

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

Объединить объекты JavaScript с помощью Object.assign ()

Другой распространенный способ объединения двух или более объектов - использование встроенного метода Object.assign()

 Object.assign(target, source1, source2, ...); 

Этот метод копирует все свойства из одного или нескольких исходных объектов в целевой объект. Как и в случае с оператором распространения, при перезаписи используется самое правое значение:

 const person = { 
 name: "John Doe", 
 age: 24, 
 location: "USA" 
 } 
 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{.udemy-link} .

Заключение

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