javascript - 求教js的深拷贝解决循环引用的问题？

Question

function cloneDeep(obj: any, map = new WeakMap()): any{
    if(typeof obj !== 'object'|| obj == null) return obj
    // 避免循环引用
    const objFromMap = map.get(obj)
    if(objFromMap) return objFromMap

    let res:any = {} 
    map.set(obj, res)
    
    // Map
    if(obj instanceof Map){
        res = new Map()
        obj.forEach((value,key)=> {
            const key1 = cloneDeep(key, map)
            const value1 = cloneDeep(value, map)
            res.set(key1, value1)
        })
    }
    
    // Set
    if(obj instanceof Set){
        res = new Set()
        obj.forEach(value=> {
            res.add(cloneDeep(value, map))
        })
    }
    
    // Array
    if(obj instanceof Array){
        res = obj.map(value => cloneDeep(value, map))
    }
    
    // Object
    for(const key in obj){
        res[key] = cloneDeep(obj[key], map)
    }
        
    return res
}

这个深拷贝的代码，解决了循环引用的问题，但是我没看明白是怎么解决的循环引用？
当递归遇到引用了自己的属性的时候，WeakMap返回的不是空对象吗？不应该是指向自己啊。求指教

Answer 1

先把 js 的引用类型和基础类型的区别理解透彻之后，这个问题你自己就能解释了。

简单说就是 res[key] = xxx 这种语句，会对 res 进行修改，这个修改也会动态反馈到 WeakMap 中的那个对象中去，因为它们所储存的都是该对象的引用。

明白这点之后其实逻辑就很清晰了，深克隆会递归遍历所有子属性，如果存在循环引用，比如:

const a = {}
const b = {}
a.b = b
b.a = a

cloneDeep(a)

这时候就会发生无限循环 b => a => b => a => ...，所以要用一个中间变量来记录是否已经对当前属性进行过深拷贝了，在这种情况下，因为已经深拷贝过该属性，直接返回拷贝过后的该属性（也是引用类型）即可。

Answer 2

循环引用解决方案：
使用一个map记录已经读取的值，避免下次再次读取；
例如对象：a = {b:{c:{d:{a}}}}
拷贝读取以上循环引用的数据，
如果不使用map记录已经拷贝的；以上的拷贝顺序：b,c,d,a,b,c,d,a,b,c····一致循环下去；
打断上面的循环就是使用map记录以及拷贝的，从而终止程序；可以看到上面重复b的时候就可以终止了；

你程序中的空对象相当于一个flag，也就是true，起到了一个判断作用，就是判断是否已经拷贝过了;
你程序中的空对象，只需要递归的将值拷贝进去 res 这个对象中，最终返回这个对象就是你的拷贝结果；

你的程序和上面的逻辑类似：

function cloneDeep(obj: any, map = new WeakMap()): any{
    if(typeof obj !== 'object'|| obj == null) return obj
    // 避免循环引用
// 这里就是记录的map,从而打断循环
    const objFromMap = map.get(obj)
    if(objFromMap) return objFromMap

    let res:any = {} 
    map.set(obj, res)
    
    // Map
    if(obj instanceof Map){
        res = new Map()
        obj.forEach((value,key)=> {
            const key1 = cloneDeep(key, map)
            const value1 = cloneDeep(value, map)
            res.set(key1, value1)
        })
    }
    
    // Set
    if(obj instanceof Set){
        res = new Set()
        obj.forEach(value=> {
            res.add(cloneDeep(value, map))
        })
    }
    
    // Array
    if(obj instanceof Array){
        res = obj.map(value => cloneDeep(value, map))
    }
    
    // Object
    for(const key in obj){
//
        res[key] = cloneDeep(obj[key], map)
    }
        
    return res
}