深拷贝详细解析

深拷贝与循环引用解决

予倾

已于 2022-04-24 16:23:13 修改

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： javascript

于 2022-04-23 21:18:00 首次发布

本文链接：https://blog.csdn.net/QZ9420/article/details/124370318

vue 专栏收录该内容

56 篇文章

订阅专栏

博客探讨了JavaScript中深拷贝对象的问题，包括JSON.parse(JSON.stringify())方法的局限性，如无法处理循环引用和函数。提出了一个使用Map实现的深拷贝函数，能够处理循环引用和保留原始对象的函数。示例展示了如何处理包含循环引用和函数的对象，并进行了拷贝前后的对比。

`JSON.parse(JSON.stringify())`

循环引用会报错，不能拷贝函数

 function deepClone1(target) {
    const result = JSON.parse(JSON.stringify(target))
    return result
}

 const obj = {
     a: 1,
     b: ['e', 'f', 'g'],
     c: {h: 20},
     d: function() {}
 }
 // 循环引用
 obj.b.push(obj.c)
 obj.c.j = obj.b
 // 不能拷贝函数
 const result = deepClone1(obj)
 console.log(obj)
 console.log(result)

究极解决方案：


function deepClone2(target, map = new Map()) {
    if(typeof target === 'object' && target !== null) {
        // 克隆数据之前，进行判断，数据之前是否客隆过
        let cache = map.get(target)
        if(cache) {
            return cache
        }
        // 判断目标数据的类型
        let isArray = Array.isArray(target)
        // 创建一个容器
        const result = Array.isArray(target) ? [] : {}
        map.set(target, result)
        // 如果目标为数组
        if(isArray) {
            target.forEach((item, index) => {
                result[index] = deepClone2(item, map)
            })
        } else {
            Object.keys(target).forEach(key => {
                result[key] = deepClone2(target[key], map)
            })
        }
        return result
    } else {
        return target
    }
}

 const obj = {
     a: 1,
     b: ['e', 'f', 'g'],
     c: {h: 20},
     d: function() {}
 }
 // 循环引用
 obj.b.push(obj.c)
 obj.c.j = obj.b
 const result = deepClone2(obj)
 console.log(obj)
 console.log(result)