Как скопировать объект в js

Поверхностное и глубокое копирование

При копировании объектов и массивов в JavaScript, данные копируются только на один уровень вглубь.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

Кратко
Как понять
1. Проблема поверхностного копирования
2. Как получить глубокую копию
Обновлено 25 июля 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

При копировании объектов или массивов JavaScript копирует данные только на один уровень вглубь. Этот тип копирования называется поверхностным (shallow).

Если необходимо полностью скопировать сложную структуру данных, например, массив с объектами, то нужно делать глубокое (deep) или полное копирование данных. JavaScript не содержит функций для глубокого копирования, лучший вариант сделать глубокую копию — сериализовать структуру в JSON и тут же распарсить.

Как понять

Скопировать ссылку «Как понять» Скопировано

Проблема поверхностного копирования

Скопировать ссылку «Проблема поверхностного копирования» Скопировано

Поверхностное копирование работает быстро и в большинстве случаев его достаточно. Проблемы появляются, когда приходится копировать вложенные структуры:
```
 const itemsInCart = [ < product: 'Носки', quantity: 3 >, < product: 'Штаны', quantity: 1 >, < product: 'Кепка', quantity: 1 >,] const clonedCart = [. itemsInCart] const itemsInCart = [  product: 'Носки', quantity: 3 >,  product: 'Штаны', quantity: 1 >,  product: 'Кепка', quantity: 1 >, ] const clonedCart = [. itemsInCart]      
```
Если изменять элементы этой структуры после копирования, то эти изменения будут также видны в исходной структуре:
```
 clonedCart[1].quantity = 5 console.log(clonedCart)// [// < product: 'Носки', quantity: 3 >,// < product: 'Штаны', quantity: 5 >,// < product: 'Кепка', quantity: 1 >,// ] console.log(itemsInCart)// [// < product: 'Носки', quantity: 3 >,// < product: 'Штаны', quantity: 5 >,// < product: 'Кепка', quantity: 1 >,// ] clonedCart[1].quantity = 5 console.log(clonedCart) // [ // < product: 'Носки', quantity: 3 >, // < product: 'Штаны', quantity: 5 >, // < product: 'Кепка', quantity: 1 >, // ] console.log(itemsInCart) // [ // < product: 'Носки', quantity: 3 >, // < product: 'Штаны', quantity: 5 >, // < product: 'Кепка', quantity: 1 >, // ]      
```
Непримитивные типы данных, такие как массивы и объекты, хранятся по ссылке. Так как копирование происходит только на один уровень вглубь, то при копировании массива происходит копирование ссылок на старые объекты в новый массив.

В итоге получается картина, когда разные массивы ссылаются на одни и те же объекты в памяти:
```
 console.log(itemsInCart[1] === clonedCart[1])// true console.log(itemsInCart[1] === clonedCart[1]) // true      
```
Как получить глубокую копию

Скопировать ссылку «Как получить глубокую копию» Скопировано

В JavaScript есть функция structuredClone() для глубокого копирования массивов или объектов. На странице с документацией можно проверить доступность этой функции для разных версий: например, она доступна в NodeJS, начиная с версии 17.0.0.
```
 const deep = structuredClone(itemsInCart)console.log(itemsInCart[1] === deep[1])// false const deep = structuredClone(itemsInCart) console.log(itemsInCart[1] === deep[1]) // false      
```
Существуют и другие способы сделать глубокое копирование. Можно написать функцию глубокого копирования вручную. Скорее всего ваша функция будет рекурсивной, и она будет работать только для конкретных данных — написать универсальную функцию не так-то просто.

