持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

赋值

拷贝是js中比较有意思的一个知识点.比如我有一个定义好的对象和一个空对象,怎么把我的定义好的对象给空对象呢?

<script>
  const ad = {
   name: 'uzi',
   age: 24
  }
  const adc = {}
 </script>

如果我们直接用=赋值,就会发现如果我们改变adc里面的值,原来我们定义好的的ad里面的值也会受到影响. 这是因为复杂数据类型赋值的只是栈区的地址,两份相同的地址指向同一块储存数据的堆区.这种方法只能称之为赋值

 <script>
  const ad = {
   name: 'uzi',
   age: 24
  }
  const adc = ad
  console.log(adc)
  console.log(ad)
  adc.name = 'gala'
  console.log(adc)
  console.log(ad)
 </script>

QQ截图20220614141959.png

浅拷贝

我们可以使用对象中自带的assign实现拷贝的功能

<script>
  const obj = {}
  const obj2 = {
   name: 'uzi',
   age: 18,
  }
  Object.assign(obj, obj2)
  obj.name = 'gala'
  console.log(obj)
  console.log(obj2)
 </script>

可以发现现在两个对象互不影响

QQ截图20220614143110.png

但是新的问题出现,如果在对像里加一个数组呢?改变数组还是各改个的吗?

 <script>
  const obj = {}
  const obj2 = {
   name: 'uzi',
   age: 18,
   hero: ['薇恩']
  }
  Object.assign(obj, obj2)
  obj.name = 'gala'
  console.log(obj)
  console.log(obj2)
  //浅拷贝简单数据类型个改个的
  obj.hero.push('卡莎')
  //复杂数据类型一改多改
  </script>

QQ截图20220614143649.png 问题出现,给两个对象中的数组都添加了卡莎.这时深拷贝可以很好的帮我们解决这个问题

深拷贝之JSON方法

我们可以通过数据类型转换的方法实现比较简单的深拷贝

 <script>
  const obj2 = {
   name: '幻境',
   age: 18,
   za: ['me']
  }
  //先转换为字符串再转换成对象
  const obj = JSON.parse(JSON.stringify(obj2))
  obj.name = '梦魇'
  console.log(obj)
  console.log(obj2)
  obj.za.push('zj')
  console.log(obj)
  console.log(obj2)
 </script>

QQ截图20220614144533.png

可以发现深拷贝无论简单还是复杂数据类型都是各改各的.!!!但是注意他无法识别函数.那么允许我卖个关子,下篇我将介绍最完美的深拷贝方法及它的源码.

利用递归实现深浅拷贝(上)

赋值

浅拷贝

深拷贝之JSON方法