Копирование объектов

Поверхностная копия (shallow copy) vs глубокая копия (deep copy)

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

Примеры поверхностной копии

// Поверхностная копия с использованием Object.assign
let исходныйОбъект = { имя: 'Джон', возраст: 30 };
let поверхностнаяКопия = Object.assign({}, исходныйОбъект);

поверхностнаяКопия.возраст = 31;
console.log(исходныйОбъект.возраст); // Вывод: 30

В этом примере Object.assign создает поверхностную копию исходногоОбъекта. Однако изменение вложенного объекта внутри исходногоОбъекта повлияет на поверхностную копию.

// Поверхностная копия с использованием оператора расширения
let поверхностнаяКопия2 = { ...исходныйОбъект };

поверхностнаяКопия2.возраст = 32;
console.log(исходныйОбъект.возраст); // Вывод: 30

Оператор расширения (...) также может использоваться для поверхностной копии, проявляя схожее поведение с Object.assign.

Примеры глубокой копии

​Глубокое копирование часто требует более сложных решений, таких как использование внешних библиотек, например Lodash, или реализация собственных рекурсивных функций. Вот пример с использованием Lodash:

// Глубокая копия с использованием Lodash
const _ = require('lodash');

let глубокаяКопия = _.cloneDeep(исходныйОбъект);

глубокаяКопия.возраст = 33;
console.log(исходныйОбъект.возраст); // Вывод: 30

Функция cloneDeep из Lodash создает глубокую копию оригинального объекта, гарантируя, что изменения в копии не влияют на оригинал.

Ссылки на объекты

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

let объект1 = { свойство: 'значение' };
let объект2 = объект1;

объект2.свойство = 'новое значение';
console.log(объект1.свойство); // Вывод: новое значение

В этом примере изменение объекта2 также влияет на объект1, потому что обе переменные ссылаются на один и тот же объект в памяти.

Копирование массивов

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

// Поверхностная копия массива с использованием slice
let исходныйМассив = [1, 2, [3, 4]];
let поверхностнаяКопияМассива = исходныйМассив.slice();

поверхностнаяКопияМассива[2][0] = 99;
console.log(исходныйМассив[2][0]); // Вывод: 99

Даже с массивами поверхностная копия с использованием slice создает новый массив, но сохраняет ссылки на вложенные массивы.

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