Можно воспользоваться готовой библиотекой. Например, функцию глубокого копирования содержит популярная библиотека утилит lodash. Функция гарантировано работает в подавляющем большинстве случаев, потому что используется в десятках тысяч проектов каждый день. Исходный код библиотеки открыт, можно изучить исходный код функции глубокого копирования.
```
 import cloneDeep from 'lodash.clonedeep' const deep = cloneDeep(itemsInCart)console.log(itemsInCart[1] === deep[1])// false import cloneDeep from 'lodash.clonedeep' const deep = cloneDeep(itemsInCart) console.log(itemsInCart[1] === deep[1]) // false      
```
Ещё один способ глубокого копирования звучит достаточно глупо — нужно сериализовать копируемый объект в JSON и тут же распарсить его. В результате появится полная копия объекта:
```
 const deep = JSON.parse(JSON.stringify(itemsInCart))console.log(itemsInCart[1] === deep[1])// false const deep = JSON.parse(JSON.stringify(itemsInCart)) console.log(itemsInCart[1] === deep[1]) // false      
```
У этого метода есть ограничение — копируемые данные должны быть сериализуемы.

Вот примеры несериализуемых данных: примитив undefined, функция, symbol — при вызове JSON.stringify получаем undefined

Массивы и объекты — сериализуемы. Что будет если у них в качестве ключа или значения будут несериализуемые данные?
- для массивов: такие значения будут превращены в null;
- для объектов: такие значения будут опущены, а если symbol является ключом объекта, то он будет проигнорирован, даже при использовании функции replacer.
```
 const arr = [ undefined, function() < console.log('aaa') >, Symbol("foo"),]const copyArr = JSON.parse(JSON.stringify(arr)) console.log(copyArr)// [null, null, null] const obj =  a: undefined, method: () => <>, [Symbol("foo")]: "foo",>const copyObj = JSON.parse(JSON.stringify(obj), function(k, v)  if (typeof k === 'symbol')  return 'символ'; > return v;>) console.log(copyObj)// <> const arr = [ undefined, function()  console.log('aaa') >, Symbol("foo"), ] const copyArr = JSON.parse(JSON.stringify(arr)) console.log(copyArr) // [null, null, null] const obj =  a: undefined, method: () => >, [Symbol("foo")]: "foo", > const copyObj = JSON.parse(JSON.stringify(obj), function(k, v)  if (typeof k === 'symbol')  return 'символ'; > return v; >) console.log(copyObj) // <>      
```
как скопировать объект в js

Самый простой способ скопировать объект — это использовать оператор расширения (spread operator) или метод Object.assign() :
```
// Использование оператора расширения const obj =  a: 1, b: 2 >; const copyObj =  . obj >; // Использование метода Object.assign() const obj =  a: 1, b: 2 >; const copyObj = Object.assign(<>, obj); 
```
Однако, при копировании объектов, которые содержат вложенные объекты или массивы, будет создана только ‘поверхностная’ копия. Если вам нужно ‘глубокое’ копирование объекта, то лучше использовать библиотеки, например, lodash и метод cloneDeep

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

Всем привет, я — Кирилл, frontend разработчик компании Usetech.

Сегодня поговорим о глубоком и поверхностном клонировании объекта, посмотрим различные примеры и способы как это можно реализовать, а также разберём отличия, плюсы и минусы данного подхода, уделим внимание новому встроенному методу глубокого клонирования — structuredClone .

Глубокое клонирование:
- structuredClone(obj)
- lodash.cloneDeep(obj)
- JSON.parse(JSON.stringify(obj))
- Полифил cloneDeep(obj)
Поверхностное клонирование:
- Оператор Spread
- Object.assign()
- Object.create()
Знали ли вы, что теперь в JavaScript есть встроенный способ делать глубокие копии объекта?

Итак, мы говорим про structuredClone — это функция встроенная в среду JavaScript:
```
const person = < name: "Ivan", date: new Date(123), friends: ["John"] >// клон объекта const copiedPerson = structuredClone(person)
```
Обратите внимание, мы скопировали не только объект, но ещё и вложенный массив, и даже объект Date.

