js對象深拷貝

數組一維深拷貝：slice、concat、Array.from

對象一維深拷貝：Object.assign

 

一、利用擴展運算符...對數組中嵌套對象進行深拷貝

 

var arr=[{a:1,b:2},{c:1,d:2}];
    var arr2=[];
    
    arr.forEach(item=>{
      var {...obj}=item;
      arr2.push(obj);
    })
    arr2[1].d=7
    
    console.log(arr,arr2)

 二、利用lodash庫的cloneDeep方法

var arr=[{a:1,b:2},{c:1,d:2}];
var arr2=_.cloneDeep(arr)

    
arr2[1].d=7;
console.log(arr,arr2)

三、JSON.parse(JSON.stringify(objectToClone)) #這種方法能解決絕大部分業務

var arr=[{a:1,b:2},{c:1,d:2}];
var arr2=JSON.parse(JSON.stringify(arr));
    
arr2[1].d=7;
console.log(arr,arr2)

注：第一這種方法要求對象中的屬性值不能是函數、undefined以及symbol值，第二無法拷貝對象原型鏈上的屬性和方法

四、通過遞歸自定義函數實現深拷貝

function deepCopy (obj) {
    // 創建一個新對象
    let result = {}
    temp = null
    key = null
    let keys = Object.keys(obj)
    keys.map((item, index) => {
        key = item
        temp = obj[key]
        // 如果字段的值也是一個對象則遞歸操作
        if (temp && typeof temp === 'object') {
            result[key] = deepCopy(temp)
        } else {
            result[key] = temp
        }

    })
    return result
}
let obj1 = {
    x: {
        a: 1
    },
    y: undefined,
    z: function test (c, d) {
        return c+d
    },
    u: Symbol('test')
}
let obj2 = deepCopy(obj1)
obj2.x.a = 3
console.log(obj1)
console.log(obj2)

結果:

{ x: { a: 1 },

y: undefined,

z: [Function: test],

u: Symbol(test) }

{ x: { a: 3 },

y: undefined,

z: [Function: test],

u: Symbol(test) }

 

// 未完待續