JS深拷贝和浅拷贝

JavaScript 中的浅拷贝与深拷贝原理及实现

最新推荐文章于 2022-10-28 17:10:28 发布

原创最新推荐文章于 2022-10-28 17:10:28 发布 · 3.6k 阅读

17 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了JavaScript中的浅拷贝和深拷贝概念，包括它们的区别以及实现方式。通过示例代码展示了如何使用for...in循环和Object.assign实现浅拷贝，以及如何通过递归函数实现深拷贝。文章强调了浅拷贝在修改副本时会影响原始对象，而深拷贝则不会。同时，提供了学习资源链接供读者深入研究。

浅拷贝只是拷贝一层,更深层次对象级别的只拷贝引用。
浅拷贝是拷贝的内存地址，使新对象指向拷贝对象的内存地址。深拷贝是重新开辟一块内存空间，用来存放sources对象的值。
浅拷贝可以用for in 来实现，也可用es6新增方法Object.assign(target,...sources) 来实现，target为目标对象，sources为原对象(要进行拷贝的对象)
浅拷贝后改变target中的值，sources也会进行改变。深拷贝不会这样
深拷贝可以基于函数封装的方法来进行实现。

<body>
    <script>
        var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        };
        var o = {};
        var j = {};
        function shallowCopy(newobj, oldobj) {
            for(var k in oldobj){
                newobj[k] = old[k];
            }
        }
        shallowCopy(o, obj);
        console.log('o',o)
        o.id = 2;
        console.log('obj',obj)
        //封装深拷贝函数
        function deepCopy(newobj, oldobj) {
            for (var k in oldobj) {
                //判断属性值属于那种数据类型
                //1.获取属性值 old[k]
                var item = oldobj[k];
                //2. 判断这个值是否是数组
                //必须先判断是否是Array 因为Array 也是Object
                if(item instanceof Array){
                    newobj[k] = [];
                    deepCopy(newobj[k], item);
                }else if(item instanceof Object){
                    //3.判断这个值是否是对象
                    newobj[k] = {};
                    deepCopy(newobj[k], item);
                } else {
                    //4.属于简单数据类型
                    newobj[k] = item;
                }
            }
        }
        deepCopy(j,obj);
        console.log('j',j);
        j.id = 4;
        console.log('obj',obj);
    </script>
</body>

存在不足之处可随时补充。

学习地址