JavaScript 中的深淺拷貝

時間 2019-11-06

原文原文鏈接

工做中常常會遇到須要複製 JavaScript 數據的時候，遇到 bug 時實在使人頭疼；面試中也常常會被問到如何實現一個數據的深淺拷貝，可是你對其中的原理清晰嗎？一塊兒來看一下吧！

1、爲何會有深淺拷貝

想要更加透徹的理解爲何 JavaScript 會有深淺拷貝，須要先了解下 JavaScript 的數據類型有哪些，通常分爲基本類型（Number、String、Null、Undefined、Boolean、Symbol ）和引用類型（對象、數組、函數）。jquery

基本類型是不可變的，任何方法都沒法改變一個基本類型的值，也不能夠給基本類型添加屬性或者方法。可是能夠爲引用類型添加屬性和方法，也能夠刪除其屬性和方法。面試

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

說來這麼多，咱們來看個示例：api

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 不容許咱們直接操做內存中的地址，也就是說不能操做對象的內存空間，因此，咱們對對象的操做都只是在操做它的引用而已。
在複製時也是同樣，若是咱們複製一個基本類型的值時，會建立一個新值，並把它保存在新的變量的位置上。而若是咱們複製一個引用類型時，一樣會把變量中的值複製一份放到新的變量空間裏，但此時複製的東西並非對象自己，而是指向該對象的指針。因此咱們複製引用類型後，兩個變量其實指向同一個對象，因此改變其中的一個對象，會影響到另一個。spa

2、深淺拷貝

1. 淺拷貝

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

咱們來看下淺拷貝的實現：code

/* 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;
}

3、使用技巧

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。