JS：浅拷贝、深拷贝的理解_js中的深拷贝跟浅拷贝的意思-CSDN博客

本文链接：https://blog.csdn.net/weixin_48475463/article/details/122825908

本文详细介绍了JavaScript中的浅拷贝和深拷贝概念，包括浅拷贝如何导致对象副本间的相互影响，以及两种深拷贝方法的实现：JSON.parse(JSON.stringify())和递归拷贝。通过实例展示了深拷贝如何确保对象副本的独立性，避免了修改副本对原对象的影响。同时，指出了JSON.parse(JSON.stringify())方法在处理包含函数和undefined值时的局限性。

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

1. 浅拷贝 = 拷贝地址修改副本会相互影响

    <script>
        // 1.浅拷贝 = 拷贝地址 修改副本会相互影响
        var liqin = {
            name: "李沁",
            age: 24,
            married: true,
            children: []
        }

        var husha = {
            name: "胡莎",
            age: 18,
            married: false,
        }
        // 浅拷贝 拷贝的是李沁的地址 拷贝即真身
        var lbw = liqin
        // 对浅拷贝的修改伤及真身
        lbw.name = "卢本伟"
        console.log(liqin.name); //卢本伟
    </script>

2. 深拷贝 = 递归拷贝所有的key-value到副本中

所有副本完全独立
修改不影响其它副本

第一种深拷贝

弊端：JSON版深拷贝会丢失值为undefined和function的属性

    <script>
        // 2.深拷贝 = 递归拷贝所有的key-value到副本中
        // 所有副本完全独立
        // 修改不影响其它副本
        var liqin = {
            name: "李小琴",
            age: 54,
            married: true,
            children: {
                name: "李佳",
                age: 23,
                girlfriend: {
                    name: "张艺华",
                    age: 20,
                    favoriteFood: "苹果"
                }
            },
            sayHello: function () {
                console.log("大家好，我是李小琴");
            }
        }

        // 第一种深拷贝
        // 弊端：JSON版深拷贝会丢失值为undefined和function的属性
        var liqinCopy = JSON.parse(JSON.stringify(liqin));
        console.log(liqinCopy);
    </script>

第二种递归拷贝key-value

    <script>
        // 2.深拷贝 = 递归拷贝所有的key-value到副本中
        // 所有副本完全独立
        // 修改不影响其它副本
        var liqin = {
            name: "李小琴",
            age: 54,
            married: true,
            children: {
                name: "李佳",
                age: 23,
                girlfriend: {
                    name: "张艺华",
                    age: 20,
                    favoriteFood: "苹果"
                }
            },
            sayHello: function () {
                console.log("大家好，我是李小琴");
            }
        }

        // 第二种递归拷贝key-value
        function deepCopy(obj) {
            var copy = {}
            for (const key in obj) {
                var value = obj[key]

                //如果value为基本数据类型 直接将值拷贝
                if (typeof (value) != "object") {
                    copy[key] = value
                }

                // 如果value是一个对象 勒令该子对象继续去【深拷贝自己】
                // 深拷贝的结果再丢给克隆人
                else{
                    copy[key] = deepCopy(value)
                }
            }
            return copy
        }

        var liqinCopy = deepCopy(liqin)
        console.log(liqinCopy);

        // 测试
        liqinCopy.children.girlfriend.name = "胡莎"
        console.log(liqinCopy);
    </script>