What is shallow copy? What is deep copy?

The differences are as follows, but all comparisons are based on reference types

Let’s start with a simple concept. What is object assignment?

Object assignment

    1. When we assign an object to a new variable, we assign the object’s address on the stack, not the data in the heap. That is, two objects point to the same storage space. If any object is changed, it is the content of the changed storage space. Therefore, the two objects are linked.
Var obj={name:"xuxu", age:23} var obj2=obj; // Assignment is the address in the assigned stack; obj2.name='haha'; console.log(obj.name); //haha console.log(obj); //{name:'haha',age:23}Copy the code

Shallow copy

    1. A shallow copy creates a new object with an exact copy of the original object’s property values. If the property is of a primitive type, the value of the primitive type is copied,If the attribute is a reference type, the memory address is copied, so if one object changes the address, it affects the other object.

Example:

Let obj = {name: 'xuxu', chi() {food: 'meat'}} let obj3 = qian(obj); obj3.name = 'genggeng'; Obj3. chi. Food = 'food '; Function qian(item) {let obj2 = {}; The for (var I in item) {// hasOwnProperty() method returns a Boolean indicating whether the object has the specified property in its own properties (i.e., If (item.hasownProperty (I)) {obj2[I] = item[I]; } } return obj2; } console.log('obj', obj); //obj //Object // chi: ƒ Chi () // name: "xuxu" console.log('obj3', obj3); ƒ Chi () //obj3 //Object //Copy the code

Deep copy

    1. A deep copy is a complete copy of an object from the heap, creating a new area of the heap to store the new object, and modifying the new object does not affect the original object.

/ / 3. Deep copy / / let obj1 = {/ / name: 'xuxu, / / arr: [[2, 3] 1, 4], / /}; // let obj4 = deepClone(obj1) // obj4.name = "gengeng"; // obj4.arr[1] = [5, 6, 7]; // function deepClone(obj) {// // if (obj === null) return obj; // function deepClone(obj === null) return obj; // // if (obj instanceof Date) return new Date(obj); // // if (obj instanceof RegExp) return new RegExp(obj); // // if (typeof obj ! == "object") return obj; // let cloneObj = new obj.constructor(); CloneObj [key] = deepClone(obj[key]); // for (let key in obj) {// if (obj. // } // } // return cloneObj; // } // console.log('obj1', obj1) // obj1 { name: 'xuxu', arr: [ 1, [ 2, 3 ], 4 ] } // console.log('obj4', obj4) // obj4 { name: 'gengeng', arr: [ 1, [ 5, 6, 7 ], 4 ] }Copy the code

2.1 shallow copy

The object.assign () method copies the enumerable properties of any number of source objects to the target Object and returns the target Object.

// Object.assign(target, ... Sources) // parameter target Target object. Sources Indicates the source object. Let obj = {name: 'xuxu', chi() {food: 'meat'}} let obj2 = object.assign ({}, obj); obj2.name = 'gengegng'; obj2.chi.food = 'cai'; console.log(obj); / / {name: "xuxu," chi: ƒ}Copy the code

3.1 deep copy

Json.stringify converts an object into a JSON string, and json.parse parses the string into an object. As it goes, new objects are created, and the object opens up a new stack for deep copy.

let arr = [1, 3, {username: ' kobe'}];
        let arr4 = JSON.parse(JSON.stringify(arr));
        arr4[2].username = 'duncan';
        console.log(arr, arr4)

Copy the code