js深拷贝和浅拷贝

浮沉随浪逝

已于 2022-08-25 20:25:50 修改

阅读量217

点赞数 1

文章标签： javascript 开发语言 ecmascript

于 2022-08-24 20:50:01 首次发布

本文链接：https://blog.csdn.net/qq_64207331/article/details/126511827

版权

本文详细介绍了JavaScript中的浅拷贝和深拷贝概念，通过实例展示了直接赋值、浅拷贝（使用for...in及展开运算符）以及深拷贝（递归实现和JSON方法）的实现方式。通过对复杂数据类型的拷贝，阐述了两种拷贝方式在内存管理和对象引用上的区别，帮助开发者更好地理解和应用这两种拷贝技术。

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

哈喽！大家好，我是小帅。今天分享的是深拷贝和浅拷贝！！！

首先你要明白什么是浅拷贝？什么是深拷贝？

浅拷贝：

只是增加了一个指针指向已存在的内存地址，如果原地址发生改变，那么浅拷贝出来的对象也会相应的改变

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存

深拷贝：

在计算机中开辟一块新的内存地址用于存放复制的对象

深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象

一.直接赋值

1.直接赋值：新变量只复制一份内存地址，指向堆内存中同一个对象

//直接赋值   
let arr1 = ["北京", "上海", "广州",["白云区","黄埔区"]]
let arr2 = arr1;
let arr2 = []



arr2[0] = "beijing"
console.log("arr2", arr2)
console.log("arr1", arr1)

二.浅拷贝

需要for in 来遍历话不多说直接上代码（想了解for in的可以去官网看一下，这里就不细说啦）


let arr1 = ["北京", "上海", "广州",["白云区","黄埔区"]]
let arr2 = arr1;

//浅复制   
for (var k in arr1) {
    arr2[k] = arr1[k]
}
arr2[0] = "beijing"
arr2[3][0]="baiyunqu"

// console.log("arr2", arr2)
// console.log("arr1", arr1)

展开运算符实现浅拷贝

    let obj1 = {
       uname: "张三",
       age: 21,
       school: { name: "积云教育", address: "海淀" }
     }
    let obj2 = { ...obj1 }

     obj2.uname = "李四"
     console.log("obj2", obj2)
     console.log("obj1", obj1)

    obj2.school.name = "jiyunjiaoyu"
     console.log("obj2", obj2)
     console.log("obj1", obj1)

    //数组使用展开运算符
     var arr1 = ["北京", "上海", "广州", ["黄埔", "白云"]]
     var arr2 = [...arr1]

     arr2.push("深圳")
     console.log("arr2", arr2)
     console.log("arr1", arr1)


     arr2[3][0] = "huangpu"
    console.log("arr2", arr2)
     console.log("arr1", arr1)

三.深拷贝

这里先用for in 实现后边会用递归来实现勿要心急！！！

 var obj1 = {
        uname: '张三',
        age: 27,
        school: {
            name: '积云教育',
            address: '北京'
        },
        say: ['吃饭', '睡觉', '打豆豆']
    }
    var obj2 = {}
    for (var k in obj1) {
        // 检测类型是不是复杂数据类型
        // 有数组先检测数组后检测对象
        if (obj1[k] instanceof Array) {
            // 开辟一块新空间
            obj2[k] = []
            for (var m in obj1[k]) {
                obj2[k][m] = obj1[k][m]
            }
        } else if (obj1[k] instanceof Object) {
            // 开辟一块新空间
            obj2[k] = {}
            for (var n in obj1[k]) {
                obj2[k][n] = obj1[k][n]
            }
        } else {
            // 简单数据类型
            obj2[k] = obj1[k]
        }

    }
    obj2.uname = '李四'
    obj2.school.name = '清华大学'
    obj2.say.push('小鬼子')
    console.log(obj1, '1');
    console.log(obj2, '2');

接下来是递归实现深拷贝

var arr1 = ['北京', '上海', '珠海', ['金陵', '临安', '余杭', {
        name: '王帅林',
        age: 27
    }], {
        name: '宁晒',
        age: 24
    }]

    var arr2 = []

    function lin(arr2, arr1) {

        // 遍历循环
        for (k in arr1) {
            // 先判断类型是否是数组
            if (arr1[k] instanceof Array) {

                // 如果是开辟新数组
                arr2[k] = []

                //   递归调用
                lin(arr2[k], arr1[k])

                // 再判断类型是否是对象
            } else if (arr1[k] instanceof Object) {

                // 如果是开辟新对象
                arr2[k] = {}

                //   递归调用
                lin(arr2[k], arr1[k])

                // 如果是简单数据类型就直接赋值
            } else {
                arr2[k] = arr1[k]
            }
        }
    }
    lin(arr2, arr1)
    arr2[3][3].name = '蜀国'
    console.log(arr2, 'arr2');
    console.log(arr1, 'arr1');

JSON函数实现深拷贝

     let obj1 = { uname: "张三", age: 21 }

     let result = JSON.stringify(obj1)
     result = JSON.parse(result)
     let obj2 = JSON.parse(JSON.stringify(obj1))


     obj2.uname = "李四"
     console.log("obj2", obj2)
     console.log("obj1", obj1)