• JS 深浅拷贝详解

    浅拷贝

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

    原生 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
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    请添加图片描述

    通过上述代码，我们可以看到把 对象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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    得到的结果跟上图一样

    总结：

    浅拷贝其实就把 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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52

    请添加图片描述

    总结：

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

  • 相关阅读:
    用springsecurity去代替拦截器
    html实现好看的导航主页(附源码)
    Hive基础5
    Golang+etcd的分布式锁
    Linux - grep命令详解
    【大数据分析】图的连通度（门格尔定理）
    分类之混淆矩阵(Confusion Matrix)
    从零手搓一个【消息队列】实现消息在文件中的存储
    vue安装使用swiper
    1451_TC275 DataSheet阅读笔记12_时钟、温度以及供电
  • 原文地址：https://blog.csdn.net/huangdj321/article/details/126586846