Содержание

• Введение
• Понимание и использование структурированного клона
• Заключение

Введение

Вы когда-нибудь пытались скопировать объект в Javascript с помощью оператора распространения (...) только для того, чтобы понять, что изменения в оригинале по-прежнему влияют на копию? Это может быть неприятно, когда вы ожидаете, что копия не будет зависеть от оригинала, а в итоге окажется, что она связана с оригиналом. Это распространенная проблема при работе с глубинными объектами, которая может привести к неожиданным ошибкам. К счастью, в Javascript есть метод StructuredClone() для решения этой проблемы

Понимание и использование структурированного Clone()

Начнем с того, что метод StructuredClone() в Javascript используется для создания глубоких копий объектов, в том числе объектов с вложенными структурами, такими как массивы, объекты и другие сложные типы данных.

Вам может быть интересно: что такое копия и сколько типов копирования существует в JavaScript? Что ж, у нас есть поверхностные и глубокие копии. Хотя мы знаем, что StructuredClone() создает последнее, использование оператора spread создает первое.

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

Давайте посмотрим несколько примеров мелкой и глубокой копии в JavaScript

Пример поверхностного копирования

const person = {
    name: "John Doe", 
    languages: [
       "English", 
       "German"
    ]
};

const personClone = {...person}; // shallow copy

// Modify the languages array in the cloned object
personClone.languages.push("Spanish");

// Check the original and the cloned object
console.log(person.languages);  // Output: ["English", "German", "Spanish"]
console.log(personClone.languages);  // Output: ["English", "German", "Spanish"]
console.log(person.languages === personClone.languages) // true

// However, changing a primitive value won't affect the original
personClone.name = "Jane Doe";

console.log(person.name);  // Output: "John Doe"
console.log(personClone.name);  // Output: "Jane Doe"
console.log(person.name === personClone.name) // false

Из приведенного выше кода можно сказать следующее:

• Свойство name является примитивным значением, поэтому его изменение в поверхностной копии (personClone.name = "Jane Doe";) не влияет на исходное значение (person.name)
• Массив languages не является примитивным, поэтому и оригинал(person), и клон(personClone) имеют одну и ту же ссылку. Изменение массива personClone влияет на исходный массив person

Пример глубокого копирования

const person = {
    name: "John Doe", 
    languages: [
       "English", 
       "German"
    ]
};

// Create a deep copy using structuredClone
const deepClonedPerson = structuredClone(person);

// Modify the deep cloned object
deepClonedPerson.languages.push("Spanish");

// Check if the original and the deep clone are equal
console.log(person === deepClonedPerson);  // Output: false
console.log(person.languages) // ['English', 'German']
console.log(deepClonedPerson.languages) // ['English', 'German', 'Spanish']
console.log(person.languages === deepClonedPerson.languages);  // Output: false

// Check if the properties are equal
console.log(person.name === deepClonedPerson.name);  // Output: false

// Changes in the deep cloned object don't affect the original
deepClonedPerson.name = "Jane Doe";

console.log(person.name);  // Output: "John Doe"
console.log(deepClonedPerson.name);  // Output: "Jane Doe"

Из приведенного выше кода можно сделать следующий вывод:

• person === deepClonedPerson подтверждает, что StructuredClone() создает новый независимый объект.
• person.languages ​​=== deepClonedPerson.languages ​​показывает, что вложенный массив также копируется независимо.
• Проверка person.name === deepClonedPerson.name позволяет убедиться, что изменения в глубоком клоне не влияют на исходный объект.
• Значения языков показывают, что изменения в глубоком клоне (deepClonedPerson) не отражаются в оригинале (person)

Заключение

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

Спасибо, что прочитали эту статью. Если эта статья оказалась для вас полезной, поставьте лайк и поделитесь ею с другими, кому будет полезно узнать о глубоком копировании в Javascript

Что вы думаете по этому поводу? Сталкивались ли вы с другими методами копирования объектов в Javascript? Не стесняйтесь поделиться своими мыслями в разделе комментариев ниже.

P.S. В настоящее время я ищу вакансии фронтенд-разработчика. Если у вас есть потенциальные клиенты или вы ищете сотрудника, не стесняйтесь просмотреть мое резюме или связаться со мной в LinkedIn. Мне бы хотелось услышать ваше мнение!