JavaScript深拷贝与浅拷贝的全面解析

🧑?🎓 个人主页：《爱蹦跶的大A阿》

🔥当前正在更新专栏：《VUE》?、《JavaScript保姆级教程》、《krpano》

??

目录

? 前言

? 正文

浅拷贝

对象的浅拷贝

数组的浅拷贝

浅拷贝的问题

?深拷贝

什么是深拷贝？

如何实现深拷贝？

方法一：使用JSON对象

方法二：递归拷贝

注意事项

? 结语

---

? 前言

???????浅拷贝和深拷贝的区别在于当对象中的属性是引用类型时,拷贝是引用的拷贝,还是引用所指向的对象的拷贝。

????????浅拷贝只复制对象和其属性的引用,而不复制属性指向的对象本身。因此源对象和拷贝对象引用同一个对象。改变其中一个会影响另一个。

????????深拷贝会递归复制整个对象及其属性,拷贝后的对象与原对象不共享内存,修改拷贝对象不会影响原对象。

????????拷贝是编程中常见的需求,JavaScript中有深拷贝和浅拷贝之分,理解二者差异很重要。本文将全面解析拷贝的实现方式。

?

? 正文

浅拷贝

对象的浅拷贝

????????浅拷贝会创建对象或数组的一份浅复制,只复制第一层的属性值,更深层次的对象仍保持引用关系。

对象的浅拷贝可以使用Object.assign():

let obj1 = {
  a: 1,
  b: {
    c: 2  
  }
};

let obj2 = Object.assign({}, obj1);

????????obj2只会拷贝obj1第一层的a属性值,而 deeper object b仍然指向同一个引用。

展开语法(...)也可以实现浅拷贝:

let obj2 = {...obj1};

数组的浅拷贝

????????数组的slice()方法可以浅拷贝数组:

let arr1 = [1, 2, [3, 4]];
let arr2 = arr1.slice();

????????arr2也只会拷贝arr1的一层元素,更深层的数组仍指向同一个。

浅拷贝的问题

????????由于指向同一对象,修改会互相影响:

obj2.b.c = 20; // obj1.b.c也变为20

arr2[2].push(5); // arr1也会增加元素5

?深拷贝

什么是深拷贝？

????????深拷贝是在JavaScript中复制一个对象或数组，使其成为一个完全独立的新副本。在进行深拷贝时，不仅需要复制对象本身，还需要递归地复制对象中的所有嵌套对象和数组。这确保了原始对象和拷贝对象之间的修改互不影响。

如何实现深拷贝？

方法一：使用JSON对象

let newObj = JSON.parse(JSON.stringify(oldObj));

这种方法简单易用，但是有一些局限性。例如，它不能复制函数和正则表达式对象

方法二：递归拷贝

function deepClone(obj) {
    let clone = Array.isArray(obj) ? [] : {};
    if (obj && typeof obj === "object") {
        for (let key in obj) {
            if (obj.hasOwnProperty(key)) {
                if (obj[key] && typeof obj[key] === "object") {
                    clone[key] = deepClone(obj[key]);
                } else {
                    clone[key] = obj[key];
                }
            }
        }
        return clone;
    } else {
        return obj;
    }
}

????????这种方法可以复制大多数类型的对象，但是对于特殊对象，如Date对象、正则对象等，还需要特殊处理。

注意事项

????????深拷贝复制所有字段，并复制字段所指向的动态分配内存。深拷贝发生在对象及其引用的对象被复制时。默认情况下基本数据类型（number，string，null，undefined，boolean）都是深拷贝

? 结语

? ? ? ??在编程的世界里，理解和掌握浅拷贝、深拷贝的概念和实现方式是非常重要的。希望通过这篇博客，你对JavaScript的浅拷贝、深拷贝有了更深入的理解。记住，不断学习和实践是提升编程技能的关键。祝你在编程的道路上越走越远，加油！

?