一个菜鸟的互联网技术分享博客
您的位置: 主页 > js中的深浅拷贝问题简析
advertisement

js中的深浅拷贝问题简析

由于近期在为找工作做准备,在看js部分就看到了关于深浅拷贝这块的资料了,现在来做下总结
例如在开发过程中,偶尔会遇到这种场景,拿到一个数据后,你打算对它进行处理,但是你又希望拷贝一份副本出来,方便数据对比和以后恢复数据。
那么这就涉及到了 JS 中对数据的深浅拷贝问题,所谓深浅拷贝,浅拷贝的意思就是,你只是复制了对象数据的引用,并没有把内存里的值另外复制一份,那么深拷贝就是把值完整地复制一份新的值。

问题描述:
因为在JavaScript中对象在赋值中存储的是对象的地址(指针),所以会造成对象类型在复制过程中只复制对象的地址,从而导致以下问题
  1. var people = {  
  2.     name: "小明"  
  3. }  
  4. var peoplea = people;  
  5. peoplea.name = "小白";  
  6. console.log(peoplea.name)   //小白  
  7. console.log(people.name)    //小白 
我们本来期望只改变peoplea的name,现在连people的name都改变了。根据情况的不同,可使用深拷贝或浅拷贝来解决。
解决方法:
我们在实现深浅拷贝之前,我们先看一看深、浅拷贝、赋值这三种的区别:
A、赋值
改变新对象时不管第几层,老对象都会随着变化。

  1. var people = {  
  2.     name: "小明",  
  3.     act: ["吃饭""睡觉"]  
  4. }  
  5. var people1 = people; //赋值  
  6. people1.name = "小红";  
  7. people1.act[1] = "打游戏";  
  8. console.log(people.name); //小红  
  9. console.log(people.act); //["吃饭", "打游戏"]  
2、浅拷贝
改变新对象第一层基本数据类型时,老对象不变。有子对象时,改变子对象,老对象会随着变化。

  1. var people = {  
  2.     name: "小明",  
  3.     act: ["吃饭""睡觉"]  
  4. }  
  5. var people1 = Object.assign({}, people); //浅拷贝  
  6. people1.name = "小红";  
  7. people1.act[1] = "打游戏";  
  8. console.log(people.name); //小明  
  9. console.log(people.act); // ["吃饭", "打游戏"]  

3、深拷贝

不管改变新对象第几层,老对象都不会随之改变。
  1. var people = {  
  2.     name: "小明",  
  3.     act: ["吃饭""睡觉"]  
  4. }  
  5. var people1 = JSON.parse(JSON.stringify(people)); //深拷贝  
  6. people1.name = "小红";  
  7. people1.act[1] = "打游戏";  
  8. console.log(people.name); //小明  
  9. console.log(people.act); // ["吃饭", "睡觉"]  

总结一下就是:

  第一层为基本数据类型 多于一层含有子对象
赋值 新老一起改变 新老一起改变
浅拷贝 新对象改变,老对象不变 新老一起改变
深拷贝 新对象改变,老对象不变 新对象改变,老对象不变
 

了解完了区别,下面介绍实现深浅拷贝的几个方法。
一、浅拷贝
1、Object.assign()
官方对这个函数的介绍是:Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。实际上就是会把属性中的简单数据类型直接复制,而对于对象属性,只会拷贝地址(指针),上边介绍区别时用的就是这个;
var people1 = Object.assign({}, people);

需要注意的是,如果对象没有子对象,Object.assign()实现的就是深拷贝。
2、展开运算符(ES6新增)
  1. var people = {  
  2.     name: "小明",  
  3.     act: ["吃饭""睡觉"]  
  4. }  
  5. var people1 = {...people};  
  6. people1.name = "小红";  
  7. people1.act[1] = "打游戏";  
  8. console.log(people.name);//小明  
  9. console.log(people.act);// ["吃饭", "打游戏"]  
3、自己写
  1. var people = {  
  2.     name: "小明",  
  3.     act: ["吃饭""睡觉"]  
  4. }  
  5. var people1 = shallowCopy(people);  
  6. people1.name = "小红";  
  7. people1.act[1] = "打游戏";  
  8. console.log(people.name); //小明  
  9. console.log(people.act); // ["吃饭", "打游戏"]  
  10. function shallowCopy(obj) {  
  11.     var res = {};  
  12.     for (var index in obj) {  
  13.         if (obj.hasOwnProperty(index)) { //不复制原型链上的属性  
  14.             res[index] = obj[index];  
  15.         }  
  16.     }  
  17.     return res;  
  18. }  
二、深拷贝
1、JSON.parse(JSON.stringify(obj))
上边介绍区别时用的就是这个:
var people1 = JSON.parse(JSON.stringify(people));  //深拷贝

这个方法比较简便但也存在问题:
a、不能复制对象中的函数。
b、会忽略对象中的undefind。
2、lodash函数
官方介绍是:lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库。官网是
www.lodashjs.com/ ,我推荐用其中的_.cloneDeep(value)方法。
  1. ar objects = [{ "a"1 }, { "b"2 }];  
  2. var deep = _.cloneDeep(objects);  
  3. console.log(deep[0] === objects[0]);  
  4. // => false  
还有自己去写一个递归,但是需要考虑的东西较多,不再赘述,也有用jq的$.extend()方法实现的,但是性能不好,这里提一下。
zhangren.online
上一篇:setTimeout、setInterval被遗忘的第三个参数
下一篇:ES6 Promise用法小结

您可能喜欢

​js获取一个对象的长度

​js获取一个对象的长度

​解决一个页面多个enter事件的混乱

​解决一个页面多个enter事件的混乱

​canvas的drawImage无法显示图像

​canvas的drawImage无法显示图像

回到顶部