js面向对象之对象深浅克隆_将一个复杂的对象转成浅浅的对象-CSDN博客

本文链接：https://blog.csdn.net/xuehaocyuyan/article/details/119736596

本文探讨JavaScript中对象的深浅克隆概念，通过实例展示了如何使用for...in循环实现浅克隆，以及如何通过递归实现深克隆。在讲解过程中，还通过代码示例演示了深浅克隆在处理引用类型属性时的区别，强调了深克隆在处理复杂对象结构时的重要性。

摘要由CSDN通过智能技术生成

js面向对象之对象深浅克隆

认识对象：键值对的集合
访问属性：打点或方括号，推荐使用方括号
修改、添加属性：对象.属性=XXX
删除属性：delete 对象.属性
对象的方法：对象的某个属性值是方法，则其也称为对象的方法
方法调用：打点调用
对象的遍历：for…in…循环 for(var k in obj){}——k是变量将会是键，obj是要遍历的对象
对象的深浅克隆：对象是引用类型值——不能用 var obj2=obj1这样的语法克隆一个对象，var obj2=obj1完全是同一个玩意；使用== 或===进行对象比较时比较的是它们是否为内存中的同一个对象
对象浅克隆：for…in…
对象深克隆：递归——函数内部调用自己

在这里插入代码片
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象的深浅克隆</title>
</head>

<body>
    <script>
        var obj1 = {
            'a': 1,
            'b': 2,
            'c': [1, 2, 3]
        }
        var obj2 = {
            'a': 1,
            'b': 2,
            'c': [1, 2, 3]
        }
        // obj1和obj2是不同的对象
        console.log(obj1 == obj2);

        // 对象没有克隆，直接将对象赋值给新变量
        var obj3 = obj1
        console.log(obj1 == obj3);

        // 克隆：不是同一个对象
        // 对象浅克隆：for...in.. ,属性值如果是引用类型的话还是没有克隆
        var obj4 = {}
        for (var k in obj1) {
            // 遍历将obj1的属性克隆给obj4
            obj4[k] = obj1[k]
        }
        console.log(obj4 == obj1);
        // 属性值是引用类型的没有被克隆
        obj1['c'].push(77)
        console.log(obj1, obj4);

        // 深克隆:递归
        var obj5 = {
            a: 20,
            b: 'hello',
            c: [1, 2, {
                name: 'hello',
                age: 20,
                sex: [11, 22]
            }]
        }
        // 函数,传入要克隆的对象
        function deepClone(o) {
            //判断传入的对象是数组还是对象，因为数组和对象遍历的写法不一样
            // 注意typeof 数组结果是对象 只要Array.isArray()才能判断是否是数组
            if (Array.isArray(o)) {
                // 数组类型
                var result = [];
                for (var i = 0; i < o.length; i++) {
                    // 将遍历到的每一条数组克隆给result
                    result.push(deepClone(o[i]))
                }
            } else if (typeof o == 'object') {
                // 对象类型
                var result = {}
                for (var k in o) {
                    // 将遍历到的每一个键值对克隆给result
                    result[k] = deepClone(o[k])
                }
            } else {
                // 其它类型
                result = o
            }
            // 最后返回深克隆所得对象
            return result
        }
        result = deepClone(obj5)
        console.log(result);
        obj5.c[2].sex.push(77)
        console.log(obj5);
        console.log(result);
    </script>
</body>

</html>