深拷贝&浅拷贝

let obj = {a: 1}
let obj1 = obj
obj.a = 2
console.log(obj1.a)  //2

当我们把一个对象赋值给另一个对象时，改变之前对象的值，另一个对象的值也会随之发生改变，这是因为对象会引用同一个内存地址，改变obj，同时也会改变obj1。

实际开发过程中，我们并不希望此类现象，这时候我们用浅拷贝解决这个问题

浅拷贝(Object.assign())

let obj = {a: 1}
let obj2 = Object.assign(obj)
obj.a = 3
console.log(obj2.a)  //1

浅拷贝解决了同一个引用地址的问题

let obj = {a: {b: 1}}
let obj1 = Object.assign(obj)
obj.a.b = 3
console.log(obj1.a.b)  // 3

如果对象里又包含一层对象，这时候我们要用到深拷贝解决同一个引用地址的问题

深拷贝( JSON.parse(JSON.stringify()) )

let a = {name: 'jinx', skill: {s1: 'clamp', s2: 'cannon'}}
let b = JSON.parse(JSON.stringify(a))
a.skill.s1 = '1111'
console.log(b.skill.s1)  //clamp

深拷贝几个注意点

JSON.parse(JSON.stringify())的原理就是利用JSON.stringify()将js对象序列化(JSON字符串)，再利用JSON.parse()反序列化(还原)js对象。序列化的作用是存储，一个对象本身其实是一个内存映射，如果断电或者死机，数据将不复存在，因此我们将对象转成字符串存储到磁盘上，用的时候再反序列化将字符串还原成对象即可。我们在使用深拷贝JSON.parse(JSON.stringify())时需要注意以下几点：

1、如果对象里有时间对象，深拷贝后的结果，时间仍然是字符串的形式；

let date = {time: new Date()}
let date1 = JSON.parse(JSON.stringify(date))
console.log(date.time) // Fri Sep 11 2020 15:32:39 GMT+0800 (中国标准时间)
console.log(date1.time) // 2020-09-11T07:32:39.501Z

2、如果对象里有RegExp、Error对象，序列化后的结果得到空对象；

let test = {a: new RegExp('\\w+')}
let test1 = JSON.parse(JSON.stringify(test))
console.log(test) // {a: /\w+/}
console.log(test1) // a: {}

3、如果对象里有函数、undefined，深拷贝后的结果丢失函数和undefined；

let test = {a: undefined, b: function() {console.log(111)}}
let test1 = JSON.parse(JSON.stringify(test))
console.log(test) // {a: undefined, b: ƒ}
console.log(test1) //  {}

4、如果对象里有NaN、Infinity和-Infinity，深拷贝后的结果得到null；

let test = {a: NaN}
let test1 = JSON.parse(JSON.stringify(test))
console.log(test) // {a: NaN}
console.log(test1) //  {a: null}

5、JSON.stringify()只能序列化对象的可枚举的自有属性；

function Animal(type) {
    this.type = type
  }

  const cat = new Animal('xiaobai')
  const test = {a: 1, b: cat}
  const test1 = JSON.parse(JSON.stringify(test))
  console.error(test.b) // Animal {type: "xiaobai"}
  console.error(test1.b) // {type: "xiaobai"}

6、如果对象中存在循环引用的情况也无法正确实现深拷贝；

let test = {
  a: 1,
  b: {
    b1: 1,
    b2: 2
  }
} 
test.c = test.b  // test:{a: 1,b: {b1: 1, b2: 2},c: {b1: 1, b2: 2}}
test.b.b3 = test.c 
let test1 = JSON.parse(JSON.stringify(test))
console.error(test)
console.error(test1)

1.png

自己实现深拷贝

function deepClone(data) {
    let type = Object.prototype.toString.call(data) // 判断参数类型
    let obj
    if (type === '[Object Array]') {
      obj = []
    } else if(type === '[Object Object]') {
      obj = {}
    } else {
      return data
    }

    if (type === '[object Array]') {
      for (let i = 0; i < data.length; i++) {
        obj.push(deepClone(data[i]))
      }
    } else if(type === '[object object]') {
      for (let key in data) {
        obj[key] = deepClone(data[key])
      }
    }
    return obj
  }

如果对时间、正则对象不做要求，可用如下方法

function deepClone1(data) {
  if (obj && typeof obj === 'object') {
    var newObj = Array.isArray(obj) ? [] : {}
    for (var key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (obj[key] && typeof obj[key] === 'object') {
          newObj[key] = deepClone1(obj[key])
        } else {
          newObj[key] = obj[key]
        }
      }
    }
  } else {
    console.error('参数为空或不为对象')
  }
}