• Что такое StructuredClone()?

  • StructuredClone() — это глобальная функция, представленная в 2022 году, которая обеспечивает глубокое клонирование объектов JavaScript. В отличие от традиционных методов, таких как JSON.stringify() и JSON.parse(), которые борются со сложными структурами и циклическими ссылками, StructuredClone() легко справляется с этими проблемами.

• Почему это меняет правила игры?

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

1. Простое клонирование объектов: основы

• Использование {...obj} (мелкая копия)

  const original = { name: "Alice", details: { age: 25 } };
  const shallowCopy = { ...original };

  shallowCopy.details.age = 30;

  console.log(original.details.age); // 30
  console.log(shallowCopy.details.age); // 30

• Что происходит?

  • Оператор распространения {...obj} создает только неполную копию. Объект сведений не подвергается глубокому клонированию, поэтому изменения в smallCopy.details также влияют на исходные сведения.
  • Использование JSON.stringify() JSON.parse() (глубокое копирование)

  const original = { name: "Alice", details: { age: 25 } };
  const deepCopy = JSON.parse(JSON.stringify(original));

  deepCopy.details.age = 30;

  console.log(original.details.age); // 25
  console.log(deepCopy.details.age); // 30

• Что происходит?

  • Этот метод создает глубокую копию, но у него есть ограничения: он не может обрабатывать функции, неопределенные или циклические ссылки.
  • Использование структурированного клонирования() (глубокое копирование)

  const original = { name: "Alice", details: { age: 25 } };
  const clone = structuredClone(original);

  clone.details.age = 30;

  console.log(original.details.age); // 25
  console.log(clone.details.age); // 30

• Что происходит?
  • StructuredClone() создает глубокий клон, сохраняя структуру без каких-либо ограничений JSON.stringify() и обрабатывая сложные типы данных, такие как циклические ссылки и неопределенные.

2. Обработка циклических ссылок: задача

• Циркулярная ссылка с {...obj}

  const original = { name: "Alice" };
  original.self = original;

  // This will cause an error:
  const shallowCopy = { ...original }; // TypeError: Converting circular structure to JSON

• Что происходит?

  • {...obj} не может обрабатывать циклические ссылки, что приводит к ошибке.
  • Циркулярная ссылка с помощью JSON.stringify()

  const original = { name: "Alice" };
  original.self = original;

  // This will cause an error:
  const jsonCopy = JSON.parse(JSON.stringify(original)); // TypeError: Converting circular structure to JSON

• Что происходит?

  • JSON.stringify() также терпит неудачу с циклическими ссылками, выдавая ошибку.
  • Циркулярная ссылка с помощью StructuredClone()

  const original = { name: "Alice" };
  original.self = original;

  const clone = structuredClone(original);

  console.log(clone !== original); // true
  console.log(clone.self === clone); // true

• Что происходит?
  • StructuredClone() легко обрабатывает циклические ссылки, создавая правильный глубокий клон без ошибок.

3. Клонирование с помощью функций и неопределенного: еще один тест

• Использование {...obj}

  const original = { name: "Alice", greet: () => "Hello!", value: undefined };
  const shallowCopy = { ...original };

  console.log(shallowCopy.greet()); // "Hello!"
  console.log(shallowCopy.value); // undefined

• Что происходит?

  • {...obj} копирует функции и undef, как и ожидалось, но лишь поверхностно.
  • Использование JSON.stringify()

  const original = { name: "Alice", greet: () => "Hello!", value: undefined };
  const jsonCopy = JSON.parse(JSON.stringify(original));

  console.log(jsonCopy.greet); // undefined
  console.log(jsonCopy.value); // undefined

• Что происходит?

  • JSON.stringify() не может сериализовать функции или неопределенное значение, что приводит к их потере в клонированном объекте.
  • Использование структурированного клонирования()

  const original = { name: "Alice", greet: () => "Hello!", value: undefined };
  const clone = structuredClone(original);

  console.log(clone.greet); // undefined
  console.log(clone.value); // undefined

• Что происходит?
  • StructuredClone() также не клонирует функции, но сохраняет неопределенные значения, что делает его более надежным, чем JSON.stringify() для сложных объектов.

4. Скорость и эффективность: обзор производительности

• Эффективность работы с большими данными

  const largeArray = new Array(1e6).fill({ key: "value" });

  console.time("structuredClone");
  const clone = structuredClone(largeArray);
  console.timeEnd("structuredClone");

  console.time("JSON.stringify   JSON.parse");
  const jsonCopy = JSON.parse(JSON.stringify(largeArray));
  console.timeEnd("JSON.stringify   JSON.parse");

• Что происходит?
  • StructuredClone() часто работает быстрее, чем JSON.stringify() JSON.parse() для больших и сложных данных, и позволяет избежать ошибок сериализации и десериализации.

5. Заключение: почему за структурированной Clone() будущее

• Надежность: более предсказуемо обрабатывает циклические ссылки, функции и неопределенные значения.
• Эффективность: ускоряет глубокое клонирование больших наборов данных и не требует обходных решений.
• Простота: один метод управления всеми — больше не нужно выбирать между {...obj}, JSON.stringify() или пользовательскими функциями глубокого клонирования.