文档章节

JavaScript中对象的浅复制和深复制

Bob2100
 Bob2100
发布于 02/08 17:32
字数 1208
阅读 1224
收藏 48

在JavaScript中,如果要复制一个变量我们应该怎么做呢?下面这种做法是最简单的一种形式:

//把a复制给b
let a = 12;
let b = a;

这种复制方法只能适用于基本类型,如果a是对象怎么办呢?我们先来看看上面的代码在内存中做了什么事:

声明了变量a = 12,栈内存会分配一块区域来存储,如上图所示。把a赋给b,会在栈中重新开辟一块区域来存储b,并且b的值就是a的值。

假如a是对象,内存做了什么事呢?来看下面的例子:

let a = {};
let b = a;

如图所示,对象是存储在堆内存中的,栈中保存的是地址值,使用这种方式复制对象只不过是复制了该对象的引用而已,对象实体还是只有一个。那么对象应该怎样复制呢?对象的复制其实也就是产生一个一模一样的对象,对象包含属性和方法,我们创建一个新对象,将旧对象的属性和方法赋给新对象,这样不就是复制了一个对象吗?顺着这个思路,我们来看下面的代码:

function copy(obj){
  //基本类型和函数直接返回
  if(!(obj instanceof Object) || typeof obj === 'function') return obj;

  let newObj = {};
  if(obj instanceof Array) newObj = [];

  for(let p in obj){
    newObj[p] = obj[p];
  }
  return newObj;
}

let p = {
  name: 'bob',
  friends: ['jack', 'rose']
}
let p2 = copy(p);
console.log(p2);

定义一个copy函数,接收一个参数,用以实现对象的复制,如果参数是基本类型或函数就直接返回。函数体内声明一个新对象newObj,然后遍历参数obj,将其每一个属性都赋给newObj,最后返回newObj。接着使用copy方法生成了p的一个复制对象p2,结果如下图所示:

但是这样有一个问题,我们来看下面的代码:

p2.friends.push('lily');
console.log(p2.friends);//["jack", "rose", "lily"]
console.log(p.friends);//["jack", "rose", "lily"]

我们给p2friends添加了一个lily,结果致使pfriends也被同步修改了。下面的内存图可以帮助读者理解:

从图中可以看出,虽然pp2分别指向了两个对象,但是里面的friends属性还是指向的同一个数组,问题在于这段代码:

for(let p in obj){
  newObj[p] = obj[p];
}

只进行了对象第一层的复制,对于对象里面引用类型的属性,则进行了地址值的复制,这就是所谓的浅复制,也就是说p.friendsp2.friends是同一个对象:

console.log(p.friends == p2.friends);//true

那如何进行彻底的复制——深复制呢?思路也很简单,在遍历赋值对象属性的时候,遇到属性是引用类型的,也需要把这个属性展开赋值一下,于是我们可以用递归的思想来实现,如下代码所示:

//深复制
function deepCopy(obj){
  //基本类型和函数直接返回
  if(!(obj instanceof Object) || typeof obj === 'function') return obj;

  let newObj = {};
  if(obj instanceof Array) newObj = [];

  for(let p in obj){
    if((p instanceof Object) || typeof p === 'function'){
      //基本数据类型和函数
      newObj[p] = obj[p];
    }else{
      //继续复制对象里面的对象
      newObj[p] = deepCopy(obj[p]);
    }
  }
  return newObj;
}

let p = {
  name: 'bob',
  friends: ['jack', 'rose']
}
let p2 = deepCopy(p);

p2.friends.push('lily');
console.log(p2.friends);//["jack", "rose", "lily"]
console.log(p.friends);//["jack", "rose"]
console.log(p.friends == p2.friends);//false

声明了deepCopy函数,用于实现深复制,函数体和浅复制的函数体基本相同,只是在遍历要复制的对象的时候添加了一个判断,如果属性是基本类型或函数则进行赋值操作,否则递归调用deepCopy,继续复制对象里面的对象。接着演示了deepCopy的使用,发现修改了p2.friends并不会影响p.friends,它们已经是两个对象了。

对于浅复制,ES6中提供了Object.assign()方法,如下代码所示:

let p3 = Object.assign({}, p);
console.log(p3.friends == p.friends);//true

不知读者是否还记得,在JavaScript继承(四)——原型式继承中提到过Object.create()方法,从使用效果上来看,Object.create()创建的新对象有点类似浅复制,只不过新对象和原对象是一种继承关系,而Object.assign()创建的新对象和原对象是彼此独立的,如下代码所示:

let p4 = Object.create(p);
console.log(p4.__proto__ === p);//true
console.log(p3.__proto__ === p);//false

这点是读者需要注意的。

© 著作权归作者所有

共有 人打赏支持
Bob2100
粉丝 21
博文 78
码字总数 39165
作品 0
浦东
高级程序员
私信 提问
加载中

评论(12)

dddd777
dddd777

引用来自“dddd777”的评论

挑个刺,基本数据类型的复制的条件判断忘记取非了,应该是 !(p instanceof Object) 吧

引用来自“Bob2100”的评论

