js总结 |JS深度拷贝的方法

引入：原始值与引用值的复制

当我们复制原始数据时，如数值、字符串，举例来说，下面的b相当于开辟了新的空间来放置变量b，并储存了a的值，所以改变b的值不会影响a的值。

let a=1
let b=a
console.log(a) //1
console.log(b) //1

b=2
console.log(a) //1
console.log(b) //2

而当我们复制引用数据时，如数组、对象，如下：

let person={name:'jack'}
let student=person
console.log(person) //{name:'jack'}
console.log(student) //{name:'jack'}
console.log(person==student)//true

//改变数据
student.name='sean'
console.log(student) //{name:'sean'}
console.log(person) //{name:'sean'}
console.log(person==student)//true

为什么person也跟着变了呢？

这是因为person指向的是{name:'jack'}对象，student只是单纯的复制了一个指向，也就是同样地指向了{name:'jack'}对象，可以理解为{name:'jack'}对象是它们两者共享的区域。所以当student改变name的时候，并不是改变本身，而改变了{name:'jack'}这个共享区域的name，而此时person 的指向没有变化，所以person的name也随之变化了。

这往往不是我们希望得到的结果。那如何复制了引用类型后，不会改变原来的值呢？那就要深度拷贝

总结：深度拷贝的方法

对象

• 方法一：Object.assign({},origin)

  let person={name:'jack'}
  let student=Object.assign({},person)
  

  只对一级属性的对象有效

• 方法二：JSON.parse(JSON.stringify(origin))

  let person={name:'jack'}
  let student=JSON.parse(JSON.stringify(person))
  

数组

• 方法一：[].concat(origin)

  let animals=['老虎','狮子']
  let zoo=[].concat(animals)
  

  对于一维数组是深拷贝，对一维以上的数组是引用

• 方法二：origin.slice()

  let animals=['老虎','狮子']
  let zoo=animals.slice()
  

  对于一维数组是深拷贝，对一维以上的数组是引用