0
点赞
收藏
分享

微信扫一扫

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

邯唐情感 2022-04-21 阅读 61
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
}
举报

相关推荐

0 条评论