JS 面向对象增删改查 for循环遍历对象属性 clone浅克隆深克隆_js面向对象程序设计物料类别的增删改查等维护功能-优快云博客

本文链接：https://blog.youkuaiyun.com/HandsomeDanielWu/article/details/126069832

本文探讨了JavaScript中的对象复制问题，通过实例解释了浅克隆和深克隆的区别。浅克隆只复制了对象的表层属性，而深克隆则递归复制了包括数组和嵌套对象在内的所有属性，确保没有'藕断丝连'的现象。文中提供了深克隆的实现方法，展示了如何避免在复制过程中出现引用类型的问题。

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

遍历

克隆clone

<body>
    <script>
        var obj1 = {
            a: 1,
            b: 2,
            c: [44, 55, 66]
        };

        // 实现浅克隆
        var obj2 = {};
        for (var k in obj1) {
            // 每遍历一个k属性，就给obj2也添加一个同名的k属性
            // 值和obj1的k属性值相同
            obj2[k] = obj1[k];
        }

        // 为什么叫浅克隆呢？比如c属性的值是引用类型值，那么本质上obj1和obj2的c属性是内存中的同一个数组，并没有被克隆分开。
        obj1.c.push(77);
        console.log(obj2);                  // obj2的c属性这个数组也会被增加77数组
        console.log(obj1.c == obj2.c);      // true，true就证明了数组是同一个对象
    </script>
</body>

只克隆了表层，并没有克隆第二层的数组/对象，会出现‘藕断丝连‘现象

深克隆：不仅克隆了表层属性，还用递归克隆了数组里的属性，还用对象循环克隆完整对象。

<body>
    <script>
        var obj1 = {
            a: 1,
            b: 2,
            c: [33, 44, {
                m: 55,
                n: 66,
                p: [77, 88]
            }]
        };

        // 深克隆
        function deepClone(o) {
            // 要判断o是对象还是数组
            if (Array.isArray(o)) {
                // 数组
                var result = [];
                for (var i = 0; i < o.length; i++) {
                    result.push(deepClone(o[i]));
                }
            } else if (typeof o == 'object') {//数组的typeof也是object，所以这条判断语句不能写在上面
                // 对象
                var result = {};
                for (var k in o) {
                    result[k] = deepClone(o[k]);
                }
            } else {
                // 基本类型值
                var result = o;
            }
            return result;
        }

        
        var obj2 = deepClone(obj1);
        console.log(obj2);
        
        console.log(obj1.c == obj2.c);      // false
        
        obj1.c.push(99);
        console.log(obj2);                  // obj2不变的，因为没有“藕断丝连”的现象

        obj1.c[2].p.push(999);
        console.log(obj2);                  // obj2不变的，因为没有“藕断丝连”的现象
        
    </script>
</body>