「前端面試題系列9」淺拷貝與深拷貝的含義、區別及實現（文末有崗位內推哦~）

時間 2019-11-09

標籤端面試題系列拷貝含義區別實現崗位简体版

原文原文鏈接

前言

這是前端面試題系列的第 9 篇，你可能錯過了前面的篇章，能夠在這裏找到：前端

面試的時候，我常常會問候選人深拷貝與淺拷貝的問題。由於它能夠考察一我的的不少方面，好比基本功，邏輯能力，編碼能力等等。node

另外在實際工做中，也常會遇到它。好比用於頁面展現的數據狀態，與須要傳給後端的數據包中，有部分字段的值不一致的話，就須要在傳參時根據接口文檔覆寫那幾個字段的值。面試

最多見的可能就是 status 這個參數了。界面上的展現須要 Boolean 值，然後端同窗但願拿到的是 Number 值，1 或者 0。爲了避免影響展現效果，每每就須要深拷貝一下，再進行覆寫，不然界面上就會由於某些值的變化，出現奇怪的現象。segmentfault

至於爲何會這樣，下文會講到。立刻開始今天的主題，讓咱們先從賦值開始提及。後端

賦值

Javascript 的原始數據類型有這幾種：Boolean、Null、Undefined、Number、String、Symbol(ES6)。它們的賦值很簡單，且賦值後兩個變量互不影響。數組

let test1 = 'chao';
let test2 = test1;

// test2: chao

test1 = 'chao_change';

// test2: chao
// test1: chao_change

另外的引用數據類型有：Object 和 Array。深拷貝與淺拷貝的出現，就與這兩個數據類型有關。微信

const obj = {a:1, b:2};
const obj2 = obj;
obj2.a = 3;
console.log(obj.a); // 3

依照賦值的思路，對 Object 引用類型進行拷貝，就會出問題。不少狀況下，這不是咱們想要的。這時，就須要用淺拷貝來實現了。前端工程師

淺拷貝

什麼是淺拷貝？能夠這麼理解：建立一個新的對象，把原有的對象屬性值，完整地拷貝過來。其中包括了原始類型的值，還有引用類型的內存地址。框架

讓咱們用 Object.assign 來改寫一下上面的例子：函數

const obj = {a:1, b:2};
const obj2 = Object.assign({}, obj);
obj2.a = 3;
console.log(obj.a); // 1

Ok，改變了 obj2 的 a 屬性，但 obj 的 a 並無發生變化，這正是咱們想要的。

但是，這樣的拷貝還有瑕疵，再改一下例子：

const arr = [{a:1,b:2}, {a:3,b:4}];
const newArr = [].concat(arr);

newArr.length = 1; // 爲了方便區分，只保留新數組的第一個元素
console.log(newArr); // [{a:1,b:2}]
console.log(arr); // [{a:1,b:2},{a:3,b:4}]

newArr[0].a = 123; // 修改 newArr 中第一個元素的a
console.log(arr[0]); // {a: 123, b: 2}，居然把 arr 的第一個元素的 a 也改了

oh，no！這不是咱們想要的...

通過一番查找，才發現：原來，對象的 Object.assign()，數組的 Array.prototype.slice() 和 Array.prototype.concat()，還有 ES6 的 擴展運算符，都有相似的問題，它們都屬於淺拷貝。這一點，在實際工做中處理數據的組裝時，要格外注意。

因此，我將淺拷貝這樣定義：只拷貝第一層的原始類型值，和第一層的引用類型地址。

深拷貝

咱們固然但願當拷貝多層級的對象時，也能實現互不影響的效果。因此，深拷貝的概念也就油然而生了。我將深拷貝定義爲：拷貝全部的屬性值，以及屬性地址指向的值的內存空間。

也就是說，當遇到對象時，就再新開一個對象，而後將第二層源對象的屬性值，完整地拷貝到這個新開的對象中。

按照淺拷貝的思路，很容易就想到了遞歸調用。因此，就本身封裝了個深拷貝的方法：

