浅探js深拷贝和浅拷贝

habren 发布于2019-08-23 13:01 / 3088人阅读

摘要：接下来就让我们更细致的探究中的深浅拷贝。总结以上对深拷贝和浅拷贝做了简单的介绍，在深拷贝的实现上也只介绍了最简单的实现形式，并未考虑复杂情况以及相应优化，想要对深拷贝有更深入的了解，需要大家花时间去深入研究，或者可以关注我后续文章的动态。

对象和数组的拷贝对我来说一直都是一个比较模糊的概念，一直有点一知半解，但是在实际工作中又偶尔会涉及到，有时候还会一不小心掉坑里，不知道大家有没有同样的感受，因此，准备对js对象和数组拷贝一探究竟。提到js的对象和数组拷贝，大家一定会想深拷贝和浅拷贝，但是为什么会有深拷贝和浅拷贝呢？下面就让我简单介绍一下为什么拷贝会有深浅之分以及有什么区别？

原因及区别

我们都知道js中有两种数据类型，一种是基本数据类型，一种是引用数据类型，基本数据类型是按值访问的，即在操作基本类型的变量时，是直接修改变量的值，而引用数据类型的值是按引用访问的，什么叫按引用访问的呢?js的引用类型，也叫对象类型，是保存在内存中的，而在js中又无法直接操作内存中的对象，实际上操作的是对象的引用，因此在引用类型变量在进行复制操作时，并不是对对象值的直接复制，而是将对象的引用复制给了另一个变量，实际上变量指向的是同一个内存地址中对象的值，因此只要改变其中一个对象变量的值另外一个就会一起改变，这就是我们常说的浅拷贝。而在深拷贝中，会开辟一个新的内存地址用来存放新对象的值，两个对象对应两个不同的内存地址，修改一个对象并不会对另外一个对象产生影响。接下来就让我们更细致的探究js中的深浅拷贝。

浅拷贝

实现浅拷贝的方法有多种，让我们先来看看js中提供的几个自带方法实现浅拷贝的的例子：

Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。注意：Object.assign()拷贝的是属性值，假如源对象的属性值是一个指向对象的引用，它也只拷贝那个引用值，来看个例子：

var a = {a : "old", b : { c : "old"}}
var b = Object.assign({}, a)
b.a = "new"
b.b.c = "new"
console.log(a) // { a: "old", b: { c: "new" } }
console.log(b) // { a: "new", b: { c: "new" } }

如上面例子，当拷贝的源对象的属性值是一个对象时，拷贝的只是对象的引用值，因此当修改属性值的时候两个对象的属性值都会发生更新

Array.prototype.slice()方法提取并返回一个新的数组，如果源数组中的元素是个对象的引用，slice会拷贝这个对象的引用到新的数组，来看个例子：

var arr = ["a", "b", {d: "old"}]
var arr1 = arr.slice(1)
arr1[1].d = "new"
console.log(arr[2].d) // new

如上例所示，但源数组中的元素是对象引用时，slice拷贝的是这个对象的引用，因此当修改其中一个的值时，两个数组中的值都会发生改变

Array.prototype.concat()用于合并多个数组，并返回一个新的数组，和slice方法类似，当源数组中的元素是个对象的引用，concat在合并时拷贝的就是这个对象的引用，来看个例子：

var arr1 = [{a: "old"}, "b", "c"]
var arr2 = [{b: "old"}, "d", "e"]
var arr3 = arr1.concat(arr2)
arr3[0].a = "new"
arr3[3].b = "new"
console.log(arr1[0].a) // new
console.log(arr2[0].b) // new

除了上述js中自带方法实现的浅拷贝外，我们自己如何简单实现一个浅拷贝呢？来看个例子：

function copy(obj) {
  if (!obj || typeof obj !== "object") {
    return
  }

  var newObj = obj.constructor === Array ? [] : {}
  for (var key in obj) {
    newObj[key] = obj[key]
  }
  return newObj
}
var a = {b: "bb", c: "cc",  d: {e: "ee"}}
var b = copy(a)
console.log(b) // { b: "bb", c: "cc", d: { e: "ee" } }

实现一个浅拷贝，就是遍历源对象，然后在将对象的属性的属性值都放到一个新对象里就ok了，是不是很简单呢？

深拷贝

先来介绍一个做深拷贝最简单粗暴的方法JSON.stringify()和JSON.parse()的混合配对使用，相信大家对这两个方法都是非常熟悉的，来看个例子：

var obj = {a: {b: "old"}}
var newObj = JSON.parse(JSON.stringify(obj))
newObj.a.b = "new"
console.log(obj) // { a: { b: "old" } }
console.log(newObj) // { a: { b: "new" } }

上述例子可以看出，使用JSON.stringify()和JSON.parse()确实可以实现深拷贝，在新对象中修改对象的引用时，并不会影响老对象里面的值，那么，这么个方法是否就没有缺陷了呢？在JSON.stringify()做序列时，undefined、任意的函数以及symbol值，在序列化过程中会被忽略，这会在对象复制的时候导致什么后果呢？来看一个例子：

