工作中經常會遇到需要復制 JavaScript 數據的時候，遇到 bug 時實在令人頭疼；面試中也經常會被問到如何實現一個數據的深淺拷貝，但是你對其中的原理清晰嗎？一起來看一下吧！

一、為什么會有深淺拷貝

想要更加透徹的理解為什么 JavaScript 會有深淺拷貝，需要先了解下 JavaScript 的數據類型有哪些，一般分為基本類型(Number、String、Null、Undefined、Boolean、Symbol )和引用類型(對象、數組、函數)。

基本類型是不可變的，任何方法都無法改變一個基本類型的值，也不可以給基本類型添加屬性或者方法。但是可以為引用類型添加屬性和方法，也可以刪除其屬性和方法。

基本類型和引用類型在內存中的存儲方式也大不相同，基本類型保存在棧內存中，而引用類型保存在堆內存中。為什么要分兩種保存方式呢？ 因為保存在棧內存的必須是大小固定的數據，引用類型的大小不固定，只能保存在堆內存中，但是我們可以把它的地址寫在棧內存中以供我們訪問。

說來這么多，我們來看個示例：

let num1 = 10;

let obj1 = {

name: "hh"

}

let num2 = num1;

let obj2 = obj1;

num2 = 20;

obj2.name = "kk";

console.log(num1); // 10

console.log(obj1.name); // kk

執行完這段代碼，內存空間里是這樣的：

可以看到 obj1 和 obj2 都保存了一個指向該對象的指針，所有的操作都是對該引用的操作，所以對 obj2 的修改會影響 obj1。

小結：

之所以會出現深淺拷貝，是由于 JS 對基本類型和引用類型的處理不同。基本類型指的是簡單的數據段，而引用類型指的是一個對象保存在堆內存中的地址，JS 不允許我們直接操作內存中的地址，也就是說不能操作對象的內存空間，所以，我們對對象的操作都只是在操作它的引用而已。

在復制時也是一樣，如果我們復制一個基本類型的值時，會創建一個新值，并把它保存在新的變量的位置上。而如果我們復制一個引用類型時，同樣會把變量中的值復制一份放到新的變量空間里，但此時復制的東西并不是對象本身，而是指向該對象的指針。所以我們復制引用類型后，兩個變量其實指向同一個對象，所以改變其中的一個對象，會影響到另外一個。

二、深淺拷貝

1. 淺拷貝

淺拷貝只是復制基本類型的數據或者指向某個對象的指針，而不是復制對象本身，源對象和目標對象共享同一塊內存；若對目標對象進行修改，存在源對象被篡改的可能。

我們來看下淺拷貝的實現：

/* sourceObj 表示源對象

* 執行完函數，返回目標對象

*/

function shadowClone (sourceObj = {}) {

let targetObj = Array.isArray(sourceObj) ? [] : {};

let copy;

for (var key in sourceObj) {

copy = sourceObj[key];

targetObj[key] = copy;

}

return targetObj;

}

// 定義 source

let sourceObj = {

number: 1,

string: 'source1',

boolean: true,

null: null,

undefined: undefined,

arr: [{name: 'arr1'}, 1],

func: () => 'sourceFunc1',

obj: {

string: 'obj1',

func: () => 'objFunc1'

}

}

// 拷貝sourceObj

let copyObj = shadowClone(sourceObj);

// 修改 sourceObj

copyObj.number = 2;

copyObj.string = 'source2';

copyObj.boolean = false;

copyObj.arr[0].name = 'arr2';

copyObj.func = () => 'sourceFunc2';

copyObj.obj.string = 'obj2';

copyObj.obj.func = () => 'objFunc2';

// 執行

console.log(sourceObj);

/* {

number: 1,

string: 'source1',

boolean: true,

null: null,

undefined: undefined,

arr: [{name: 'arr2'}],

func: () => 'sourceFunc1',

obj: {

func: () => 'objFunc2',

string: 'obj2'

}

}

*/

2. 深拷貝

深拷貝能夠實現真正意義上的對象的拷貝，實現方法就是遞歸調用“淺拷貝”。深拷貝會創造一個一模一樣的對象，其內容地址是自助分配的，拷貝結束之后，內存中的值是完全相同的，但是內存地址是不一樣的，目標對象跟源對象不共享內存，修改任何一方的值，不會對另外一方造成影響。

/* sourceObj 表示源對象

* 執行完函數，返回目標對象

*/

function deepClone (sourceObj = {}) {

let targetObj = Array.isArray(sourceObj) ? [] : {};

let copy;

for (var key in sourceObj) {

copy = sourceObj[key];

if (typeof(copy) === 'object') {

if (copy instanceof Object) {

targetObj[key] = deepClone(copy);

} else {

targetObj[key] = copy;

}

} else if (typeof(copy) === 'function') {

targetObj[key] = eval(copy.toString());

} else {

targetObj[key] = copy;

}

}

return targetObj;

}

// 定義 sourceObj

let sourceObj = {

number: 1,

string: 'source1',

boolean: true,

null: null,

undefined: undefined,

arr: [{name: 'arr1'}],

func: () => 'sourceFunc1',

obj: {

string: 'obj1',

func: () => 'objFunc1'

}

}

// 拷貝sourceObj

let copyObj = deepClone(sourceObj);

// 修改 source

copyObj.number = 2;

copyObj.string = 'source2';

copyObj.boolean = false;

copyObj.arr[0].name = 'arr2';

copyObj.func = () => 'sourceFunc2';

copyObj.obj.string = 'obj2';

copyObj.obj.func = () => 'objFunc2';

// 執行

console.log(sourceObj);

