教育网站,网站建设专业性,企业网站建设费用摊销,免费网站排名优化在线#x1f9d1;#x1f393; 个人主页#xff1a;《爱蹦跶的大A阿》
#x1f525;当前正在更新专栏#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》
目录
✨ 前言
✨ 正文
浅拷贝
对象的浅拷贝
数组的浅拷贝
浅拷贝的问题 深拷贝
什么是深拷贝… 个人主页《爱蹦跶的大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对象、正则对象等还需要特殊处理。
注意事项 深拷贝复制所有字段并复制字段所指向的动态分配内存。深拷贝发生在对象及其引用的对象被复制时。默认情况下基本数据类型numberstringnullundefinedboolean都是深拷贝
✨ 结语 在编程的世界里理解和掌握浅拷贝、深拷贝的概念和实现方式是非常重要的。希望通过这篇博客你对JavaScript的浅拷贝、深拷贝有了更深入的理解。记住不断学习和实践是提升编程技能的关键。祝你在编程的道路上越走越远加油
