由模仿易企秀实现dom复制粘贴功能引发的基础知识盘点

对象深拷贝

JSON.parse(JSON.stringify)

该方式可以对json形式的对象进行深拷贝

let obj4 = {
    a: 1,
    b: {
        c: 1,
        d: 2
    }
}
let obj5 = JSON.parse(JSON.stringify(obj4))
console.log(obj5)//{ a: 2, b: { c: 1, d: 2 } }
复制代码

但是对这两种形式的对象，不可以进行深拷贝。

• 对象中某个属性值为undefined。
• 对象里有函数

let obj6 = {
    a: undefined,
    b: null,
    c: 2
}
let obj7 = JSON.parse(JSON.stringify(obj6))
console.log(obj7) //{ b: null, c: 2 }
let obj8 = {
    b: function () {
        return false
    },
    a: 1
}
let obj9 = JSON.parse(JSON.stringify(obj8))
console.log(obj9) //{ a: 1 }
复制代码

Object.assign

var obj = {
    a: 1,
    b: 2,
    c: function () {
        return false
    },
    d: undefined,
    e: {
        k1: 1,
        k2: 2
    },
    f: [1, 2],
    g: null
}
var newObj = Object.assign({}, obj)
复制代码

注意：Object.assign也只是一级属性是深拷贝，其他的都还是浅拷贝

obj.a = 2
console.log(newObj.a) //1
obj.e.k1 = 'haha'
console.log(newObj.e.k1) //haha
复制代码

自定义深拷贝

简单写了一下

function deepCopy (obj) {
    let newObj = {}
    for (let k in obj) {
        if (typeof k != 'object' || obj[k] == null) {
            newObj[k] = obj[k]
        } else {
            deepCopy(obj[k])
        }
    }
    return newObj
}

let obj = {
    a: 1,
    b: 2,
    c: function () {
        return false
    },
    d: undefined,
    e: {
        k1: 1,
        k2: 2
    },
    f: [1, 2],
    g: null
}
let newObj = deepCopy(obj)
obj.c = 2
console.log(newObj.c)
复制代码