Как объединить объекты
Короткий ответ
Оператор расширения ... копирует свойства нескольких объектов в новый:
const name = { name: 'Anna' };
const contact = { email: 'anna@example.com' };
console.log({ ...name, ...contact });Результат:
{
"name": "Anna",
"email": "anna@example.com"
}Значения по умолчанию и настройки
Если ключ повторяется, побеждает значение из объекта правее. Это удобно для настроек по умолчанию:
const defaults = { theme: 'light', fontSize: 14, sound: true };
const userSettings = { theme: 'dark' };
const settings = { ...defaults, ...userSettings };
console.log(JSON.stringify(settings));Результат:
{"theme":"dark","fontSize":14,"sound":true}Object.assign
Object.assign() копирует свойства в первый аргумент и изменяет его:
const target = { a: 1 };
Object.assign(target, { b: 2 }, { c: 3 });
console.log(JSON.stringify(target));Результат:
{"a":1,"b":2,"c":3}Вложенные объекты
Оператор расширения не объединяет вложенные объекты, а заменяет их. Объединяйте вложенный уровень отдельно:
const defaults = { colors: { text: 'black', background: 'white' } };
const custom = { colors: { text: 'navy' } };
const replaced = { ...defaults, ...custom };
const merged = { ...defaults, colors: { ...defaults.colors, ...custom.colors } };
console.log(JSON.stringify(replaced.colors));
console.log(JSON.stringify(merged.colors));Результат:
{"text":"navy"}
{"text":"navy","background":"white"}Частая ошибка
Если поставить значения по умолчанию справа, они затрут значения пользователя:
const defaults = { theme: 'light' };
const userSettings = { theme: 'dark' };
console.log({ ...userSettings, ...defaults }.theme);Результат:
lightФункции из этого ответа
- Object.assign — Копирует свойства из одних объектов в другой.
- structuredClone — Создаёт глубокую копию объекта со всеми вложенными данными.