对象深拷贝的3种办法

最新推荐文章于 2024-02-24 09:00:00 发布

WeChat624

最新推荐文章于 2024-02-24 09:00:00 发布

阅读量295

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_71879136/article/details/126612659

版权

1、使用for循环拷贝

用for...in循环让使对象遍历，然后在通过对象获取属性名。

<script>
  var obj_1 = {
    x:1,
    y:2,
    z:3
  }
  var obj_2 = {}
  for(x in obj_1){
    obj_2[x] = obj_1[x]
  }
  console.log(obj_2); // {x: 1, y: 2, z: 3}
  obj_1.f = 4;
  console.log(obj_1); //{x: 1, y: 2, z: 3, f: 4}
  console.log(obj_2); //{x: 1, y: 2, z: 3}
</script>

2、Object.assign() 对象的合并

利用Object.assign(), 第一个参数必须是空对象**

  var obj_3 = {}
  Object.assign(obj_3,obj_1)
  console.log(obj_3); //{x: 1, y: 2, z: 3, f: 4}
  obj_1.a = 5
  console.log(obj_1); //{x: 1, y: 2, z: 3, f: 4, a: 5}
  console.log(obj_3); //{x: 1, y: 2, z: 3, f: 4}

3、es6解构赋

  var obj_4 = {...obj_1}
  console.log(obj_4); //{x: 1, y: 2, z: 3, f: 4, a: 5}
  obj_1.b = 6
  console.log(obj_1); //{x: 1, y: 2, z: 3, f: 4, a: 5, b: 6}
  console.log(obj_4); //{x: 1, y: 2, z: 3, f: 4, a: 5}