第js深拷貝與淺拷貝一文徹底搞懂深拷貝淺拷貝只是針對引用數(shù)據(jù)類型

JavaScript數(shù)據(jù)類型包括基本數(shù)據(jù)類型（Number，String，boolean，Null，Undefined，Symbol）、引用數(shù)據(jù)類型（Array，Object）

基本數(shù)據(jù)類型的特點：直接存儲在棧(stack)中的數(shù)據(jù)

引用數(shù)據(jù)類在棧中存有指針，實體數(shù)據(jù)存在堆中，通過棧中的指針找到堆中的引用數(shù)據(jù)類型的實體

淺拷貝只復(fù)制指向某個對象的指針，而不復(fù)制對象本身，新舊對象還是共享同一塊內(nèi)存。但深拷貝會另外創(chuàng)造一個一模一樣的對象，新對象跟原對象不共享內(nèi)存，修改新對象不會改到原對象。

賦值和淺拷貝的區(qū)別

當(dāng)我們把一個對象賦值給一個新的變量時，賦的其實是該對象的在棧中的地址，而不是堆中的數(shù)據(jù)。也就是兩個對象指向的是同一個存儲空間，無論哪個對象發(fā)生改變，其實都是改變的存儲空間的內(nèi)容，因此，兩個對象是聯(lián)動的。

淺拷貝是按位拷貝對象，它會創(chuàng)建一個新對象，這個對象有著原始對象屬性值的一份精確拷貝。如果屬性是基本類型，拷貝的就是基本類型的值；如果屬性是內(nèi)存地址（引用類型），拷貝的就是內(nèi)存地址，因此如果其中一個對象改變了這個地址，就會影響到另一個對象。即默認(rèn)拷貝構(gòu)造函數(shù)只是對對象進(jìn)行淺拷貝復(fù)制(逐個成員依次拷貝)，即只復(fù)制對象空間而不復(fù)制資源。

//對象賦值

varobj1={

'name':'zhangsan',

'age':'18',

'language':[1,[2,3],[4,5]],

varobj2=obj1;

="lisi";

obj2.language[1]=["二","三"];

console.log('obj1',obj1)

console.log('obj2',obj2)

//淺拷貝

varobj1={

'name':'zhangsan',

'age':'18',

'language':[1,[2,3],[4,5]],

varobj3=shallowCopy(obj1);

="lisi";

obj3.language[1]=["二","三"];

functionshallowCopy(src){

vardst={};

for(varpropinsrc){

if(src.hasOwnProperty(prop)){

dst[prop]=src[prop];

returndst;

console.log('obj1',obj1)

console.log('obj3',obj3)

上面例子中，obj1是原始數(shù)據(jù)，obj2是賦值操作得到，而obj3淺拷貝得到。我們可以很清晰看到對原始數(shù)據(jù)的影響，具體請看下表：

淺拷貝的實現(xiàn)方法

1.Object.assign()

Object.assign()方法可以把任意多個的源對象自身的可枚舉屬性拷貝給目標(biāo)對象，然后返回目標(biāo)對象。但是Object.assign()進(jìn)行的是淺拷貝，拷貝的是對象的屬性的引用，而不是對象本身。

對于Object.assign()而言，如果對象的屬性值為簡單類型（string，number），通過Object.assign({},srcobj);得到的新對象為深拷貝；如果屬性值為對象或其他引用類型，那對于這個對象而言其實是淺拷貝

2.Atotype.concat()

letarr=[1,3,{

username:'kobe'

letarr2=arr.concat();

arr2[2].username='wade';

console.log(arr);

3.Atotype.slice()

letarr=[1,3,{

username:'kobe'

letarr3=arr.slice();

arr3[2].username='wade'

console.log(arr);

深拷貝的實現(xiàn)

1.JSON.parse(JSON.stringify())

原理：用JSON.stringify將對象轉(zhuǎn)成JSON字符串，再用JSON.parse()把字符串解析成對象，一去一來，新的對象產(chǎn)生了，而且對象會開辟新的棧，實現(xiàn)深拷貝。

這種方法雖然可以實現(xiàn)數(shù)組或?qū)ο笊羁截?，但不能處理函?shù)。

這是因為JSON.stringify()方法是將一個JavaScript值(對象或者數(shù)組)轉(zhuǎn)換為一個JSON字符串，不能接受函數(shù)。

2.手寫遞歸方法

//遞歸來實現(xiàn)深拷貝

functiondeepClone(obj){

varnewObj=objinstanceofArray[]:{};

if(typeofobj!=='object'){

returnobj;

}else{

for(variinobj){

newObj[i]=typeofobj[i]==='object'deepClone(obj[i]):obj[i];

returnnewObj;

varq=[1,2,4,6,{age:12},[1,2]];

vard=deepClone(q)

console.log(d)

3.函數(shù)庫lodash

var_=require('lodash');

varobj1={

a:1,

b:{f:{g:1