[JavaScript知识库] 深拷贝详细解析

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 深拷贝详细解析 -> 正文阅读

[JavaScript知识库]深拷贝详细解析

`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)