/* {

number: 1,

string: 'source1',

boolean: true,

null: null,

undefined: undefined,

arr: [{name: 'arr1'}],

func: () => 'sourceFunc1',

obj: {

func: () => 'objFunc1',

string: 'obj1'

}

}

*/

兩個方法可以合并在一起：

/* deep 為 true 表示深復制，為 false 表示淺復制

* sourceObj 表示源對象

* 執行完函數，返回目標對象

*/

function clone (deep = true, sourceObj = {}) {

let targetObj = Array.isArray(sourceObj) ? [] : {};

let copy;

for (var key in sourceObj) {

copy = sourceObj[key];

if (deep && typeof(copy) === 'object') {

if (copy instanceof Object) {

targetObj[key] = clone(deep, copy);

} else {

targetObj[key] = copy;

}

} else if (deep && typeof(copy) === 'function') {

targetObj[key] = eval(copy.toString());

} else {

targetObj[key] = copy;

}

}

return targetObj;

}

三、使用技巧

1. concat()、slice()

(1)若拷貝數組是純數據(不含對象)，可以通過concat() 和 slice() 來實現深拷貝；

let a = [1, 2];

let b = [3, 4];

let copy = a.concat(b);

a[1] = 5;

b[1] = 6;

console.log(copy);

// [1, 2, 3, 4]

let a = [1, 2];

let copy = a.slice();

copy[0] = 3;

console.log(a);

// [1, 2]

(2)若拷貝數組中有對象，可以使用 concat() 和 slice() 方法來實現數組的淺拷貝。

let a = [1, {name: 'hh1'}];

let b = [2, {name: 'kk1'}];

let copy = a.concat(b);

copy[1].name = 'hh2';

copy[3].name = 'kk2';

console.log(copy);

// [1, {name: 'hh2'}, 2, {name: 'kk2'}]

無論 a[1].name 或者 b[1].name 改變，copy[1].name 的值都會改變。

let a = [1, {name: 'hh1'}];

let copy = a.slice();

copy[1].name = 'hh2';

console.log(a);

// [1, {name: 'hh2'}]

改變了 a[1].name 后，copy[1].name 的值也改變了。

2. Object.assign()、Object.create()

Object.assign()、Object.create() 都是一層(根級)深拷貝，之下的級別為淺拷貝。

(1) 若拷貝對象只有一級，可以通過 Object.assign()、Object.create() 來實現對象的深拷貝；

let sourceObj = {

str: 'hh1',

number: 10

}

let targetObj = Object.assign({}, sourceObj)

targetObj.str = 'hh2'

console.log(sourceObj);

// {str: 'hh1', number: 10}

let sourceObj = {

str: 'hh1',

number: 10

}

let targetObj = Object.create(sourceObj)

targetObj.str = 'hh2'

console.log(sourceObj);

// {str: 'hh1', number: 10}

(2) 若拷貝對象有多級， Object.assign()、Object.create() 實現的是對象的淺拷貝。

let sourceObj = {

str: 'hh',

number: 10,

obj: {

str: 'kk1'

}

}

let targetObj = Object.assign({}, sourceObj)

targetObj.obj.str = 'kk2'

console.log(sourceObj);

// {

// str: 'hh',

// number: 10,

// obj: {

// str: 'kk2'

// }

// }

let sourceObj = {

str: 'hh',

number: 10,

obj: {

str: 'kk1'

}

}

let targetObj = Object.create(sourceObj)

targetObj.obj.str = 'kk2'

console.log(sourceObj);

// {

// str: 'hh',

// number: 10,

// obj: {

// str: 'kk2'

// }

// }

修改了 targetObj.obj.str 的值之后，sourceObj.obj.str 的值也改變了。

3. 對象的解構

對象的解構同 Object.assign() 和 Object.create()，都是一層(根級)深拷貝，之下的級別為淺拷貝。

(1)若拷貝對象只有一層，可以通過對象的解構來實現深拷貝；

let sourceObj = {

str: 'hh1',

number: 10

}

let targetObj = {...sourceObj};

targetObj.str = 'hh2'

console.log(sourceObj);

// {str: 'hh1', number: 10}

(2)若拷貝對象有多層，通過對象的解構實現的是對象的淺拷貝。

let sourceObj = {

str: 'hh',

number: 10,

obj: {

str: 'kk1'

}

}

let targetObj = {...sourceObj};

targetObj.obj.str = 'kk2'

console.log(sourceObj);

// {

// str: 'hh',

// number: 10,

// obj: {

// str: 'kk2'

// }

// }

4. JSON.parse()

用 JSON.stringify() 把對象轉成字符串，再用 JSON.parse() 把字符串轉成新的對象，可以實現對象的深復制。

let source = ['hh', 1, [2, 3], {name: 'kk1'}];

let copy = JSON.parse(JSON.stringify(source));

copy[2][1] = 4;

copy[3].name = 'kk2';

console.log(source);

// ['hh', 1, [2, 3], {name: 'kk1'}]

可以看出，雖然改變了 copy[2].name 的值，但是 source[2].name 的值沒有改變。

JSON.parse(JSON.stringify(obj)) 不僅能復制數組還可以復制對象，但是幾個弊端：

1)它會拋棄對象的 constructor，深拷貝之后，不管這個對象原來的構造函數是什么，在深拷貝之后都會變成 Object；

2)這種方法能正確處理的對象只有?Number, String, Boolean, Array, 扁平對象，即那些能夠被 json 直接表示的數據結構。RegExp 對象是無法通過這種方式深拷貝。

3)只有可以轉成 JSON 格式的對象才可以這樣用，像 function 沒辦法轉成 JSON。

5. 可以使用的庫

以下兩種庫都能實現深淺拷貝，有各自的使用方法。

jQuery

具體使用可以參考：官方文檔

Lodash

具體使用可以參考：官方文檔