javascript 深拷贝浅拷贝

1.浅拷贝

<!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">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script>
        window.onload = function () {
            // 浅拷贝只是拷贝一层，更深层次对象级别的只是拷贝地址来引用。
            // 深拷贝 拷贝多层，每一级别的数据都会拷贝。


            // 浅拷贝
            var obj = {
                id:1,
                name:'andy',
                msg:{
                    age:18
                }
            };
            var o = {};
            for (var k in obj) {
                // k 是属性名·  obj[k] 属性值
                o[k] = obj[k];
            }
            console.log(o);// 如图一所示，深层的 msg 的确被输出了，不过 拷贝的只是msg的地址， 如果修改 o.msg 那么 obj.msg 也会被修改  （因为他们地址相同）
            o.msg.age = 20;// 在加载时已经被改为 20 了，先加载，后输出。所以上面和下面的代码都输出 20
            console.log(obj);
            console.log('--------------------分割线----------------------->')
            // 浅拷贝还有一种方法：
            Object.assign(o,obj);
            console.log(o);
            o.msg.age = 20;
            console.log(obj);// 与上面输出一样
        }
    </script>
</head>
<body>

</body>
</html>

2.深拷贝

<!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">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script>
        window.onload = function () {
            // 深拷贝 拷贝多层，每一级别的数据都会拷贝。
            var obj = {
                id:1,
                name:'andy',
                msg:{
                    age:18
                },
                color:['pink','red']
            };
            var o = {};
            // 封装函数
            function deepCopy(newobj,oldobj) {
                for (var k in oldobj){
                    // 判断我们的属性值属于哪一种类型
                    // 1. 获取属性值 oldobj[k]
                    var item = oldobj[k];
                    // 2. 判断这个值是否数组
                    if (item instanceof Array) {//必须把这一行放在 Object 前面，因为数组属于Object，（会将数组判断为Object，导致无法判断数组类型的数据）
                        newobj[k] = [];
                        deepCopy(newobj[k],item)
                    } else if (item instanceof Object) {
                        // 3. 判断这个值是否是对象
                        newobj[k] = {};
                        deepCopy(newobj[k],item)
                    } else {
                        // 4. 属于简单数据类型
                        newobj[k] = item;
                    }
                }
            }
            deepCopy(o,obj);
            console.log(o);
            o.msg.age = 20;//只会改变 o 中的 age ，不会对obj中的age产生影响
        }
    </script>
</head>
<body>

</body>
</html>

javascript 深拷贝 浅拷贝

1.浅拷贝

2.深拷贝

猜你喜欢

javascript 深拷贝浅拷贝