🧑🎓 个人主页:《爱蹦跶的大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的浅拷贝、深拷贝有了更深入的理解。记住,不断学习和实践是提升编程技能的关键。祝你在编程的道路上越走越远,加油!