JS 深浅拷贝详解

最新推荐文章于 2024-04-04 09:50:11 发布

Holyzq

最新推荐文章于 2024-04-04 09:50:11 发布

阅读量422

点赞数 1

分类专栏： js 文章标签： javascript 前端

本文链接：https://blog.csdn.net/huangdj321/article/details/126586846

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

浅拷贝

浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用地址

原生 js 实现浅拷贝

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<script>
    // 1、定义一个对象 obj1
    var obj1 = {
        id: 1,
        name: 'test',
        info: {
            sex: '男',
            age: 18,
        }
    }

    // 2、定义另外一个对象 obj2
    var obj2 = {}

    // 3、通过 for 循环把 obj1 拷贝一份给 obj2
    for (var k in obj1) {
        // k是属性名  obj1[k]是属性值
        obj2[k] = obj1[k]
    }
    console.log(obj2)
    
    // 4、修改 obj2 的 info 里面的 age
    obj2.info.age = 20
    
    console.log(obj1)
</script>
</body>
</html>

请添加图片描述

通过上述代码，我们可以看到把 对象1 拷贝了一份赋值给了 对象2，当修改了 对象2 的属性值后，对象1 的值也一并跟着修改了。

这是因为浅拷贝只是把对象的内存地址拷贝了一份赋值给了新对象，地址相同，当修改了新对象的值，原对象的值也跟着修改了。

ES6 语法糖实现浅拷贝

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<script>
    // 1、定义一个对象 obj1
    var obj1 = {
        id: 1,
        name: 'test',
        info: {
            sex: '男',
            age: 18,
        }
    }

    // 2、定义另外一个对象 obj2
    var obj2 = {}

    // 3、通过 Object.assign 函数把 obj1 拷贝一份给 obj2
    Object.assign(obj2, obj1)
    // 4、修改 obj2 的属性值
    obj2.info.age = 30
    
    console.log(obj1)
    console.log(obj2)
</script>
</body>
</html>

得到的结果跟上图一样

总结：

浅拷贝其实就把 a 对象复制了一份给了 b 对象，当修改了 b 对象的某个元素的值后，a 对象对应的元素的值一并跟着修改。因为浅拷贝只拷贝了对象最外层的数据，而更深层次的对象只拷贝了对象的内存地址。

深拷贝

深拷贝是拷贝多层，每一级别的数据都会拷贝

思考：假如一个对象里面既有对象又有数组，该如何实现数据的拷贝呢？

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<script>
    // 1、定义一个对象 obj1
    var obj1 = {
        id: 1,
        name: 'test',
        info: {
            sex: '男',
            age: 18,
        },
        color: ['pink', 'blue']
    }

    // 2、定义另外一个对象 obj2
    var obj2 = {}

    // 3、封装函数
    function deepCopy(newObj, oldObj) {
        for (var k in oldObj) {
            // 判断原对象的属性值属于哪种数据类型
            // 3.1 获取属性值 oldObj[k]
            var item = oldObj[k]
            // 3.2 判断这个值是否是数组
            if (item instanceof Array) {
                newObj[k] = []
                deepCopy(newObj[k], item)
            } else if(item instanceof Object) {
                // 3.3 判断这个值是否是对象
                newObj[k] = {}
                deepCopy(newObj[k], item)
            } else {
                // 3.4 属于简单数据类型
                newObj[k] = item
            }
        }
    }

    // 4、调用函数
    deepCopy(obj2, obj1)
    // 5、修改 obj2 的属性值
    obj2.info.age = 30

    console.log(obj1)
    console.log(obj2)
</script>
</body>
</html>

请添加图片描述

总结：

深拷贝其实就是把 a 对象复制一份给 b 对象，当修改了 b 对象的某个属性值后，a 对象对应的属性值并不受影响，都是单独的。

Holyzq

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 深浅拷贝详解

这是因为浅拷贝只是把对象的内存地址拷贝了一份赋值给了新对象，地址相同，当修改了新对象的值，原对象的值也跟着修改了。因为浅拷贝只拷贝了对象最外层的数据，而更深层次的对象只拷贝了对象的内存地址。// 4、修改 obj2 的 info 里面的 age。// 判断原对象的属性值属于哪种数据类型。// 2、定义另外一个对象 obj2。// 2、定义另外一个对象 obj2。// 2、定义另外一个对象 obj2。// 4、修改 obj2 的属性值。// 5、修改 obj2 的属性值。// 1、定义一个对象 obj1。..
复制链接

扫一扫

专栏目录