摘要：正文討論深淺拷貝，首先要從的基本數據類型說起根據中的變量類型傳遞方式，分為值類型和引用類型，值類型變量包括。當你拷貝的對象有多級的時候，就是深拷貝。數據不存在則對其拷貝。

前言：

 本文主要閱讀對象：對深淺拷貝印象模糊對初級前端，想對js深淺拷貝聊一聊的中級前端。
 如果是對這些有完整對認知體系和解決方法的大佬，可以選擇略過。

正文： 討論深淺拷貝，首先要從js的基本數據類型說起： 根據 JavaScript 中的變量類型傳遞方式，分為值類型和引用類型， 值類型變量包括 Boolean、String、Number、Undefined、Null。
引用類型包括了 Object 類的所有， 如 Date、Array、Function 等。在參數傳遞方式上，值類型是按值傳遞，引用類型是按地址傳遞。

我們來看一下這兩則有什么區別：

//eg1:
// 值類型
var a = 10
var b = a
b = 20
console.log(a)  // 10
console.log(b)  // 20

//解析：上述代碼中，a b都是值類型，兩者分別修改賦值，相互之間沒有任何影響。再看引用類型的例子：

//eg2
// 引用類型
var a = {x: 10, y: 20}
var b = a
b.x = 100
b.y = 200
console.log(a)  // {x: 100, y: 200}
console.log(b)  // {x: 100, y: 200}

解析： 上述代碼中，a b都是引用類型。在執行了b = a之后，修改b的屬性值，a的也跟著變化。因為a和b都是引用類型，指向了同一個內存地址，即兩者引用的是同一個值，因此b修改屬性時，a的值隨之改動。

**那到底什么是深淺拷貝呢？**

解析：深淺拷貝是拷貝對象的`深度`來說的：

當你想拷貝的對象只有一級時，就是淺拷貝。

當你拷貝的對象有多級的時候，就是深拷貝。

再回到上面的那個例子： 在例子能看出來，如果直接采用“=”賦值，這種類型，當我們改變b的值時候，a也會隨之改變的，假如不允許改變a呢？ 這時，深拷貝就出場了。

 function clone(val){
    if(!val && typeof val !== "object"){
        return
    }

    const newArr = toString.call(val) === ["object Array"] ? [] : {}

    for (let item in val) {
        if(typeof val[item] ===  "object") {
            newArr[item] = clone(item)
        }else {
            newArr[item] = val[item]
        }
    }
    return newArr
 }

//測試：
    var a = {x: 10, y: 20}
    var b = clone(a)
    b.x = 100
    b.y = 200
    console.log(a)  // {x: 10, y: 20}
    console.log(b)  //{x: 100, y: 200}

解析： 對于這個深拷貝，大家看到這里應該都可以看明白：主要思路就是淺拷貝 + 遞歸。
這有幾個點需要注意：
1. 判斷接收到的參數類型。
2. 使用toString.call()判斷更加嚴謹。
3. 考慮對其他引用類型的數據兼容（這里并沒有對每種類型的數據組做判斷，引用類型包括了 Object 類的所有，如 Date、Array、Function 等。）

需要注意的是：用遞歸的話，會有一下幾個需要特別注意的點：
    1. 當數據層次很深時，容易爆棧（棧溢出） 解決辦法=>
        a. 消除尾遞歸
        b. 改用循環

    2. “循環引用”，會導致死循環  解決辦法 =>
        a. 循環檢測
        b. 暴力破解

第一種：數據廣度特別大，層次特別深
第二種：類似下面的這種情況
    var a = {}
    a.a = a
    clone(a) //死循環
    

ES6中一行代碼實現深拷貝：JSON.parse(JSON.stringify(source))
注釋：JSON.stringify()其實利用了“循環檢測”機制

這里給大家推薦一篇循環解決遞歸的方法： 可以保持拷貝數據以后的引用關系

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 = find(uniqueList, 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;
}

function find(arr, item) {
    for(let i = 0; i < arr.length; i++) {
        if (arr[i].source === item) {
            return arr[i];
        }
    }

    return null;
}

//eg1：
var a = {
    a1: b,
    a2: b,
}

var b = {};

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

var c = cloneForce(a);
c.a1 === c.a2 // true   引用保持一致

//eg2:
var a = {};
a.a = a;

console.log(cloneForce(a))//還可以破解循環引用

主要思路是： 聲明一個數組對象（父對象，key，value），其有值時，取其最后一個對象； 判斷key有值，代表當前級下有子級，則拷貝到子元素。如果數據已經存在，則中斷本次循環。數據不存在則對其拷貝。
有一點需要注意：cloneForce在對象數量很多時會出現很大的問題，如果數據量很大不適合使用cloneForce。

有興趣的同學，可以前往 深拷貝的終極探索（90%的人都不知道），查看更多的細節。

總結：
如果覺得對你有幫助，請給作者一點小小的鼓勵， 點個贊或者收藏吧。 有需要溝通的請聯系我： 微信（ wx9456d ） 或 郵箱（ allan_liu986@163.com ）