达摩碎碎念--深拷贝与浅拷贝

2019-01-09  本文已影响0人  达摩会武术

之前学习react的时候,动不动就出来个深浅拷贝的问题,这里就记下笔记,后期拿出来复习下,避免学了忘,忘了学的。
先来说下深浅拷贝:
|.浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。
||.深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。

deepcopy.png

例子:对象类型在赋值的过程中其实是复制了地址,从而会导致改变了一方其他也都被改变的情况。

          let a = {
            age: 1
          }
          let b = a
          a.age = 2
          console.log(b.age) // 2
1.浅拷贝:

实现方式 a). 首先来认识一个方法object.assign():
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

微信截图_20190109094128.png
例子1:{}为目标独享,a为源对象;下面是将a对象复制到{}对象中,然后返回目标对象。
Object.assign()拷贝的是属性值。 假如源对象的属性值是一个指向对象的引用,它也只拷贝那个引用值。
let a = {
  age: 1
}
let b = Object.assign({}, a)
a.age = 2
console.log(b.age) // 1

实现方式 b).通过展开运算符"..."来实现:
例子2:

let a = {
  age: 1,
  jobs: {
    first: 'FE'
  }
}
let b = { ...a }
a.jobs.first = 'native'
console.log(b.jobs.first) // native
2.深拷贝:

通常可以通过 JSON.parse(JSON.stringify(object)) 来解决深拷贝的问题。

例子3:

let a = {
  age: 1,
  jobs: {
    first: 'FE'
  }
}
let b = JSON.parse(JSON.stringify(a))
a.jobs.first = 'native'
console.log(b.jobs.first) // FE
上一篇下一篇

猜你喜欢

热点阅读