Чтобы в JS (JavaScript) объединить несколько объектов в один, есть не так много способов, как кажется. Сегодня мы разберем два максимально распространенных варианта объединения, которые можно использовать по своему усмотрению, в зависимости от конкретной ситуации. А именно:
покажем как объединить объекты в JS, применив специальный оператор распространения;
покажем как объединить объекты в JS, применив специальный метод.
Напомним, что объекты в JavaScript представляют не примитивный тип данных, которые состоят из сочетаний пар «ключ-значение».
Как объединить объекты JS, применив оператор распространения
Объединение объектов в JavaScript может происходить при использовании оператора распространения «(...)». На практике, такой способ объединить JS-объекты применяется наиболее часто из-за своей простоты принципа действия.
Его суть в том, что он никак не воздействует на оригинальные объекты, а только лишь на их основе создает другой. Давайте рассмотрим практический пример.
const worker = {
name: "Дормидонт Платонович",
age: 27
}
const ofer = {
title: "Fullstack web-developer",
location: "Удаленно"
}
const employee = {...worker, ...ofer};
console.log(employee);
Если запустить этот скрипт, то в результате мы получим:
{
name: "Дормидонт Платонович",
age: 27,
title: "Fullstack web-developer",
location: "Удаленно"
}
Что тут произошло? Мы создали 2 объекта: «worker» и «ofer», а потом их объединили в одном «employee», который просто «собрал» свойства от двух исходных объектов. При объединении объектов может так случиться, что они будут обладать одинаковыми свойствами, но с разными значениями. Смотрите, что произойдет тогда на примере:
const worker = {
name: "Дормидонт Платонович",
age: 27,
location: "Удаленно"
}
const ofer = {
title: "Fullstack web-developer",
location: "Офис в Москве"
}
const employee = {...worker, ...ofer};
console.log(employee);
Если запустить такой скрипт, то в результате получим следующее:
{
name: "Дормидонт Платонович",
age: 27,
title: "Fullstack web-developer",
location: "Офис в Москве"
}
Как видим, у обоих объектов есть одинаковое свойство «location», но с разными свойствами: у одного объекта «Удаленно», а у другого «Офис в Москве». В результате у объединенного объекта в этом свойстве мы получили «Офис в Москве», потому что по правилам оператора распространения при одинаковых свойствах объединяемых объектов, свойство последнего объекта «перезаписывает» свойство предыдущего. Это правило работает даже в тех случаях, когда вы хотите объединить больше двух JS-объектов.
Как объединить JS-объекты, применив специальный метод
Объединение объектов в JavaScript может происходить при помощи специальной функции «Object.assign()». Данный инструмент может объединять два и больше объектов. Он имеет довольно простой шаблон использования:
Object.assign(<тут перечисляем объекты для объединения>);
Точно так же, как и в предыдущем способе, этот метод не видоизменяет оригинальные объекты, а только копирует все их свойства в новосозданном объекте. Если в исходниках попадаются обобщенные свойства, но с разными значениями, тогда значение последнего объекта «перекрывает» значение предыдущего.
Давайте рассмотрим пример:
const worker = {
name: "Дормидонт Платонович",
age: 27,
location: "Офис во Владивостоке"
}
const ofer = {
title: "Fullstack web-developer",
location: "Офис в Москве"
}
const employee = Object.assign(worker, ofer);
console.log(employee);
Если запустить этот скрипт, тогда в результате получим следующие значения:
{
name: "Дормидонт Платонович",
age: 27,
title: "Fullstack web-developer",
location: "Офис в Москве"
}
Нужно отметить, что этот метод не делает «глубокое» объединение объектов. То есть он способен точно объединить несколько JS-объектов, при условии, что в их свойствах будут располагаться примитивные значения. Если же в свойствах исходного объекта будет располагаться другой объект, тогда объединение произойдет не так, как вы можете себе представить, потому что такое значение будет передано по ссылке на исходный объект.
Еще раз отметим, что оба способа, описанных выше, в результате своей работы создают абсолютно новый объект, который копирует свойства исходных объектов.
Заключение
В JS объединить объекты довольно просто: для этого воспользуйтесь одним из способов, описанным выше. Оба способа — это инструменты, встроенные в JavaScript, но они рассчитаны для объединения объектов с простыми свойствами. Если внутри объекта в свойствах находится другой объект, тогда нужно делать «глубокое» объединение, но для этого придется воспользоваться сторонними библиотеками.
JavaScript
