js 深拷貝方法

Dad發表於2018-10-02
JS

深拷貝淺拷貝的方法

淺拷貝

//Object 方法
 object.assign(target，source)// 將源拷貝到目標，切返回目標
 es6 擴充套件運算子
 //陣列方法：
 slice ，concat，es6擴充套件運算子
複製程式碼

深拷貝的兩個方法

  1. JSON序列化
let obj  = {a:2,b:{c:1}}
let str = JSON.strify(obj)
JSON.parse(str);
複製程式碼

JSON 存在幾個問題，沒法轉化 是Date、Function、RegExp,不相信的同學可以試試，物件中有這幾個型別的值，拷貝不出來 2.深層遞迴

function deepClone (obj){
    let  cloonObj = {};
    let ary = [];
    if(typeof obj !== "object"){

        return obj;
    }
    if(obj instanceof Array){
        for(let val of obj ){
            if(typeof val === "object"){
                ary.push(deepClone(val));
            }else {
                ary.push(val);
            }
        }
        return ary;
    } else {
        for(let key in obj){
            if( obj[key] instanceof Object){
                cloonObj[key] = deepClone(obj[key]);
            } else {
                cloonObj[key] = obj[key];
            }
        }
        return cloonObj;
    }
}
複製程式碼

上面程式碼 只因為 判斷是陣列還是Object，寫的很冗餘，精簡一下 得到 如下

注意 注意 史上最簡短的深拷貝程式碼來了

function  deepClone (obj){
    let t =  new obj.constructor
    if(obj instanceof Date) return new Date(obj);
    if(obj instanceof RegExp) return new RegExp(obj);
    if(typeof obj !== "object") return obj;
    for(let key in obj){
        t[key] = deepClone(obj[key]);
    }
    return t;
}

複製程式碼

驗證下：


let  obj  =  {a:1,b:{c:2},d:[1,2],e:new RegExp(/\d+/),f:function(){console.log(1)},g:new Date()}

let  ObjCloone = deepClone(obj)
console.log(ObjCloone);

/*>>{ a: 1,
  b: { c: 2 },
  d: [ 1, 2 ],
  e: /\d+/,
  f: [Function: f],
  g: 2018-10-02T10:15:19.672Z }
  */


複製程式碼

相關文章