Привет, коллега-разработчик JavaScript! Вам когда-нибудь приходилось объединять два или более объекта в один? Что ж, вам повезло! В этой статье мы собираемся изучить концепцию поверхностного слияния объектов в JavaScript. Но не волнуйтесь, я буду вести себя максимально непринужденно и по ходу дела предоставлю вам множество примеров кода. Итак, приступим!

Метод 1: Оператор расширения (…)
Оператор расширения (…) — это удобная функция, представленная в ES6, которая позволяет нам легко объединять объекты. Он создает новый объект и копирует все свойства исходных объектов в новый. Давайте рассмотрим пример:

const obj1 = { name: 'John', age: 25 };
const obj2 = { occupation: 'Developer', hobbies: ['coding', 'gaming'] };
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj);

В этом примере у нас есть два объекта: obj1и obj2. Используя оператор распространения, мы можем объединить их в новый объект с именем mergedObj. Результат будет:

{
  name: 'John',
  age: 25,
  occupation: 'Developer',
  hobbies: ['coding', 'gaming']
}

Метод 2: Object.assign()
Другой способ выполнить поверхностное слияние — использовать метод Object.assign(). Этот метод принимает целевой объект в качестве первого аргумента и один или несколько исходных объектов в качестве последующих аргументов. Он копирует свойства исходных объектов в целевой объект. Давайте посмотрим на это в действии:

const obj1 = { name: 'John', age: 25 };
const obj2 = { occupation: 'Developer', hobbies: ['coding', 'gaming'] };
const mergedObj = Object.assign({}, obj1, obj2);
console.log(mergedObj);

В этом примере мы создаем пустой объект в качестве целевого объекта. Затем, используя Object.assign(), мы объединяем obj1и obj2в mergedObj, в результате чего получаем тот же результат, что и раньше.

Метод 3: Lodash merge()
Если вы работаете с более крупными и сложными объектами, вы можете рассмотреть возможность использования служебной библиотеки, такой как Lodash. Lodash предоставляет функцию merge(), которая выполняет поверхностное слияние объектов. Чтобы использовать его, вам необходимо сначала установить Lodash. Вот пример:

const _ = require('lodash');
const obj1 = { name: 'John', age: 25 };
const obj2 = { occupation: 'Developer', hobbies: ['coding', 'gaming'] };
const mergedObj = _.merge({}, obj1, obj2);
console.log(mergedObj);

В этом примере мы импортируем Lodash и используем функцию merge()для объединения obj1и obj2в mergedObj. Прежде чем запускать этот код, обязательно установите Lodash с помощью npm или Yarn.

И вот оно! Мы рассмотрели три различных метода выполнения поверхностного слияния объектов JavaScript. Независимо от того, решите ли вы использовать оператор расширения Object.assign()или служебную библиотеку, например Lodash, теперь у вас есть инструменты для профессионального объединения объектов. Так что давайте, попробуйте это в своем следующем проекте и удачи в написании кода!