var obj = {a: {b: "old"}, c:undefined, d: function () {}, e:  Symbol("")}
var newObj = JSON.parse(JSON.stringify(obj))
newObj.a.b = "new"
console.log(obj) // { a: { b: "old" }, c: undefined, d: [Function: d], e: Symbol() }
console.log(newObj) // { a: { b: "new" } }

从例子中可以看到，当源对象中有undefine、function、symbol时，在序列化操作的时候会被忽略，导致拷贝生成的对象中没有对应属性及属性值。那么怎么自己去实现一个深拷贝呢？比较常见的方法就是通过递归，来看个例子：

function copy(obj) {
  if (!obj || typeof obj !== "object") {
    return
  }
  var newObj = obj.constructor === Array ? [] : {}
  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      if (typeof obj[key] === "object" && obj[key]) {
        newObj[key] = copy(obj[key])
      } else {
        newObj[key] = obj[key]
      }
    }
  }
  return newObj
}

var old = {a: "old", b: {c: "old"}}
var newObj = copy(old)
newObj.b.c = "new"
console.log(old) // { a: "old", b: { c: "old" } }
console.log(newObj) // { a: "old", b: { c: "new" } }

通过对需要拷贝的对象的属性进行递归遍历，如果对象的属性不是基本类型时，就继续递归，知道遍历到对象属性为基本类型，然后将属性和属性值赋给新对象。

总结

以上对js深拷贝和浅拷贝做了简单的介绍，在深拷贝的实现上也只介绍了最简单的实现形式，并未考虑复杂情况以及相应优化，想要对深拷贝有更深入的了解，需要大家花时间去深入研究，或者可以关注我后续文章的动态。
这篇文章如果有错误或不严谨的地方，欢迎批评指正，如果喜欢，欢迎点赞收藏

云服务器 GPU云服务器深拷贝和浅拷贝深拷贝 javascript深拷贝 js拷贝内存数据库

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99160.html

JS里深拷贝和浅拷贝的释义

摘要：本文解释中深拷贝和浅拷贝的区别。深拷贝深拷贝指递归的复制对象的属性给新对象。有些时候一层的深拷贝被认为是浅拷贝，比如的值是一个对象，浅拷贝出来的新对象直接引用了原对象的对象，所以也会相互影响的。本文解释javascript中深拷贝和浅拷贝的区别。浅拷贝/Shallow Copy 浅拷贝指拷贝了引用值。 var original = {prop1 : Prop1, prop2 : p...

zollero 2019-08-23 12:22 评论0 收藏0
js深拷贝和浅拷贝

摘要：深拷贝和浅拷贝深拷贝和浅拷贝的示意图大致如下浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。参考文章什么是深拷贝和浅拷贝及其实现方式走在前端的大道上本篇将自己读过的相关文章中，对自己有启发的章节片段总结在这（会对原文进行删改）,会不断丰富提炼总结更新。浅拷贝 var m = { a: 10, b: 20 } var n = m; n.a = 15; ...

MAX_zuo 2019-08-21 18:46 评论0 收藏0
深拷贝和浅拷贝的区别

摘要：深拷贝和浅拷贝的区别背景最近在用框架写页面，赋值给中的对象时会出现一个问题，赋值和被赋值对象之中任何一个有变化，另一个也会随之变化。深拷贝和浅拷贝的区别背景：最近在用vue框架写页面，赋值给Vue.$data中的对象时会出现一个问题，赋值和被赋值对象之中任何一个有变化，另一个也会随之变化。例如： var b = { foo: 123 }; var vm = new Vue(...

suemi 2019-08-21 17:07 评论0 收藏0
重新梳理下js中的深拷贝和浅拷贝

摘要：参考链接浅拷贝最简单的浅拷贝就赋值。所谓的浅拷贝就是，后面的对象和前面的对象在第一层数据结构中指向同一个堆地址。但是如果前面的数据不止有一层，如此时，使用和方式实现的都是浅拷贝。深拷贝管你怎么变，互不影响。参考链接：http://www.cnblogs.com/st-les...https://blog.csdn.net/hj7jay/... 浅拷贝： 1.最简单的浅拷贝就赋值。由于...

kun_jian 2019-08-23 15:18 评论0 收藏0
深拷贝和浅拷贝

摘要：只有对于复杂数据类型才有深浅拷贝一说粗浅的解释浅拷贝并不是真的拷贝，新对象仍指向原被拷贝对象的内存地址，如有更新会被同步引用数据类型的名存在栈内存中，值存在于堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值深拷贝是完全拷贝出了独立的只有对于Object（复杂数据类型）才有深浅拷贝一说 1、粗浅的解释：浅拷贝并不是真的拷贝，新对象仍指向原被拷贝对象的内存地址，如有更新会被同步...

Kross 2019-08-23 17:04 评论0 收藏0