JavaScript——深拷贝和浅拷贝

发布时间 2024-01-07 23:59:23作者: 周祥宇

浅克隆有别于直接赋值,而是克隆原始对象中的属性并填充到一个新的对象中。克隆前后的两个对象中的属性能够共享数据但不共享内存,从而达到修改其中一个对象的属性值不会影响到另一个对象的属性。还有一点要强调,克隆除了克隆数据,还得克隆类型

不废话了,直接写浅克隆的逻辑:

function shallowClone(target) {
    if (typeof target !== 'object' || target === null) {
        return target
    }

    const result = Array.isArray(target) ? [] : {}

    for (let key in target) {
        result[key] = target[key]
    }

    return result
}

深克隆是不仅要克隆原始对象中的属性,还要递归地对原始对象中的每个属性执行一次深克隆操作,从而实现克隆前后的两个对象完全不具有任何关联。同样,深克隆也会像浅克隆那样既克隆数据又克隆类型

不废话,直接展示深克隆逻辑:

function deepClone(target) {
    // cache是实现克隆循环引用的关键
    const cache = new WeakMap()

    function _deepClone(target) {
        if (typeof target !== 'object' || target === null) {
            return target
        }

        if (cache.has(target)) {
            return cache.get(target)
        }

        const result = Array.isArray(target) ? [] : {}

        cache.set(target, result)
        Object.setPrototypeOf(result, Object.getPrototypeOf(target))

        for (let key in target) {
            if (target.hasOwnProperty(key)) {
                result[key] = _deepClone(target[key])
            }
        }

        return result
    }

    return _deepClone(target)
}

欢迎评论,欢迎纠错,我们一起成长!
xyzh.work@foxmail.com