Поверхностная копия: в случае неглубокой копии, когда мы копируем исходный объект в объект клона, объект клона имеет копию адреса памяти исходного объекта. Означает, что оба указывают на один и тот же адрес памяти.
И исходный объект, и клонированный объект внутренне указывают на один и тот же объект, на который ссылаются. Поскольку они указывают на один и тот же адрес памяти, поэтому, если мы изменим клонированный объект, изменения будут отражены обратно в исходный объект, поскольку они указывают на один и тот же адрес памяти.
Javascript
<script>varobj1 = {id: 1,company:"GFG"};varobj2 = obj1;obj2.id = 2;console.log(obj1.id);console.log(obj2.id);</script>
Выход:
2 2
Объяснение: В данном случае мы клонировали исходный объект obj1 в объект obj2. Поскольку они оба внутренне ссылаются на один и тот же адрес памяти, при изменении идентификатора объекта obj2 он также изменит идентификатор объекта obj1.
obj2.id = 2 также изменит идентификатор объекта obj1.
Это называется поверхностным копированием. Неглубокая копия означает, что как только мы внесем изменения в объект клона, они также будут отражены обратно в исходный объект.
Но в случае глубокого копирования изменение значения клонированного объекта не отразится на исходном объекте, поскольку оба они указывают на разные ссылочные объекты. Поскольку исходный объект имеет свой собственный объект-ссылку, а после клонирования клонированный объект имеет свой собственный объект-ссылку. Оба разные.
Как избежать мелкого копирования, чтобы изменение клонированного объекта не повлияло на исходный объект. Мы можем использовать следующие методы, чтобы избежать мелкого копирования.
- Использование оператора спреда
- Использование оператора Object.assign
- Использование JSON.stringify и JSON.parse
Использование оператора распространения: мы можем избежать создания неглубоких копий с помощью оператора распространения.
Javascript
<script>varobj1 = {id: 1,company:"GFG"};varobj2 = { ...obj1 };obj2.id = 2;console.log(obj1.id);console.log(obj2.id);</script>
Выход:
1 2
Здесь мы меняем идентификатор объекта obj2, но не меняем идентификатор объекта obj1.
Использование оператора Object.assign: принимает два параметра:
- mpty object and
- Original object
Javascript
<script>varobj1 = {id: 1,company:"GFG"};varobj2 = Object.assign({}, obj1);obj2.id = 2;console.log(obj1.id);console.log(obj2.id);</script>
Выход:
1 2
Но проблема работы с оператором Object.assign в том, что он не работает идеально в случае вложенных объектов.
Javascript
<script>varobj1 = {id: 1,company:"GFG",details:{employee_no: 10}};varobj2 = Object.assign({}, obj1);obj2.details.employee_no = 20;console.log(obj1.details.employee_no);console.log(obj2.details.employee_no);</script>
Выход:
20 20
В данном случае у нас есть вложенный объект и мы меняем employee_no с помощью obj2. И из-за этого obj1 employee_no тоже меняется. Таким образом, Object.assign не работает идеально в случае вложенного объекта.
JSON.stringify и JSON.parse: отлично работает в случае вложенных объектов. В отличие от оператора Object.assign, он не изменяет наш исходный объект, когда мы вносим какие-либо изменения в объект-клон.
Javascript
<script>varobj1 = {id: 1,company:"GFG",details:{employee_no: 10}};varobj2 = JSON.parse(JSON.stringify(obj1))obj2.details.employee_no = 20;console.log(obj1.details.employee_no);console.log(obj2.details.employee_no);</script>
Выход:
10 20