Как видите, всё работает так, как ожидалось.
```
copiedPerson.friends // ["John"] copiedPerson.date // Date: Wed Dec 31 1969 16:00:00 copiedPerson.friends === person.friends // false
```
Метод structuredClone может выполнять следующие задачи:
- Клонировать бесконечно вложенные объекты и массивы;
- Клонировать циклические ссылки;
- Клонировать различные типы JS, такие, как Date , Error , RegExp , ArrayBuffer , Blob , File , ImageData и другие;
- Передача любых передаваемых объектов.
Даже такой безумный пример сработал, как мы и хотели.
```
const obj = < set: new Set([1123, 36, 3, 4, 4]), map: new Map([[133, 2222]]), regex: /foo/, deep: < array: [ new File(someBlobData, 'test.txt') ] >, error: new Error('Error!') > obj.circular = obj // ✅ Все хорошо, клонировали весь объект. const clonedObj = structuredClone(obj)
```
Почему бы просто взять и не развернуть объект?

Тут важно понимать, какое клонирование мы хотим: глубокое или поверхностное. Если нам нужно сделать поверхностное клонирование, то есть копию, которая не копирует вложенные объекты или массивы, то тогда можно обойтись Spread оператором.
```
const obj = < title: "Builder.io Conf", >// ✅ нет проблем, нет вложенных массивов и объектов const shallowCopy =
```
Есть иной способ поверхностного клонирования:
```
const shallowCopy = Object.assign(<>, obj); const shallowCopy = Object.create(obj);
```
Рассмотрим пример, когда у нас вложенные значения — это объект.
```
const personObj = < title: "Hello world", date: new Date(123), friends: ["John"] >const shallowCopy = // �� Мы только что добавили “Bob” и к копии и оригиналу shallowCopy.friends.push("Bob") // �� Мы только что изменили время у клона и оригинала shallowCopy.date.setTime(456)
```
Как вы видите, мы не сделали полную копию данного объекта. Вложенные дата и массив всё ещё являются общей ссылкой между ними, что может вызвать у вас серьёзные проблемы, если не будете различать когда поверхностное, а когда глубокое клонирование.

А может выполнить глубокое клонирование через JSON.parse(JSON.stringify(obj)) ?

Этот трюк удивительно производительный, но имеет некоторые недостатки, которые structuredClone устраняет.

В качестве примера возьмем данный объект:
```
const person = < name: "Ivan", date: new Date(123), friends: ["John"] >// �� Выполним глубокое клонирование. const problematicPersonCopy = JSON.parse(JSON.stringify(person))
```
Если мы посмотрим на результат problematicPersonCopy , то увидим следующее:

Это немного не то, чего мы хотели: date должен быть Date объектом, а не строкой. Это произошло потому что JSON.stringify() может обрабатывать только базовые объекты, массивы, примитивы. С любыми другими типами он может повести себя не так, как бы вы хотели. Например, дату преобразует в строку, а Set преобразует в <>. JSON.stringify() полностью игнорирует некоторые вещи, такие как undefined или функции.
```
const obj = < set: new Set([1, 3, 3]), map: new Map([[1, 2]]), regex: /foo/, deep: < array: [ new File(someBlobData, 'file.txt') ] >, error: new Error('Hello!') > const veryProblematicObjCopy = JSON.parse(JSON.stringify(obj))
```
```
< "set": <>, "map": <>, "regex": <>, "deep": < "array": [ <>] >, "error": <>, >
```
Делаем вывод, что данный способ вам поможет только в том случае, если у вас базовые объекты, массивы, примитивы.

Рассмотрим следующий способ через lodash.cloneDeep.

Сегодня cloneDeep функция lodash очень распространённое решение этой проблемы.

И действительно работает, так как ожидалось:
```
import cloneDeep from 'lodash/cloneDeep' const person = < name: "Ivan", date: new Date(123), friends: ["John"] >// ✅ Все хорошо! const clonedEvent = cloneDeep(person)
```
Но здесь есть одна оговорка. Согласно расширению Import Cost, в моей IDE, которое показывает вес в килобайтах того, что импортирую, эта функция занимает всего 17.4К.

Если не придавать значения и сразу импортировать из библиотеки, то мы увидим, насколько тяжелее стал импорт. И это только для одной функции cloneDeep .

