Як клонувати (копіювати) об’єкт і масив у JavaScript

Клонування масиву

1. Використання оператору spread (...):

const originalArray = [1, 2, 3];
const clonedArray = [...originalArray];
console.log(clonedArray); // Output: [1, 2, 3]

2. Використання Array.prototype.slice():

const originalArray = [1, 2, 3];
const clonedArray = originalArray.slice();
console.log(clonedArray); // Output: [1, 2, 3]

3. Використання Array.from():

const originalArray = [1, 2, 3];
const clonedArray = Array.from(originalArray);
console.log(clonedArray); // Output: [1, 2, 3]

4. Використання structuredClone() (глибоке клонування):

const originalArray = [1, { key: "value" }];
const clonedArray = structuredClone(originalArray);
console.log(clonedArray); // Output: [1, { key: "value" }]

Клонування об’єкта

1. Використання оператору spread (...):

const originalObject = { a: 1, b: 2 };
const clonedObject = { ...originalObject };
console.log(clonedObject); // Output: { a: 1, b: 2 }

2. Використання Object.assign():

const originalObject = { a: 1, b: 2 };
const clonedObject = Object.assign({}, originalObject);
console.log(clonedObject); // Output: { a: 1, b: 2 }

3. Використання structuredClone() (глибоке клонування):

const originalObject = { a: 1, b: { c: 2 } };
const clonedObject = structuredClone(originalObject);
console.log(clonedObject); // Output: { a: 1, b: { c: 2 } }

4. Використання JSON.parse() та JSON.stringify() (глибоке клонування):

const originalObject = { a: 1, b: { c: 2 } };
const clonedObject = JSON.parse(JSON.stringify(originalObject));
console.log(clonedObject); // Output: { a: 1, b: { c: 2 } }

Цей метод не підтримує функції, undefined, Symbol або циклічні посилання.

Глибоке клонування проти поверхневого клонування

• Поверхнев клонування (наприклад, за допомогою ..., slice() або Object.assign()):
  Клонує лише перший рівень об’єкта або масиву. Вкладені об’єкти або масиви залишаються посиланнями на оригінал.
• Глибоке клонування (наприклад, structuredClone() або JSON.parse(JSON.stringify())):
  Клонує всю структуру, включаючи вкладені об’єкти чи масиви.

Коли використовувати кожен метод

• Використовуйте поверхневе клонування для простих структур.
• Використовуйте глибоке клонування, якщо об’єкт або масив містить вкладені структури, і вам потрібно уникати посилань на вихідні дані.

Використання сторонніх бібліотек

У проектах я часто використовую Lodash або jQuery. Обидві ці бібліотеки мають методи глибокого клонування. Під час використання Lodash або jQuery для виконання глибокого клонування обидві бібліотеки обробляють функції по-іншому, ніж такі нативні методи, як JSON.parse(JSON.stringify()) або structuredClone().

Глибоке клонування за допомогою Lodash

Використання Lodash _.cloneDeep():

• Lodash виконує глибоке клонування об’єкта або масиву, включаючи вкладені структури.
• Функції (методи) в об’єкті чи масиві копіюються за посиланням. Це означає, що функція в клонованому об’єкті чи масиві вказуватиме на те саме посилання на пам’ять, що й оригінал.

const _ = require('lodash');

const originalObject = {
    value: 42,
    method: function () {
        return this.value;
    }
};

const clonedObject = _.cloneDeep(originalObject);

console.log(clonedObject.method()); // Output: 42
console.log(clonedObject.method === originalObject.method); // Output: true (same reference)

Lodash не видаляє функції, на відміну від JSON.parse(JSON.stringify()), але він не створює нову копію функції. Він зберігає посилання на оригінал.

Глибоке клонування за допомогою jQuery

Використання $.extend() jQuery:

• $.extend() jQuery використовується для клонування об’єктів. Щоб отримати глибокий клон, ви передаєте true як перший аргумент.
• Як і Lodash, jQuery копіює функції за посиланням.

const originalObject = {
    value: 42,
    method: function () {
        return this.value;
    }
};

const clonedObject = $.extend(true, {}, originalObject);

console.log(clonedObject.method()); // Output: 42
console.log(clonedObject.method === originalObject.method); // Output: true (same reference)

Обмеження $.extend():

• Механізм клонування jQuery простіший і менш надійний порівняно з Lodash.
• Він не обробляє деякі складні випадки використання (наприклад, циклічні посилання) так ефективно, як Lodash.