美文网首页
JavaScript实现深拷贝

JavaScript实现深拷贝

作者: pengANDpeng | 来源:发表于2021-12-09 14:32 被阅读0次
const wm = new WeakMap();//用于解决循环引用,避免陷入死循环

function deepClone(target) {
    let result;
    if (typeof target === 'object') {
        // null
        if (target === null) {
            result = target;
        }
        // Array
        else if (Array.isArray(target)) {
            result = [];
            target.forEach(item => result.push(deepClone(item)));
        }
        // Date
        else if (target instanceof Date) {
            result = new Date(target);
        }
        // regular expression
        else if (target instanceof RegExp) {
            result = new RegExp(target);
        } else {
            // detect circular reference
            // 用WeakMap的key保存原对象的引用记录, value是对应的深拷贝对象的引用
            // 例如: a:{b:{c:{d: null}}}, d=a, a 的深拷贝对象是 copy, 则 weakmap 里保存一条 a->copy 记录
            //     当递归拷贝到d, 发现d指向a,而a已经存在于weakmap,则让新d指向copy
            if (wm.has(target)) {
                result = wm.get(target);
            } else {
                result = {};
                wm.set(target, result);
                for (let prop in target) {
                    result[prop] = deepClone(target[prop]);
                }
            }
        }
    } else {
        result = target;
    }
    return result;
}

(function () {
    const a = {
        num: 123,
        say() {
            return 'Hello';
        },
        arr: [1, 2, [4, {name: 'Jack'}]],
        n: null,
        un: undefined,
        d: new Date(),
        reg: /[a-z0-9]+/,
        b: {
            c: {
                d: null
            }
        }
    };
    a.b.c.d = a;
    const copy = deepClone(a);
    console.log(copy)
    console.log(copy === a) // false
    console.log(copy.say()); // Hello
    console.log(copy.arr);
    console.log(copy.arr[2][1] === a.arr[2][1]); // false
    console.log(copy.b.c.d === copy) // true,循环引用得到复制
})();
``

相关文章

  • Javascript实现深拷贝

    Type函数 首先我们要实现一个getType函数对元素进行类型判断: 深拷贝(DeepClone) 对于一个引用...

  • JavaScript深拷贝实现

    什么是浅拷贝,什么是深拷贝? 什么是浅拷贝关于浅拷贝的概念,我在网上看到一种说法,直接上代码。 但是我个人认为,上...

  • javascript 实现深拷贝

  • JavaScript 实现深拷贝

    浅拷贝和深拷贝的区别: 基础类型两者一致,如果是引用类型,则不同。浅复制会导致复制前后,指向同一块内存地址,复制前...

  • JavaScript实现深拷贝

  • 浅拷贝和深拷贝

    本文参考:JavaScript中的浅拷贝和深拷贝js 深拷贝 vs 浅拷贝深入剖析 JavaScript 的深复制...

  • iOS基础知识点(网络摘抄)

    1.父类实现深拷贝时,子类如何实现深拷贝。父类没有实现深拷贝时,子类如何实现深拷贝? 深拷贝同浅拷贝的区别:...

  • 深入理解JavaScript中的堆与栈 、浅拷贝与深拷贝

    JavaScript中的浅拷贝与深拷贝 学了这么长时间的JavaScript想必大家对浅拷贝和深拷贝还不太熟悉吧,...

  • 深拷贝、浅拷贝

    父类实现深拷贝时,子类如何实现深度拷贝。父类没有实现深拷贝时,子类如何实现深度拷贝。 深拷贝同浅拷贝的区别:浅拷贝...

  • 面试题整理

    父类实现深拷贝时,子类如何实现深度拷贝。父类没有实现深拷贝时,子类如何实现深度拷贝。 深拷贝同浅拷贝的区别:浅拷贝...

网友评论

      本文标题:JavaScript实现深拷贝

      本文链接:https://www.haomeiwen.com/subject/zgeffrtx.html