javascript中数组和对象的深拷贝和浅拷贝

2018-5-2    seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

1、首先理解一下“深拷贝”和“浅拷贝”的区别：

浅拷贝：a = b;//a和b中存的是相同的地址，该地址指向堆内存中相同的地方，即a和b就是一个东西，改变a的值b的值也会跟着改变，同理改变b的值a的值也会发生改变；

深拷贝：a和b中存的地址不同，但是地址对应的堆内存中的内容完全一致，即b是a的副本

2、

（1）数组和对象的浅拷贝一样  ，简单的赋值操作

var b = a;

如数组的浅拷贝：

[javascript] view plain copy
  1. var a = ['1','2','3'];  
  2. var b = a;  
  3. b[0] = '5';  
  4. console.log('a',a);  
  5. console.log('b',b);  

输出的值为：

对象的浅拷贝：

[html] view plain copy
  1. var a = {name:'1',age:'2',color:'3'};  
  2. var b = a;  
  3. b.name = '5';  
  4. console.log('a',a);  
  5. console.log('b',b);  

输出的值为：

（2）数组的深拷贝

ES5：var b = a.concat();

[javascript] view plain copy
  1. var a = ['1','2','3'];  
  2. var b = a.concat();  
  3. b[0] = '5';  
  4. console.log('a',a);  
  5. console.log('b',b);  

输出的结果为：

ES6 let [...b] = a;

（3）对象的深拷贝

ES5: 

[javascript] view plain copy
  1. var a = {name:'1',age:'2',color:'3'};  
  2. function copyObj(a) {  
  3. var b = {};  
  4. for(var key in a) {  
  5. b[key] = a[key];  
  6. }  
  7. return b;  
  8. }  
  9. var c = copyObj(a);  
  10. c.name = '5';  
  11. console.log('c',c);  
  12. console.log('a',a);  

输出的结果为：

ES6：

let {...b} = a;


蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务


分享本文至：
« 小白怎么学习UI设计？UI设计学习步骤 UI视觉设计师，2018年薪风向是怎样的？ »

分类

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档