Що робить structuredClone()?

JavaScriptJunior~1 хв читання

Що робить structuredClone()

structuredClone() - це вбудована функція в JavaScript, яка створює глибоку копію (deep clone) будь-якого значення, включно з об'єктами, масивами, картами, сетами, датами, RegExp, Blob, File, ArrayBuffer і навіть циклічними посиланнями.

Синтаксис:

javascript

const clone = structuredClone(value);

value - те, що потрібно клонувати;
повертає новий незалежний об'єкт, повністю скопійований.

Приклад простого використання

javascript

const user = {
  name: "Tim",
  age: 25,
  skills: ["JS", "React"],
  meta: { active: true },
};

const copy = structuredClone(user);

copy.meta.active = false;
console.log(user.meta.active); // true - оригінал не змінився

Тут structuredClone() створив нову копію, а не посилання на той самий об'єкт (на відміну від поверхневого копіювання через {...user}).

Головна відмінність від JSON.parse(JSON.stringify(...))

Раніше для глибокого копіювання часто використовували:

javascript

const copy = JSON.parse(JSON.stringify(obj));

Але в цього способу багато обмежень:

Тип даних	JSON метод	structuredClone
`Date`	перетворюється на рядок	зберігається як `Date`
`Map`, `Set`	губляться	копіюються
`undefined`	зникає	зберігається
`RegExp`, `Error`	губляться	зберігаються
`NaN`, `Infinity`	перетворюються на `null`	зберігаються
Циклічні посилання	помилка	підтримуються

Тобто structuredClone() - надійний і безпечний аналог deep clone, що підтримує всі типи.

Приклад з циклічними посиланнями

javascript

const obj = {};
obj.self = obj; // циклічне посилання

const clone = structuredClone(obj);
console.log(clone.self === clone); // true

Раніше таке клонування просто викликало б помилку TypeError.

Клонування з передачею бінарних даних (опційно)

У structuredClone є другий аргумент - опції, які дозволяють передати (а не скопіювати) деякі об'єкти (наприклад, ArrayBuffer).

javascript

const buffer = new ArrayBuffer(8);
const clone = structuredClone(buffer, { transfer: [buffer] });

console.log(buffer.byteLength); // 0 - оригінал "переданий" (відключений)
console.log(clone.byteLength);  // 8 - дані тепер у клона

Це працює схоже на Transferable об'єкти у postMessage.

Де працює

Підтримується в усіх сучасних браузерах і в Node.js (починаючи з v17+):

javascript

structuredClone({ test: true }); // працює в Node 17+

Підсумок

Пункт	Опис
Що робить	Глибоко клонує значення будь-якого типу
Повертає	Повну незалежну копію
Підтримує	`Date`, `Map`, `Set`, `RegExp`, `ArrayBuffer`, циклічні посилання
Не підтримує	Функції, DOM-елементи
Сумісність	Сучасні браузери і Node.js 17+
Аналог	Безпечна альтернатива `JSON.parse(JSON.stringify())`

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.