浅探js深拷贝和浅拷贝

对象和数组的拷贝对我来讲一直都是一个比较模糊的概念，一直有点只知其一;不知其二，可是在实际工做中又偶尔会涉及到，有时候还会一不当心掉坑里，不知道你们有没有一样的感觉，所以，准备对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深拷贝和浅拷贝作了简单的介绍，在深拷贝的实现上也只介绍了最简单的实现形式，并未考虑复杂状况以及相应优化，想要对深拷贝有更深刻的了解，须要你们花时间去深刻研究，或者能够关注我后续文章的动态。这篇文章若是有错误或不严谨的地方，欢迎批评指正，若是喜欢，欢迎点赞收藏