JavaScript深拷贝

最新推荐文章于 2023-01-08 14:32:57 发布

softly顾先生

最新推荐文章于 2023-01-08 14:32:57 发布

阅读量232

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_49639325/article/details/117201201

本文探讨了深拷贝的概念，解释了为何在项目中需要它，以及通过JSON.stringify和Object.assign两种方式实现深拷贝的实例。重点介绍了递归深拷贝在复杂对象中的应用，确保数据独立性避免引用冲突。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

基本数据类型：number, string, boolean, null, undefined, symbol，直接存储在栈中的数据。

引用数据类型：object, array, function，将该对象引用地址存储在栈中，然后对象里面的数据存放在堆中。

深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。

什么是深拷贝，我们为什么使用深拷贝

我们在实际的项目中，肯定不能让每个对象的值都指向同一个堆内存，这样的话不便于我们做操作，所以自然而然的诞生了深拷贝

深拷贝作用在引用类型上！例如：Object，Array

深拷贝不会拷贝引用类型的引用，而是将引用类型的值全部拷贝一份，形成一个新的引用类型，这样就不会发生引用错乱的问题，使得我们可以多次使用同样的数据，而不用担心数据之间会起冲突

深拷贝的实现

JSON.stringify()以及JSON.parse()

var obj1 = {
    a: 1,
    b: 2,
    c: 3
}
var objString = JSON.stringify(obj1);
var obj2 = JSON.parse(objString);
obj2.a = 5;
console.log(obj1.a);  // 1
console.log(obj2.a); // 5

Object.assign(target, source)

 var obj1 = {
    a: 1,
    b: 2,
    c: 3
}
var obj2 = Object.assign({}, obj1);
obj2.b = 5;
console.log(obj1.b); // 2
console.log(obj2.b); // 5

递归拷贝

// 定义一个深拷贝函数  接收目标target参数
function deepClone(target) {
    // 定义一个变量
    let result;
    // 如果当前需要深拷贝的是一个对象的话
    if (typeof target === 'object') {
    // 如果是一个数组的话
        if (Array.isArray(target)) {
            result = []; // 将result赋值为一个数组，并且执行遍历
            for (let i in target) {
                // 递归克隆数组中的每一项
                result.push(deepClone(target[i]))
            }
         // 判断如果当前的值是null的话；直接赋值为null
        } else if(target===null) {
            result = null;
         // 判断如果当前的值是一个RegExp对象的话，直接赋值    
        } else if(target.constructor===RegExp){
            result = target;
        }else {
         // 否则是普通对象，直接for in循环，递归赋值对象的所有值
            result = {};
            for (let i in target) {
                result[i] = deepClone(target[i]);
            }
        }
     // 如果不是对象的话，就是基本数据类型，那么直接赋值
    } else {
        result = target;
    }
     // 返回最终结果
    return result;
}

看一下效果

    let obj1 = {
        a: {
            c: /a/,
            d: undefined,
            b: null
        },
        b: function () {
            console.log(this.a)
        },
        c: [
            {
                a: 'c',
                b: /b/,
                c: undefined
            },
            'a',
            3
        ]
    }
    let obj2 = deepClone(obj1);
        console.log(obj2);