当前位置：首页 > news >正文

基于web的网站开发技术总结成都网站建设团队

news 2025/7/1 22:53:34

基于web的网站开发技术总结,成都网站建设团队,企业培训视频,没有防盗链的网站🧑‍🎓 个人主页：《爱蹦跶的大A阿》 🔥当前正在更新专栏：《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对象、正则对象等，还需要特殊处理。