0Pricing
JavaScript Academy · Урок

structuredClone для глубокого копирования

Безопасно клонируйте сложные объекты.

«structuredClone для глубокого копирования» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

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

Оператор расширения и Object.assign создают поверхностные копии: вложенные объекты используют общие ссылки. Чтобы полностью скопировать вложенную структуру, нужна глубокая копия.

structuredClone — встроенное решение.

Почему оператора расширения недостаточно

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

const original = { user: { name: 'Ada' } };
const shallow = { ...original };

shallow.user.name = 'Grace';
console.log(original.user.name);

structuredClone спешит на помощь

structuredClone рекурсивно копирует всю структуру. Изменения в clone никогда не затрагивают исходный объект.

const original = { user: { name: 'Ada' } };
const deep = structuredClone(original);

deep.user.name = 'Grace';
console.log(original.user.name);
console.log(deep.user.name);

Независимые вложенные объекты

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

const original = { a: { b: { c: 1 } } };
const clone = structuredClone(original);

console.log(original === clone);
console.log(original.a === clone.a);
console.log(original.a.b === clone.a.b);

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

Массивы, в том числе вложенные, тоже копируются глубоко. Добавление элемента во вложенный массив clone не изменяет исходный массив.

const original = { tags: ['a', 'b'], meta: { nested: [1] } };
const clone = structuredClone(original);

clone.meta.nested.push(2);
console.log(original.meta.nested);
console.log(clone.meta.nested);

Поддержка Map и Set

В отличие от JSON.parse(JSON.stringify(...)), structuredClone поддерживает многие встроенные типы, включая Map, Set и Date.

const original = { items: new Set([1, 2, 3]), when: new Date(0) };
const clone = structuredClone(original);

clone.items.add(4);
console.log([...original.items]);
console.log([...clone.items]);
console.log(clone.when instanceof Date);

Поддержка циклических ссылок

Объект, ссылающийся на самого себя, нарушает работу приёма с JSON, но без проблем копируется с помощью structuredClone.

const node = { name: 'root' };
node.self = node;

const clone = structuredClone(node);
console.log(clone.name);
console.log(clone.self === clone);

Что нельзя скопировать

structuredClone не может копировать функции или узлы DOM; он выдаёт ошибку DataCloneError. Кроме того, он удаляет цепочки прототипов, возвращая обычные объекты.

try {
  structuredClone({ fn: () => 1 });
} catch (e) {
  console.log(e.name);
}

Прототипы не сохраняются

Экземпляр класса после копирования становится обычным объектом: данные копируются, но методы и прототип теряются.

class Point {
  constructor(x) { this.x = x; }
  show() { return this.x; }
}
const p = new Point(5);
const clone = structuredClone(p);

console.log(clone.x);
console.log(clone instanceof Point);

structuredClone и приём с JSON

Старый приём JSON.parse(JSON.stringify(x)) теряет undefined, даты превращаются в строки, а циклические ссылки вызывают ошибку. structuredClone устраняет эти проблемы для сериализуемых данных.

const data = { when: new Date(0), missing: undefined, n: 5 };
const viaJson = JSON.parse(JSON.stringify(data));
const viaClone = structuredClone(data);

console.log(typeof viaJson.when);
console.log(viaClone.when instanceof Date);

Почему это важно

structuredClone предоставляет надёжное встроенное глубокое копирование обычных данных и заменяет хрупкие самописные копии. Используйте его, когда нужна полностью независимая копия вложенного state, и помните, что он удаляет функции и прототипы.

const state = { list: [{ id: 1 }], settings: { theme: 'dark' } };
const snapshot = structuredClone(state);
snapshot.list[0].id = 99;
console.log(state.list[0].id);
console.log(snapshot.list[0].id);

Быстрая проверка

Зачем использовать structuredClone вместо оператора расширения для вложенных данных?

Итоги: structuredClone

Вы научились надёжно копировать данные на большую глубину:

  • Оператор расширения копирует поверхностно, а structuredClone — глубоко.
  • Он поддерживает Map, Set, Date и циклические ссылки.
  • Он не может копировать функции или узлы DOM и удаляет прототипы.
  • Это более безопасная замена приёму с JSON.parse(JSON.stringify()).

Часто задаваемые вопросы

Урок «structuredClone для глубокого копирования» бесплатный?

Да — полный текст урока «structuredClone для глубокого копирования» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «structuredClone для глубокого копирования»?

Безопасно клонируйте сложные объекты. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «structuredClone для глубокого копирования»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Object.freeze и seal
  2. Поверхностная и глубокая заморозка
  3. Шаблоны неизменяемого обновления
  4. structuredClone для глубокого копирования
← Назад к JavaScript Academy