Что такое неглубокое копирование в JavaScript?

JavaScript Программирование и разработка

Поверхностная копия: в случае неглубокой копии, когда мы копируем исходный объект в объект клона, объект клона имеет копию адреса памяти исходного объекта. Означает, что оба указывают на один и тот же адрес памяти.

И исходный объект, и клонированный объект внутренне указывают на один и тот же объект, на который ссылаются. Поскольку они указывают на один и тот же адрес памяти, поэтому, если мы изменим клонированный объект, изменения будут отражены обратно в исходный объект, поскольку они указывают на один и тот же адрес памяти.

Javascript

<script>
 
var obj1 = {
    id: 1,
    company: "GFG"
};
var obj2 = 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>
    var obj1 = {
        id: 1,
        company: "GFG"
    };
    var obj2 = { ...obj1 };
    obj2.id = 2;
    console.log(obj1.id);
    console.log(obj2.id);
</script>

Выход:

1
2

Здесь мы меняем идентификатор объекта obj2, но не меняем идентификатор объекта obj1.

Читайте также:  Что такое индексный файл index.html

Использование оператора Object.assign: принимает два параметра:

  • mpty object and
  • Original object

Javascript

<script>
    var obj1 = {
        id: 1,
        company: "GFG"
    };
    var obj2 = Object.assign({}, obj1);
    obj2.id = 2;
    console.log(obj1.id);
    console.log(obj2.id);
</script>

Выход:

1
2

Но проблема работы с оператором Object.assign в том, что он не работает идеально в случае вложенных объектов.

Javascript

<script>
    var obj1 = {
        id: 1,
        company: "GFG",
        details:
        {
            employee_no: 10
        }
    };
    var obj2 = 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>
    var obj1 = {
        id: 1,
        company: "GFG",
        details:
        {
            employee_no: 10
        }
    };
    var obj2 = 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

Оцените статью
bestprogrammer.ru
Добавить комментарий

Adblock
detector