js中的深浅拷贝理解

最新推荐文章于 2021-07-05 20:20:34 发布

爱早睡的老林

最新推荐文章于 2021-07-05 20:20:34 发布

阅读量180

点赞数

CC 4.0 BY-SA版权

分类专栏：原生js

本文链接：https://blog.youkuaiyun.com/m0_38005587/article/details/84799455

原生js 专栏收录该内容

13 篇文章

订阅专栏

本文深入探讨了浅拷贝与深拷贝的概念，通过实例解释了两者之间的区别。浅拷贝仅复制对象的第一层属性，而深拷贝则会递归地复制所有层级的属性，确保新旧对象完全独立。文章还提供了实现这两种拷贝方法的代码示例，并介绍了使用Object.assign()和JSON.parse(JSON.stringify())进行快速拷贝的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浅拷贝，通俗理解就是拷贝一层，例如{a:1,b:{c:1,d:2}},那么拷贝的是a，b指向的内存的位置；由于b指向的是一个对象的引用，那么，我对原来对象中的c属性进行修改，也会影响到新对象属性的值；但是修改原来对象中a的值，就不会影响后新对象a的值；

那么如何实现浅拷贝呢？

  function simpleClone(obj,newObj) {
            if(typeof obj!=="object"){
                return ;
            }
            for(let prop in obj){
                // 如果传入的对象有该属性并且不是继承的
                if(obj.hasOwnProperty(prop))
                {
                    newObj[prop] = obj[prop];
                }                
            }
            return newObj;
        }

那么如何实现深拷贝呢？

 let arr = {a:1,b:2,c:3,d:4,e:{ad:1,ac:2},f:[1,2]};
function deepClone(obj,newObj={}) {
           for(let prop in obj){
               if(obj.hasOwnProperty(prop)){
                   // 判断遍历出来的object[prop]是否是object类型,并且不为空
                   if(typeof obj[prop]==="object" && obj[prop]!==null){
                       console.log(obj[prop].constructor.name);
                       newObj[prop] = obj[prop].constructor.name === "Array"? []:{};
                       deepClone(obj[prop],newObj[prop])
                   }else{
                       newObj[prop] = obj[prop];
                   }
               }
           }
           return newObj
        }
            let arr3 = deepClone(arr);
            console.log(arr3 === arr);
            arr.e.ad = 99;
            console.log(arr3.e.ad)//=>1;

其实还有简便的方法：

浅拷贝：Object.assign（obj，obj1，obj2）

深拷贝：JSON.parse(JSON.stringfy(obj))，方便又快捷，只是遇到事件时比较难处理；

先学难的再学简单的，提高自己的代码能力！