Как объединить глубоко вложенные объекты в JavaScript
При работе в JavaScript иногда возникает потребность объединить два объекта, которые могут быть глубоко вложенными.
В этой статье мы увидим, как с этим справиться правильно.
Давайте начнем
Допустим, у нас есть такой пользовательский объект:
const user = < name: "David", phone: 122345678, location: < city: "Camden", country: "UK" >>; И мы хотим обновить этот объект новыми значениями. Например, при обновлении своего профиля пользователя пользователь вводит новые значения, поэтому нам нужно объединить предыдущий объект с новым обновленным объектом.
Если пользователь обновит только некоторые значения, у нас будет такой объект:
const updates = < name: "David", phone: 123456789, location: < city: "Smithfield" >>; Как вы можете видеть, объект пользователя имеет свойство location с свойствами city и country внутри него. Но в объекте обновлений у нас нет свойства страны, так как мы можем объединить эти объекты?
Попробуем известными способами.
Использование Object.assign
const user = < name: 'David', phone: 122345678, location: < city: 'Camden', country: 'UK' >>; const updates = < name: 'David', phone: 123456789, location: < city: 'Smithfield' >>; console.log(Object.assign(<>, user, updates)); /* output: < name: 'David', phone: 123456789, location: < city: 'Smithfield' >> */ Как видите, свойство location из объекта обновления полностью заменило предыдущий объект location , поэтому свойство country потеряно.
Это потому, что Object.assign выполняет неглубокое слияние. Неглубокое слияние означает, что оно объединит свойства только на первом уровне, а не на вложенном уровне.
Использование оператора распростронения
const user = < name: 'David', phone: 122345678, location: < city: 'Camden', country: 'UK' >>; const updates = < name: 'David', phone: 123456789, location: < city: 'Smithfield' >>; console.log(< . user, . updates >); /* output: < name: 'David', phone: 123456789, location: < city: 'Smithfield' >> */ Как видите, это также дает тот же результат, потому что Object.assign и оператор распространения просто неглубоко объединяют объекты.
Итак, чтобы исправить это и правильно объединить два глубоко вложенных объекта, мы можем использовать метод merge , предоставляемый очень популярной библиотекой lodash.
Использование Lodash merge
const user = < name: "David", phone: 122345678, location: < city: "Camden", country: "UK" >>; const updates = < name: "David", phone: 123456789, location: < city: "Smithfield" >>; console.log(_.merge(user, updates)); /* output: < name: 'David', phone: 123456789, location: < country: 'UK', city: 'Smithfield' >> */ Теперь все работает, как ожидалось, и country не теряется при слиянии.
Lodash — лучшая библиотека, которая имеет множество функций для реальных приложений.
JavaScript объединить 2 объекта
Или еще вот таким образом можно «объединить тела» двух таких методов.
const a1 = < a: "50", b: "51", c: () =>, d: () => , e: () => >; const a2 = < a: "5", b: "6", c: () =>, d: () => >; const a3 = merge(a1, a2) //console.log(a3) console.log(a3.a) console.log(a3.b) a3.c() a3.d() a3.e() // function merge(a1, a2) < const re = /^[^<]+\<|\>$/g const o = Object.keys(a2).reduce((o, k) => < if (typeof a2[k] == 'function') < const a = [] if (a1[k]) a.push(a1[k].toString().replace(re, '')) a.push(a2[k].toString().replace(re, '')) o[k] = new Function(a.join(', ')) >else < o[k] = a2[k] >return o >, <>) Object.keys(a1).reduce((o, k) => a2[k] ? o : ( o[k] = new Function(a1[k].toString().replace(re, '')), o ), o) return o >
Но все это сделано только в рамках приведенных ТСом объектов. Не более того.
Как склеить 2 массива на js
Есть ещё вариант склеить 2 массива — воспользоваться оператором spread:
Выглядит это следующим образом:
const result = [. array1, . array2]; Порядок, в котором вы перечисляете массивы при помощи оператора spread, имеет значение!
Элементы массива вставляются в том порядке в котором идут переменные этих массивов.
Обратимся к примеру:
const animals1 = ['cat', 'dog']; const animals2 = ['hamster', 'parrot']; const allAnimals = [. animals1, . animals2]; console.log(allAnimals); // => ['cat', 'dog', 'hamster', 'parrot'] Для справки: spread оператор позволяет объединять 2 и более массивов.
27 октября 2021
Самый простой вариант это использовать метод concat() . Он добавляет к массиву на котором был вызван массив, переданный в качестве аргумента.
const collection1 = ['hexlet', 'is']; const collection2 = ['awesome']; const collection3 = collection1.concat(collection2); console.log(collection3); // => ["hexlet", "is", "awesome"] Как можно объединить свойства из нескольких объектов 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, но они рассчитаны для объединения объектов с простыми свойствами. Если внутри объекта в свойствах находится другой объект, тогда нужно делать «глубокое» объединение, но для этого придется воспользоваться сторонними библиотеками.
Мы будем очень благодарны
если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.