List of articles

Preface

How to distinguish between deep copy and shallow copy ？

let a = [0,1,2,3,4]
let b = a;
console.log(b);  //[0,1,2,3,4]
a[0] =1;
console.log(b);  //[1,1, 2, 3, 4] 

  According to the example above ,b Copy the a, When we modify a When ,b The value of also changed , This is a shallow copy . If we modify a after ,b There is no change , Then it is a deep copy .

One 、 Basic data and reference data types

Why did we modify a,b It will also change ？
That involves the concepts of basic data type and reference data type .
Basic data type ：number,string,boolean,null,underfined,symbol  as well as es10 Newly added BigInt.
Reference data type ：object,array,function etc. . 

• The basic data type name and value are stored in the stack .
  for example ：let a = 1; b = a;

 a= 1 The memory will be opened in the stack memory to store the corresponding name and value .

  b = a The time stack memory will open up a new memory , Deposit b Value , Two variables have their own spatial complementary interference , So we modify b when a It won't be affected . although b Not subject to a influence , But it's not a deep copy , Because the deep copy itself is only for the more complex object Type data .

•   Reference data type -- Name and address pointers are in stack memory , Value in heap memory .

When obj1 = obj Copy , In fact, it is to open up memory in the stack to store obj1, The corresponding values are the same obj The corresponding address pointer .

That is to say obj1 And obj Point to the same value in the heap memory . 

  When we are right obj[0] = 1 When modifying an array , because obj And obj1 Point to the same address , So nature obj1 It's also affected , This is what we call a shallow copy .

Two 、 How to realize deep copy ？

1. adopt JSON.stringify() and JSON.parse()

  As can be seen from the figure above ,obj adopt JSON.parse(JSON.stringify()) to obj1 After the assignment , change obj Medium attribute value ,obj1 It didn't change with it , Deep copy is realized .

however , This method is also defective Of ：

let a={ 
        name:' Little ',
        age:20,
        num:undefined,
        no:Symbol(1),
        info:function(){return {address:' hebei ',iphone:'1234567'}}
}
let b = JSON.parse(JSON.stringify(a));
b //{name: " Little ", age: 20}
a //{name: " Smile ", age: 20, num: undefined, no: Symbol(1), info: ƒ}

As can be seen above , JSON.parse(JSON.stringify()) Can't copy function,undefined and symbol, It also cannot solve the circular reference object , Will cause data loss .

2. Recursively traverse the bottom layer for deep copy  

let obj={ 
        name:' Little ',
        age:20,
        num:undefined,
        no:Symbol(1),
        new:{name:'title',id:[2,[3,4]]},
        info:function(){return {address:' hebei ',iphone:'1234567'}}
}
const clone = (obj)=>{
    let data= typeof obj === 'object' ? {}:[];
    if(obj && typeof obj ==='object'){
        for(let key in obj){
            if(obj[key] && typeof obj[key]==='object'){
                data[key] = clone(obj[key])
            }else{
                data[key] = obj[key]
            }
        }
    }
    return data;
}
let obj2 = clone(obj);
obj.new.name='value';
obj.new.id[1][0]=10;
console.log(obj2);
console.log(obj);

3. adopt jq Of extend Method to make a deep copy

$.extend( [deep ], target, object1 [, objectN ] )

deep Indicates whether there is a deep copy , by true Is a deep copy , by false, Is a shallow copy

target Object type Target audience , Member properties of other objects will be attached to the object .

object1  objectN Optional . Object type The first one and the first one N Two merged objects . 

let a={ 
        name:' Little ',
        age:20,
        num:undefined,
        no:Symbol(1),
        new:{name:'title',id:[2,[3,4]]},
        info:function(){return {address:' hebei ',iphone:'1234567'}}
}
b=$.extend(true,[],a);
a.name=" Smile ";
a.new.name="value";
a.new.id[1][0] = 10;
console.log(a,b);

 4. Only the first layer of the object can be deeply copied

• Object.assign() Merge of objects  
• Array.slice() Method
• Array.concat() Method
• es6 Deconstruct assignment

Only the first layer of the object can be deeply copied , If the properties in the object are also objects , There is no way to make a deep copy . 

About JSON.parse(JSON.stringify()) Supplement of deep copy . 

•  obj There are new Date(), After deep copy , Time will become a string . Not the time object ;
• obj Are there in RegExp、Error object , The result of serialization will become an empty object {};

const a ={
     name:'a',
     date:new RegExp('\\w+'),
};
const b =JSON.parse(JSON.stringify(a));
 a.name ='test'
 console.log( a, b)

•  obj Are there in NaN、Infinity and -Infinity, The result of serialization will be nul.

const a ={
    name:'a',
   date:NaN,
};
const b =JSON.parse(JSON.stringify(a));
a.name ='test'
console.log(a, b)