structuredClone

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

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

Це найсучасніший і найбезпечніший спосіб клонування даних у JS без сторонніх бібліотек.

Коротко

javascript

const clone = structuredClone(value);

Вона створює повністю незалежну копію об'єкта, включно з усіма вкладеними структурами, і повертає новий об'єкт без спільних посилань з оригіналом.

Приклад

javascript

const user = {
  name: 'Тим',
  address: { city: 'Berlin' },
  hobbies: ['sport', 'music']
};

const clone = structuredClone(user);

clone.address.city = 'Lviv';
clone.hobbies.push('coding');

console.log(user.address.city); // "Berlin"
console.log(user.hobbies);      // ['sport', 'music']

Копія глибока - усі вкладені об'єкти і масиви створюються заново. Оригінал залишається незмінним.

Що вміє копіювати `structuredClone`

Підтримує:

об'єкти ({}), масиви ([])
вкладені структури будь-якої глибини
Date
Map, Set
Blob, File, ArrayBuffer, TypedArray
RegExp (зберігає шаблон і прапорці)
навіть циклічні посилання (на відміну від JSON.stringify())

Приклад з Map і Date

javascript

const data = {
  date: new Date(),
  map: new Map([['a', 1], ['b', 2]])
};

const copy = structuredClone(data);

console.log(copy.date === data.date); // false (новий об'єкт)
console.log(copy.map.get('a'));       // 1

Приклад з циклічним посиланням (працює!)

javascript

const obj = {};
obj.self = obj;

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

structuredClone() справляється навіть із самопосиланнями, де JSON.parse(JSON.stringify()) просто впаде з помилкою.

Що не копіюється

Не підтримує:

функції
DOM-елементи
класи / прототипи
Symbol
undefined як ключ

javascript

const obj = {
  fn: () => {},
  el: document.body
};

structuredClone(obj);
// Помилка: function or DOM node cannot be cloned

Порівняння з іншими способами

Метод	Тип копії	Копіює вкладені дані	Копіює функції	Копіює Date / Map / Set
`{ ...obj }`	поверхнева	Ні	Так	Ні
`Object.assign()`	поверхнева	Ні	Так	Ні
`JSON.parse(JSON.stringify())`	глибока	Так	Ні	Ні
`structuredClone()`	глибока	Так	Ні	Так
`_.cloneDeep()` (Lodash)	глибока	Так	Ні	Так

Підтримка

Працює:

у всіх сучасних браузерах (Chrome 98+, Firefox 94+, Edge 98+, Safari 15.4+)
у Node.js 17+
у Deno

Для старих середовищ можна підключити поліфіл, наприклад:

javascript

npm install core-js

ПІДСУМОК

Властивість	`structuredClone()`
Тип копії	Глибока
Змінює оригінал	Ні
Копіює об'єкти, масиви, Map, Set, Date	Так
Працює з циклічними посиланнями	Так
Копіює функції / DOM-елементи	Ні
Безпечний і вбудований	Так

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

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

Premium

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