js深度複製方法總結

想理解js深度複製，一定要理解JS的內存管理，我們知道JS擁有自動的垃圾回收機制，這樣就使得很多前端開發人員不是很重視內存管理這一塊。但是其實這一部分的內容對於理解JS中原型與原型鏈，閉包，遞歸都是非常有幫助的。
在JS中，每一個數據都需要一個內存空間。內存空間又被分爲兩種：棧內存(stock) 堆內存(heap)
關於原理，這篇博文講的非常詳細：
https://www.jianshu.com/p/2a3728cded4c?utm_campaign=maleskine&utm_content=note&utm_medium=reader_share&utm_source=weixin
下面是我總結的一些深度拷貝函數

1. 除了遞歸，我們還可以借用JSON對象的parse和stringify

function deepClone(obj){
    let _obj = JSON.stringify(obj),
        objClone = JSON.parse(_obj);
    return objClone
}    
let a=[0,1,[2,3],4],
    b=deepClone(a);
a[0]=1;
a[2][0]=1;
console.log(a,b);

這個方法雖然可以解決絕大部分是使用場景,但是卻有很多坑.
1.他無法實現對函數 、RegExp等特殊對象的克隆;
2.會拋棄對象的constructor,所有的構造函數會指向Object;
3.對象有循環引用,會報錯;

2. 遞歸（比較簡單的一種，不是最好的）

function deepClone(obj){
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判斷ojb子元素是否爲對象，如果是，遞歸複製
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //如果不是，簡單複製
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}    
let a=[1,2,3,4],
    b=deepClone(a);
a[0]=2;
console.log(a,b);

3. 除了上面兩種方法之外，我們還可以借用JQ的extend方法。

$.extend( [deep ], target, object1 [, objectN ] )

deep表示是否深拷貝，爲true爲深拷貝，爲false，則爲淺拷貝

target Object類型 目標對象，其他對象的成員屬性將被附加到該對象上。

object1 objectN可選。 Object類型 第一個以及第N個被合併的對象。

let a=[0,1,[2,3],4],
    b=$.extend(true,[],a);
a[0]=1;
a[2][0]=1;
console.log(a,b);

4. 考慮了棧和堆的思想；其思路是：引入一個數組 uniqueList 用來存儲已經拷貝的數組，每次循環遍歷時，先判斷對象是否在 uniqueList 中了，如果在的話就不執行拷貝邏輯了。

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

5.loadsh——生產環境中最好用的深克隆