浅拷贝和深拷贝

浅拷贝

1、Object.assign

Object.assgin只会拷贝所有的属性值到新的对象中,但如果属性值是一个对象的话,拷贝的是地址,所以并不是深拷贝。







1
let obj = {
2
    a: 1,
3
    b: {
4
        food: 'food',
5
        bar: 'bar'
6
    }
7
};
8
9
let copyObj = Object.assign({}, obj);
10
console.log(copyObj);   //{a:1,b:{food:'food',bar:'bar'}}
11
12
obj.a = 4;
13
copyObj.b.food = 'fish';
14
15
console.log(copyObj.a); //1 -> 拷贝的是值,不会随着obj修改而修改。
16
console.log(obj.b.food);    //fish -> 拷贝的是地址,obj和copyObj的地址指向同一个值,所以只要其中一个修改了,另外的也会跟着修改。



2、展开运算符

展开运算符(...)与Object.assign一样:拷贝的属性值为对象时,只拷贝地址。

 let obj = {
     a: 1,
     b: {
         food: 'food',
         bar: 'bar'
     }
 };
 
 let copyObj = {...obj};
 console.log(copyObj);   //{a:1,b:{food:'food',bar:'bar'}}
 
 obj.a = 4;
 copyObj.b.food = 'fish';
 
 console.log(copyObj.a);     //1
 console.log(obj.b.food);    //fish


深拷贝

当我们拷贝对象的时候,不希望拷贝的对象共享相同的地址,就需要用到深拷贝了。

1、JSON.stringify()

 let person = {
     age: 18,
     lover:{
         name: 'sn'
         }
     };
 let deepCopy = JSON.parse(JSON.stringify(person));
 console.log(deepCopy);  // age: 18,lover:{ name: 'sn' }
 
 deepCopy.lover.name = 'ky';
 
 console.log(deepCopy.lover.name);   //  ky
 console.log(person.lover.name);     //  sn


2、函数库lodash

该函数库也有提供_.cloneDeep用来实现深拷贝

 let _ = require('lodash');
 let person = {
     age: 18,
     lover:{
         name: 'sn'
         }
     };
 let deepCopy = _.cloneDeep(person);
 console.log(deepCopy);  // age: 18,lover:{ name: 'sn' }
 
 deepCopy.lover.name = 'ky';
 
 console.log(deepCopy.lover.name);   //  ky
 console.log(person.lover.name);     //  sn

评论(0)

评论