Но затаскивать целую библиотеку для глубокого клонирования в данный момент уже не нужно, когда есть structuredClone .

Полифил cloneDeep

Также мы всегда можем написать свой собственный полифил, если это крайне необходимо для глубокого клонирования.
```
const deepClone = (obj) => < if (obj === null) return null const clone = Object.assign(<>, obj) Object.keys(clone).forEach( (key) => (clone[key] = typeof obj[key] === 'object' ? deepClone(obj[key]) : obj[key]) ) if (Array.isArray(obj)) < clone.length = obj.length return Array.from(clone) >return clone > const a = < foo: 'bar', obj: < a: 1, b: 2 >> const b = deepClone(a) // a !== b = true, a.obj === b.obj = false
```
Реализация достаточно несложная, но если на ваш взгляд, я что-то упустил, можете доработать и рассказать об этом в комментариях.

Что в structuredClone нельзя клонировать?

1. Функции.

Они будут генерировать DataCloneError исключение.
```
// �� Ошибка! structuredClone( < fn: () => < >>)
```
2. DOW-узлы.

Также выдает DataCloneError исключение.
```
// �� Ошибка! structuredClone(< el: document.body >)
```
3. Дескрипторы свойств, сеттеры и геттеры. А также аналогичные функции, подобные метаданным не клонируются.

Например, с геттером клонируется результирующее значение, но не сама функция геттера.
```
structuredClone( < get foo() < return 'bar' >>)
```
4. Прототипы объектов.

Если вы планируете экземпляр myClass, клонированный объект больше не будет известен как экземпляр этого класса (но все действительные свойства этого класса будут клонированы).
```
class MyClass < foo = 'bar' myMethod() < /* . */ >> const myClass = new MyClass() const cloned = structuredClone(myClass) // Becomes: < foo: 'bar' >cloned instanceof myClass // false
```
Полный список поддерживаемых типов. Проще говоря, что не входит в список типов, то не может быть клонировано:

JS встроенные модули: Array, ArrayBuffer, Boolean, DataView, Date, Error, Map и т.д.

Типы ошибок: Error, EvalError, RangeError, ReferenceError, SyntaxError, TypeError и т.д.

Поддержка браузеров и среда выполнения.

И вот самое приятное — structuredClone поддерживается во всех основных браузерах, даже в Node.js и Deno.

Поддержка браузеров: Источник: MDN

Мы рассмотрели глубокое и поверхностное клонирование, разобрали примеры и способы, выделили преимущества и недостатки. Если я что-то упустил, можете дополнить меня в комментариях или рассказать о своём опыте и поделиться примерами.
- клонирование объектов
- глубокое клонирование
- поверхностное клонирование
- structuredClone
- javascript
- Блог компании Usetech
- JavaScript
- Программирование
Метод cloneNode

Метод cloneNode позволяет клонировать элемент и получить его точную копию. Эту копию затем можно вставить на страницу с помощью методов prepend , append , appendChild , insertBefore или insertAdjacentElement .

В параметре метод получает true либо false . Если передан true, то элемент клонируется полностью, вместе со всем атрибутами и дочерними элементами, а если false — только сам элемент (без дочерних элементов).

Синтаксис

элемент.cloneNode(true или false);

Пример

Сделаем копию блока с классом elem и вставим его в конец блока #parent :

text1

text2

let parent = document.getElementById(‘parent’); let elem = parent.querySelector(‘.elem’); let clone = elem.cloneNode(true); parent.appendChild(clone);

Результат выполнения кода:

Пример

С полученным клоном можно работать как с обычным элементом:

text1

text2

let parent = document.getElementById(‘parent’); let elem = parent.querySelector(‘.elem’); let clone = elem.cloneNode(true); clone.children[0].textContent = ‘new text1’; clone.children[1].textContent = ‘new text2’; parent.appendChild(clone);

Результат выполнения кода:

Смотрите также
- метод createElement ,
  с помощью которого можно создать новый элемент
Похожие публикации: