【JS】深拷贝与浅拷贝，实现深拷贝的几种方法

本文部分内容来自https://www.cnblogs.com/echolun/p/7889848.html

昨天学习ES6的Object.assign()的时候，发现Object.assign进行的拷贝是浅拷贝,及只有第一层是深拷贝。若拷贝的属性的值是对象的复合属性，就只是拷贝过来一个引用。

const obj1 = {'a': {'b': 1}}
const obj2 = Object.assign({}, obj1)
 
obj1.a.b = 2
obj2.a.b  // 2

那js的深拷贝和浅拷贝的区别是什么呢

首先，先了解基本数据类型和引用数据类型。

基本数据类型：string、number、boolean、undefined、null

引用数据类型：object、array、function

（1）基本类型---名值存储在栈内存中，例如 let a = 1

当b = a时：

栈内存开辟了一个新内存，所以修改a的值时，b的值并不会随之变化。但这也算不上深拷贝，因为深拷贝本身只针对较为复杂的object类型数据。

（2）引用数据类型--名存在栈内存中，值存在于堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值

当b=a进行拷贝时，其实复制的是a的引用地址，而并非堆里面的值

而当我们 a[0]=1 时进行数组修改时，由于a与b指向的是同一个地址，所以自然b也受了影响，这就是所谓的浅拷贝了。

要是在堆内存中也开辟一个新的内存专门为b存放值，就像基本类型那样，起步就达到深拷贝的效果了

所以我们应该怎么实现深度拷贝呢

（1）递归去复制所有层级属性

function deepClone(obj) {
  let objClone = Array.isArray(obj) ? [] : {}
  if (obj && typeof obj === 'object') {
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        // 判断obj子元素是否为对象，如果是，递归复制
        if (obj[key] && typeof obj[key] === 'object') {
          objClone[key] = deepClone(obj[key])
        } else {
          objClone[key] = obj[key]
        }
      }
    }
  }
  return objClone
}

let a = [1,2,3,4]
let b = deepClone(a)  // [1,2,3,4]
a[0] = 2  // [2,2,3,4]
b  //  [1,2,3,4]

那是不是说slice方法也是深拷贝了，毕竟b也没受a的影响，上面说了，深拷贝是会拷贝所有曾经的属性，还是这个例子，我们把a改改

let a = [0,1,[2,3],4]
let b = a.slice()
a[0] = 1
a[2][0] = 1  // [1,1,[1,3],4]
b  // [0,1,[1,3],4]

拷贝的不彻底啊，b对象的一级属性确实不受影响了，但是二级属性还是没能拷贝成功，仍然脱离不了a的控制，说明slice根本不是真正的深拷贝。

这里引用知乎问答里面的一张图

第一层的属性确实深拷贝，拥有了独立的内存，但更深的属性却仍然公用了地址，所以才会造成上面的问题。

同理，concat方法与slice也存在这样的情况，他们都不是真正的深拷贝，这里需要注意。

（2）用JSON对象的parse和stringify

function deepClone (obj) {
  let _obj = JSON.stringify(obj)
  let objClone = JSON.parse(_obj)
  return objClone
}

let a = [0,1,[2,3],4]
let b = deepClone(a)
a[0] = 1  
a[2][0] = 1  // [1,1,[1,3],4]
b  // [0,1,[2,3],4]

（3）JQ的extend方法

JQ里有extend方法也可以拷贝对象。

$.extend([deep ], target, object1 [, objectN ])

deep表示是否深拷贝，为true为深拷贝；为false，为浅拷贝。

target Object类型 目标对象，其他对象的成员属性将被附加到该对象上。

object1  objectN可选。 Object类型 第一个以及第N个被合并的对象。 

let a = [0,1,[2,3],4]
let b = $.extend(true, [], a)
a[0] = 1
a[2][0] = 1  // [1,1,[1,3],4]
b  // [0,1,[2,3],4]