js中深拷贝的概念，作用和解决方法

最新推荐文章于 2024-03-05 00:45:00 发布

bug不停生命不止

最新推荐文章于 2024-03-05 00:45:00 发布

阅读量344

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_44993760/article/details/126195762

版权

直接上理解

深拷贝是如何实现的？
深拷贝是指创建的新对象不会影响旧对象内的属性值
1.首先我们要用到递归函数
2.当我们对象内的值都是简单数据类型时直接进行赋值
3.当我们遇到数组和对象时，可以再次调用函数，利用递归去拷贝数组和对象内的每个值
4.顺序的必须先数组后对象因为数组也是对象

const obj = {
            uname: 'pink',
            age: 18,
            hobby: ['乒乓球', '羽毛球'],
            family: { baby: '小孩' }
        }
        const o = {}
        function deepCopy(newObj, oldObj) {
            for (let k in oldObj) {
                //处理数组的问题
                // 当oldObj[k] 为数组时 执行
                if (oldObj[k] instanceof Array) {
                    newObj[k] = [];
                    deepCopy(newObj[k], oldObj[k])
                    // 简单数据类型 直接复制属性值
                } else {
                    newObj[k] = oldObj[k]
                }
            }
        }
        // 验证结果
        deepCopy(o, obj)
        console.log(o);
        o.age = 22
        o.hobby[0] = '篮球'
        console.log(obj);

// 执行过程解释   简单数据类型会直接执行else 内的执行语句  当碰到数组时以下注释详解
        // function deepCopy([], ['乒乓球', '羽毛球']) {
        //     for (let k in ['乒乓球', '羽毛球']) {                     //此时已经变成遍历数组了   k为索引号
        //         //处理数组的问题
        //         // 当oldObj[k] 为数组时 执行
        //         if (oldObj[k] instanceof Array) {              // 此时oldObj[k] === oldObj[k][k] === ['乒乓球', '羽毛球'][0]   ===  '乒乓球'  不是数组跳过
        //             newObj[k] = [];
        //             deepCopy(newObj[k], oldObj[k])         //再次调用deepCopy(newObj[k], oldObj[k])  传入实参发生改变
        //             // 简单数据类型 直接复制属性值
        //         } else {
        //             newObj[k] = oldObj[k]          // newObj[0] = '乒乓球'
        //         }
        //     }
        // }
        // deepCopy(o, obj)