必须掌握的深拷贝和浅拷贝

“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第3篇文章，点击查看活动详情”

不会弹吉他的铁匠不是一名好铁匠！大家好，我是拿吉他的铁匠，码字不易，希望大家多多点赞。

书接上回，铁匠完美回答出new操作符的问题；

面试官大A：这样，你先说一下对浅拷贝和深拷贝的理解？

铁匠：心中暗喜，还好这个知识点刚复习过；

数据类型

拷贝是对数据的操作，所以在了解拷贝之前，我们需要对数据有个简单的认识； 数据分为简单数据类型和引用数据类型，在这里我们更关注的是他们之前的存储区别；

简单数据类型：

• 存储在栈中，栈内存中存储的就是本身的值；所以对于简单数据类型而言，拷贝的就是原始数据；

引用数据类型：

• 数据存储在堆内存中，每一个堆内存都会对应一个引用地址，该引用地址存储在栈中；对于引用数据的拷贝是深浅拷贝的主要区分点；

浅拷贝

对于数据类型有了一个简单的认识，可以先来看看浅拷贝；

• 浅拷贝拷贝数据的时候，对于简单数据类型而言，会在栈内存中新开辟一个空间，拷贝的就是数据本身；
• 对于引用数据而言，拷贝的就是栈内存中的引用地址，指向同一个堆内存；所以数据之间会相互影响；

模拟实现浅拷贝也有多种的方式：

• 只拷贝一层；简单来说就是拷贝得到的对象修改简单数据不会影响原对象，修改复杂数据类型会影响原数据；

function shadowClone (obj) {
  if (obj instanceof Object) {
    let newObj = obj instanceof Array ? [] : {}
    for (let i in obj) {
      newObj[i] = obj[i]
    }
    return newObj
  } else {
    let a = obj
    return a
  }
}

// 测试
let obj = { name: 'demo', value: [1, 2] }
let newObj = shadowClone(obj)
newObj.name = 'hello'
newObj.value.push(15)
console.log(obj) // { name: 'demo', value: [ 1, 2, 15 ] }

这种模拟方式就是修改简单数据类型不会影响原数据，修改复杂数据类型，原数据也是被影响；

• 直接将引用地址复制一份并赋值给新的对象，这种方式其实更接近引用类型数据拷贝的定义；

function shadowClone1 (obj) {
  if (obj instanceof Object) {
    let newObj = obj
    return newObj
  } else {
    let a = obj
    return a
  }
}

// 测试
let obj = { a: 1, b: 2 }
let obj1 = shadowClone1(obj)
obj1.a = 3
console.log(obj) // { a: 3, b: 2 }

这种模拟方式无论简单数据类型还是引用数据类型，都会影响原数据；

那么在JS中，存在浅拷贝的方法常见的有哪些呢？

• Object.assign()：修改简单还是复杂数据类型，都会影响原数据；

// Object.assing()
let obj = { a: 1, b: [1, 2] }
let newObj = Object.assign({}, obj)
obj.a = 12
obj.b.push(3)
console.log(obj) //{ a: 12, b: [ 1, 2, 3 ] }

• Array.prototype.slice()：相当于只复制一层，改变引用数据类型会对原数据造成影响；

const arr = [1, 2, { a: 1 }]
const newArr = arr.slice(0)
newArr[2].a = 3
console.log(arr) // [ 1, 2, { a: 3 } ]

• Array.prototype.concat():同slice()相当于只复制一层；

const arr = [1, 2, { a: 1 }]
const newArr = arr.concat()
newArr[0] = 12
newArr[2].a = 'tom'
console.log(arr) // [ 1, 2, { a: 'tom' } ]

• 使用扩展运算符实现拷贝：相当于只拷贝一层；

const arr = [1, 2, { a: 1 }]
const newArr = [...arr]
newArr[1] = 'hello'
newArr[2].a = 'tom'
console.log(arr) // [ 1, 2, { a: 'tom' } ]

深拷贝

在项目开发过程中，我们更希望的是数据之间保持独立，避免相互影响，从而提高复用性；很显然浅拷贝不能满足我们的这个需求，这时我们就应该考虑使用深拷贝；

深拷贝简单来说通过拷贝得到的数据，无论是修改简单数据类型还是复杂数据类型的数据，都不会对原数据产生影响；

• 对于引用类型的数据，深拷贝新开辟了一个堆内存，专门用来存放拷贝后得到的数据；那么栈中保存的引用地址就指向不同的堆内存空间，进而数据之间不会相互影响；

模拟深拷贝的实现（递归）：

function deepClone (newObj, oldObj) {
  for (let i in oldObj) {
    let item = oldObj[i]
    if (item instanceof Array) {
      newObj[i] = []
      deepClone(newObj[i], item)
    } else if (item instanceof Object) {
      newObj[i] = {}
      deepClone(newObj[i], item)
    } else {
      newObj[i] = item
    }
  }
}

// 测试
let obj = { a: 1, b: [1, 2] }
let newObj = {}
deepClone(newObj, obj)
newObj.b.push(3)
console.log(obj) // { a: 1, b: [1, 2] }

JS中常见的深拷贝的方法有哪些？

• lodash里面的_.cloneDeep()方法；

const newObj = _.cloneDeep(obj)

• JQuery里面的extend()方法；

const newObj = $.extend(true, {}, obj)  // true为深拷贝，false为浅拷贝

• JSON.stringify()方法；

let obj = { a: 1, b: [1, 2] }
let newObj = JSON.parse(JSON.stringify(obj))
console.log(newObj.b === obj.b) // false

// 这种方式存在弊端，会忽略undefined,symbol和函数
const obj = {
name: 'A',
name1: undefined,
name3: function() {},
name4: Symbol('A')
}
const obj2 = JSON.parse(JSON.stringify(obj))
console.log(obj2) // {name: "A"}