经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
JavaScript之浅谈深拷贝与浅拷贝 - Bear-sir
来源:cnblogs  作者:Bear-sir  时间:2020/11/16 10:25:08  对本文有异议

这一章我们聊一下js中深拷贝与浅拷贝

深拷贝和浅拷贝的区别?

1.浅拷贝: 将原对象或原数组的引用直接赋给新对象,新数组,新对象/数组只是原对象的一个引用

2.深拷贝: 创建一个新的对象和数组,将原对象的各项属性的“值”(数组的所有元素)拷贝过来,是“值”而不是“引用”

为什么要使用深拷贝?

我们希望在改变新的数组(对象)的时候,不改变原数组(对象)

接下来我们用代码演示一下深拷贝与浅拷贝?(一定要自己动手敲一遍)

  1. var obj = {
  2. name: 'xiaoming',
  3. age: 18,
  4. friends: ['xiaozhang', 'zhaosi', 'wangwu'],
  5. girlfriend: {
  6. name: 'xiaomei',
  7. age: 16,
  8. friend: ['xiaohong', 'cuisan', 'lili']
  9. }
  10. }
  11. var obj1 = {}

这里我们定义了一个对象obj和一个空对象obj1,我们的目的是要把obj的内容拷贝到obj1中

浅拷贝

  1. function copy(a, b) {
  2. for (var attr in a) { //遍历a对象里面的每一个属性
  3. b[attr] = a[attr] //把a对象里面的属性存储到b对象里面
  4. }
  5. }
  6. copy(obj, obj1)
  7. console.log(obj)
  8. console.log(obj1)

运行结果:

从结果我们可以看到,打印出来的obj和obj1是完全一样的

然后我们分别修改obj中原始值和引用类型的值:

  1. obj.age = 30 // 修改了obj的age值
  2. obj.friends.splice(0, 1) //删除数组中第一个元素

此时的执行结果:

我们看到obj的age值变成了30,obj1的值依然是18,而我们删除了obj中friends数组的第一个元素时,obj1的friends数组中的第一个元素也被删除了
这不是我们希望看到的结果

解决办法:

深拷贝

  1. function deepCopy(a, b) {
  2. for (var attr in a) {
  3. var item = a[attr]
  4. if (item instanceof Array) {
  5. b[attr] = []
  6. deepCopy(item, b[attr])
  7. } else if (item instanceof Object) {
  8. b[attr] = {}
  9. deepCopy(item, b[attr])
  10. } else {
  11. b[attr] = item
  12. }
  13. }
  14. }
  15. deepCopy(obj, obj1)
  16. obj.girlfriend.friend.splice(0, 1)
  17. console.log(obj)
  18. console.log(obj1)

instanceof用法点这里

运行结果:

这样就可以只改变obj中的数组而不改变obj1中的数组

参考资料

1.CSDN博客:https://blog.csdn.net/wyp1725726792/article/details/102756183
2.2.阮一峰 《ECMASript6入门》 http://es6.ruanyifeng.com/

原文链接:http://www.cnblogs.com/XF-eng/p/13969211.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号