Клонирование массива объектов в JavaScript

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

Javascript Objects и Arrays являются изменяемыми, что означает, что их состояние может быть изменено после его создания. Objects и arrays сравниваются по ссылкам, а не по значениям, в отличие от типов string и number. Если они не обрабатываются тщательно и состояние не поддерживается должным образом, существует большая вероятность того, что вы сильно испортите свое приложение.

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

Здесь мы поговорим о нескольких методах правильного клонирования объектов/массивов и о лучшем способе копирования файла Array of Objects.

Клонирование объекта

Способ ES6:

const originalObj = { name: 'cloning' }; 
const clonedObj = Object.assign({}, obj);
originalObj === clonedObj //false

Или вы можете просто использовать оператор spread

const originalObj = { name: 'cloning' }; 
const clonedObj = {...obj};
originalObj === clonedObj //false

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

Способ ES5:

const originalArr = ['a', 'b', 'c'];
const clonedArr = originalArr.slice(0); // slice with index is FASTER
originalArr === clonedArr // false

Способ ES6:

const originalArr = ['a', 'b', 'c'];
const clonedArr = [...originalArr];
originalArr === clonedArr // false

Клонирование с использованием объекта JSON

const originalArr = ['a', 'b', 'c'];
const clonedArr = JSON.parse(JSON.stringify(originalArr)); 
originalArr === clonedArr // false
const originalObj = { name: 'cloning' }; 
const clonedObj = JSON.parse(JSON.stringify(originalObj));
originalObj === clonedObj //false

Однако клонирование с использованием JSON методов — достаточно затратная операция.

Клонировать массив объектов просто и легко, но большую часть времени мы забываем тот факт, что клонирование только массива (который содержит объекты) не приводит к глубокому клонированию, и объекты в новом массиве по-прежнему ссылаются на те же старые объекты.

Пример:

const arrayObj = [{name: 'clone'}, {name: 'array'}, {name: 'object'}];
const copy = [...arrayObj];
copy === arrayObj // false
copy[0] === arrayObj[0] //true

Есть несколько способов сделать это, но большинство из них неэффективны и могут полностью испортить ваше приложение. Самый простой и часто используемый среди разработчиков метод — использование методов JSON, который, по-видимому, является самым медленным методом из всех. Я протестировал несколько часто используемых методов для клонирования и копирования массивов и объектов, и ниже приведены результаты с размером выборки массива с 10000 объектами из 1 пары ключ-значение в каждом.

Может быть много других способов выполнить точную операцию, но во всех тестах, которые я тестировал, я обнаружил, что Map with Spread Operator показал лучшую производительность, чем другие способы.

Надеюсь, это полезно. Если у вас остались вопросы к концу этого поста, дайте мне знать, чтобы я мог улучшить эту статью.