浅拷贝3(扩展运算符)

木森林哥哥

于 2022-09-10 18:38:40 发布

阅读量152

点赞数

CC 4.0 BY-SA版权

分类专栏：代码文章标签： javascript typescript vue.js

本文链接：https://blog.csdn.net/weixin_47021982/article/details/126798484

代码专栏收录该内容

32 篇文章

订阅专栏

本文介绍了JavaScript中深拷贝和浅拷贝的概念。通过示例展示了当复制的对象属性值为基本类型和引用类型时，两者拷贝的区别。在基本类型的情况下，拷贝后修改副本不会影响原对象，而引用类型时，修改副本会影响原对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    当拷贝对象的属性值对应的都是基本类型数据，可以理解为深拷贝。
    当拷贝对象的属性对应的值为数组或对象等引用类型时，为浅拷贝。
   -->
    <script>
      /* 基本类型 */
      let obj1 = {
        name: 'Tim',
        age: 12,
        sex: 'male',
      }

      let obj2 = { ...obj1 }
      obj2.age = 16

      console.log(obj1) // {name: 'Tim', age: 12, sex: 'male'}
      console.log(obj2) // {name: 'Tim', age: 16, sex: 'male'}

      /* 引用类型 */
      let a = {
        info: {
          name: 'Tim',
          age: 12,
          sex: 'male',
        },
      }

      let b = { ...a }
      b.info.age = 16

      console.log(a) // {info:{name: 'Tim', age: 16, sex: 'male'}}
      console.log(b) // {info:{name: 'Tim', age: 16, sex: 'male'}}
    </script>
  </body>
</html>