function deepClone(obj) {
    if(!obj && typeof obj !== 'object'){
        return;
    }
    var newObj= toString.call(obj) === '[object Array]' ? [] : {};
    for (var key in obj) {
        if (obj[key] && typeof obj[key] === 'object') {
            newObj[key] = deepClone(obj[key]);
        } else {
            newObj[key] = obj[key];
        }
    }
    return newObj;
}

再試試看：

let arr = [{a:1,b:2}, {a:3,b:4}];
let newArr = deepClone(arr);

newArr.length = 1; // 爲了方便區分，只保留新數組的第一個元素
console.log(newArr); // [{a:1, b:2}]
console.log(arr); // [{a:1, b:2}, {a:3, b:4}]

newArr[0].a = 123; // 修改 newArr 中第一個元素的 a
console.log(arr[0]); // {a:1, b:2}

ok，這下搞定了。

不過，這個方法貌似會存在 引用丟失 的的問題。好比這樣：

var b = {};
var a = {a1: b, a2: b};

a.a1 === a.a2 // true

var c = clone(a);
c.a1 === c.a2 // false

若是咱們的需求是，應該丟失引用，那就能夠用這個方法。反之，就得想辦法解決。

一行代碼的深拷貝

固然，還有最簡單粗暴的深拷貝方法，就是利用 JSON 了。像這樣：

let newArr2 = JSON.parse(JSON.stringify(arr));
console.log(arr[0]); // {a:1, b:2}
newArr2[0].a = 123;
console.log(arr[0]); // {a:1, b:2}

可是，JSON 內部用了遞歸的方式。數據一但過多，就會有遞歸爆棧的風險。

// Maximum call stack size exceeded

深拷貝的終極方案

有位大佬給出了深拷貝的終極方案，利用了「棧」的思想。

function cloneForce(x) {
    // 用來去重
    const uniqueList = [];

    let root = {};

    // 循環數組
    const loopList = [
        {
            parent: root,
            key: undefined,
            data: x,
        }
    ];

    while(loopList.length) {
        // 深度優先
        const node = loopList.pop();
        const parent = node.parent;
        const key = node.key;
        const data = node.data;

        // 初始化賦值目標，key爲undefined則拷貝到父元素，不然拷貝到子元素
        let res = parent;
        if (typeof key !== 'undefined') {
            res = parent[key] = {};
        }

        // 數據已經存在
        let uniqueData = uniqueList.find((item) => item.source === data );
        if (uniqueData) {
            parent[key] = uniqueData.target;
            // 中斷本次循環
            continue;
        }

        // 數據不存在
        // 保存源數據，在拷貝數據中對應的引用
        uniqueList.push({
            source: data,
            target: res,
        });

        for(let k in data) {
            if (data.hasOwnProperty(k)) {
                if (typeof data[k] === 'object') {
                    // 下一次循環
                    loopList.push({
                        parent: res,
                        key: k,
                        data: data[k],
                    });
                } else {
                    res[k] = data[k];
                }
            }
        }
    }

    return root;
}

其思路是：引入一個數組 uniqueList 用來存儲已經拷貝的數組，每次循環遍歷時，先判斷對象是否在 uniqueList 中了，若是在的話就不執行拷貝邏輯了。

這個方法是在解決遞歸爆棧問題的基礎上，加以改進解決循環引用的問題。但若是你並不想保持引用，那就改用 cloneLoop（用於解決遞歸爆棧）便可。有興趣的同窗，能夠前往深拷貝的終極探索（90%的人都不知道），查看更多的細節。

總結

所謂深拷貝與淺拷貝，指的是 Object 和 Array 這樣的引用數據類型。

淺拷貝，只拷貝第一層的原始類型值，和第一層的引用類型地址。

深拷貝，拷貝全部的屬性值，以及屬性地址指向的值的內存空間。經過遞歸調用，或者 JSON 來作深拷貝，都會有一些問題。而 cloneForce 方法卻是目前看來最完美的解決方案了。

在平常的工做中，咱們要特別注意，對象的 Object.assign()，數組的 Array.prototype.slice() 和 Array.prototype.concat()，還有 ES6 的 擴展運算符，都屬於淺拷貝。當須要作數據組裝時，必定要用深拷貝，以避免影響界面展現效果。