Как клонировать свойства объекта в другой: JS без фреймворков

Быстрый ответ

Чтобы быстро скопировать свойства объекта, вы можете воспользоваться оператором расширения (...):

const original = { a: 1, b: 2 };
let duplicate = { ...original };

Альтернативой будет использование функции Object.assign() для создания клона:

let duplicate = Object.assign({}, original);

Оба способа позволяют получить новый объект с такими же свойствами, как у исходного original.

Различие между поверхностным и глубоким копированием

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

Чтобы создать поверхностную копию, используйте следующий подход:

const shallowDuplicate = { ...original };

Для реализации глубокого копирования можно применить сочетание JSON.stringify() и JSON.parse():

const deepDuplicate = JSON.parse(JSON.stringify(original));

Примечание: Этот способ не позволяет копировать объекты с циклическими ссылками, функции и некоторые специальные объекты, такие как Date, RegExp, Map и Set.

Копируйте лишь собственные свойства объекта

При использовании цикла for...in для копирования свойств объекта следует применять .hasOwnProperty, чтобы исключить копирование унаследованных свойств:

for (const key in original) {
  if (original.hasOwnProperty(key)) {
    duplicate[key] = original[key];
  }
}

Работа со старыми и современными браузерами

Если вам приходится работать с современными браузерами, то возможности ES6, такие как Object.assign() и оператор расширения, идеально подойдут для копирования объектов:

// Способ для новых браузеров с оператором расширения
const newDuplicate = { ...original };

// Или использование Object.assign для копирования
const newDuplicate2 = Object.assign({}, original);

Для поддержки устаревших браузеров вам могут понадобиться полифилы или транспилятор в духе Babel, чтобы задействовать функциональность ES6. В противном случае, следует использовать механизмы ES5 для лучшей совместимости.

Создайте собственные функции клонирования для уникальных ситуаций

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

function customClone(object) {
  // Вставьте здесь ваш уникальный код
}

Не забывайте тщательно тестировать свою реализацию, чтобы обеспечить корректность работы клонирования в вашем приложении.

Проверьте совместимость браузера перед использованием

Перед применением новейших возможностей JavaScript проверьте их совместимость с браузерами. Вам могут помочь таблицы совместимости, например, compat-table Kangax.

Визуализация

Представьте каждый объект как дом:

Исходный дом (🏠): { зал: "диван", кухня: "холодильник" }
Новый дом (🏡): { веранда: "гриль" }

Копирование свойств объектов напоминает перестановку мебели из Исходного дома в Новый дом:

🏠 ➡️ 🏡

После копирования Новый дом сохранит всё свое и приобретет предметы из Исходного дома:

🏡: { зал: "диван", кухня: "холодильник", веранда: "гриль" }

Использование нативных методов вместо фреймворков

Прежде чем использовать сторонние библиотеки или фреймворки, рассмотрите применение встроенных методов JavaScript. Современный язык предлагает мощные инструменты и удобный синтаксис для решения различных задач.

• Поверхностное копирование: Object.assign() или оператор расширения {...object}.
• Глубокое копирование: написание собственной функции или использование комбинации JSON.stringify и JSON.parse().
• Перебор свойств: Object.keys(), Object.values() или Object.entries() в сочетании с такими методами массивов, как forEach() и map().

Преимущества использования нативных методов:

• Снижение зависимостей, что упрощает поддержку и сокращает издержки.
• Большая производительность, так как нативные операции обычно эффективнее аналогов из библиотек.
• Простота отладки, благодаря меньшей сложности и меньшему размеру стека вызовов.

Осознавайте потенциальные подводные камни

Будьте внимательны к общим ссылкам, которые могут привести к нежелательным побочным эффектам при создании клонов:

const original = { nested: { count: 1 } };
const shallowDuplicate = { ...original };
shallowDuplicate.nested.count = 2; 
console.log(original.nested.count); // Выведет 2, ведь изменения коснулись также и исходного объекта!

Глубокое клонирование поможет избежать создания общих ссылок:

const deepDuplicate = JSON.parse(JSON.stringify(original));
deepDuplicate.nested.count = 3;
console.log(original.nested.count); // Выведет 1, так как вложенный объект теперь полностью скопирован и недоступен для изменения

Полезные материалы

1. Object.assign() – JavaScript | MDN
2. Оператор расширения (...) – JavaScript | MDN
3. 3 способа клонирования объектов в JavaScript | SamanthaMing.com
4. Immutable.js
5. Документация Lodash
6. JSON.parse() – JavaScript | MDN
7. GitHub – tc39/proposal-object-rest-spread