十分钟学会JavaScript深克隆与浅克隆

什么是深克隆与浅克隆

浅克隆，即只克隆目标对象的第一层数据，如果对象的某些属性值又是引用类型值，则不进一步克隆它们，只是传递它们的引用。

与浅克隆对应的就是深克隆，即克隆目标对象的全貌，不论对象的属性值是否是引用类型值，都能将他们实现克隆。

能快速实现浅克隆的方法如下：

arr1 = [...arr]
arr1 = arr.slice()
arr1 = arr.concat()

obj1 = Object.assign({}, obj)

比如，以上的Object.assign()方法只克隆第一层，属于浅克隆（即当对象中只有一级属性，没有二级属性的时候，此方法等同于深拷贝；但是对象中有对象的时候，此方法在二级属性以后只能传递它们的引用）

能快速实现深克隆的方法如下：

obj1 = JSON.parse(JSON.stringify(obj))

JSON.parse(JSON.stringify(obj)) 可以实现深克隆，但也有弊端：正则函数、日期会有问题，会变成空对象或字符串。

手写深克隆

/**
 * 深克隆
 * @param {Object} obj 要克隆的对象
 */
function deepClone(obj) {
    if (typeof obj !== 'object' || obj == null) {
        // obj 是 null ，或者不是对象和数组，直接返回
        return obj
    }

    // 初始化返回结果
    let result
    if (obj instanceof Array) {
        result = []
    } else {
        result = {}
    }

    for (let key in obj) {
        // 保证 key 不是原型的属性
        if (obj.hasOwnProperty(key)) {
            // 递归调用
            result[key] = deepClone(obj[key])
        }
    }

    // 返回结果
    return result
}

注：以上加hasOwnProperty()是因为使用for..in时会遍历对象原型中的自定义属性和方法，示例如下：

Array.prototype.hello = function () {}
var arr = []
for (var p in arr) {
    console.log(p) // hello
}