看的很仔细哦,是这样的。其实这个if可以去掉的,因为在方法的第一行已经判断过了,文章发布完想了一下,懒得改了
嗯嗯,谢谢😳
dddd777
dddd777

引用来自“dddd777”的评论

挑个刺,基本数据类型的复制的条件判断忘记取非了,应该是 !(p instanceof Object) 吧

引用来自“vacants”的评论

哈哈,很仔细。另外,这里是 !(obj[p] instanceof Object) 😬
对对对,应该是这样的😌
function deepCopy(obj){
//基本类型和函数直接返回
if(!(obj instanceof Object) || typeof obj === 'function') return obj;

let newObj = {};
if(obj instanceof Array) newObj = [];

for(let p in obj){
newObj[p] = deepCopy(obj[p]);
}
return newObj;
}
vacants
vacants

引用来自“dddd777”的评论

挑个刺,基本数据类型的复制的条件判断忘记取非了,应该是 !(p instanceof Object) 吧
哈哈,很仔细。另外,这里是 !(obj[p] instanceof Object) 😬
Bob2100
Bob2100

引用来自“dddd777”的评论

挑个刺,基本数据类型的复制的条件判断忘记取非了,应该是 !(p instanceof Object) 吧
看的很仔细哦,是这样的。其实这个if可以去掉的,因为在方法的第一行已经判断过了,文章发布完想了一下,懒得改了
dddd777
dddd777
挑个刺,基本数据类型的复制的条件判断忘记取非了,应该是 !(p instanceof Object) 吧
Bob2100
Bob2100

引用来自“吾字天河”的评论

复制对象 还是得遍历一遍
嗯,看场景
吾字天河
吾字天河
复制对象 还是得遍历一遍
MyronLee
MyronLee

引用来自“老翁”的评论

直接转为json字符串 然后在解析 多简单的深复制啊
json字符串没有正则表达式类型!
Bob2100
Bob2100

引用来自“老翁”的评论

直接转为json字符串 然后在解析 多简单的深复制啊
是的
老翁
直接转为json字符串 然后在解析 多简单的深复制啊
深入JavaScript基础之深浅拷贝

最近在学到JavaScript对象的深拷贝和浅拷贝做了一些比较,将实际开发的点和基础点做了些小结,话不多说,开始进入主题吧。 基础认识---基本类型 基础认识---引用类型 浅拷贝的实现-对象&&数组...

楚梦浮生
2018/07/30
0
0
JavaScript中浅拷贝和深拷贝的区别和实现

要理解 JavaScript中浅拷贝和深拷贝的区别,首先要明白JavaScript的数据类型 JavaScript有两种数据类型,基础数据类型和引用数据类型 基础数据类型:保存在栈内存中的简单数据段 ,有undefin...

tianyawhl
2018/09/25
0
0
也来谈一谈js的浅复制和深复制

1.浅复制VS深复制 本文中的复制也可以称为拷贝,在本文中认为复制和拷贝是相同的意思。另外,本文只讨论js中复杂数据类型的复制问题(Object,Array等),不讨论基本数据类型(null,undefine...

bothyan
2018/08/11
0
0
JavaScript继承(六)——寄生组合式继承

JavaScript继承(三)——组合继承中讲到,组合继承是JavaScript中最常用的继承模式,但是它也有自己的不足之处,现在我们就来剖析它的不足,如下示例: 使用组合继承让继承实际上分为两步:...

Bob2100
前天
0
0
Object.assign()

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign 说明 Object.assign()方法将所有可枚举属性的值从一个或多个源对象复制到目标对象,然后返...

莫问今朝乄
2017/12/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Httpd 整合 Tomcat 步骤

环境:Tomcat8 + Httpd2.4 工作原理:借助于Tomcat的AJP连接器实现Apache与Tomcat的通信 配置步骤: 1. 配置httpd.conf 新增: Include conf/extra/mod_jk.conf 修改:添加 index.jsp <IfM...

ZeroneLove
昨天
1
0
Docker笔记3——容器命令(未写完,明天整理接着写)

未写完,明天整理接着写 新建并启动容器 docker run docker run [OPTIONS] IMAGE [COMMEND] [ARG...] OPTIONS: --name=[容器新名字] :为容器指定一个名称 -d:后台运行容器,并返回容器ID,...

HappyBKs
昨天
1
0
2018个人年终总结

感谢领导的信任和指导,新的一年获得了很多成长和提高,改掉了很多不好的习惯。 在这一年里,我在领导的帮助下,主要完成了以下功能: 1、完成上海银行版本投资营销相关功能的开发。 2、完成车...

万山红遍
昨天
11
0
保密工作与linux系统的发展

保密工作从性质上可以分成商业方面的保密和国家安全方面的保密。由于自己从事的是IT方面的工作,工作中必然会接触涉及到计算机信息方面的相关文件。加上单位已近通过武器装备科研生产单位二级...

linux-tao
昨天
3
0
Spark共享变量

概述 Spark程序的大部分操作都是RDD操作,通过传入函数给RDD操作函数来计算。这些函数在不同的节点上并发执行,但每个内部的变量有不同的作用域,不能相互访问,所以有时会不太方便,Spark提...

仟昭
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部