浅拷贝4(Object.assign)

最新推荐文章于 2024-07-01 17:12:58 发布

木森林哥哥

最新推荐文章于 2024-07-01 17:12:58 发布

阅读量153

点赞数

分类专栏：代码文章标签： javascript 前端 vue.js es6 ecmascript

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

版权

代码专栏收录该内容

32 篇文章 1 订阅

订阅专栏

<!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>
    <!-- 
    Object.assign()
      - 当拷贝对象的属性值对应的都是基本类型数据，可以理解为深拷贝。
      - 当拷贝对象的属性对应的值为数组或对象等引用类型时，为浅拷贝。
   -->
    <script>
      /* 基本数据类型 */
      let obj1 = { a: 1 }
      let obj2 = Object.assign({}, obj1)
      console.log(obj2) // { a: 1 }

      obj1.a = 2
      console.log(obj1) // { a: 2 }
      console.log(obj2) // { a: 1 }

      

      /* 引用类型 */
      let obj3 = { a: { b: 1 }, c: 1 }
      let obj4 = Object.assign({}, obj3)
      console.log(obj4) // { a: { b: 1 }, c: 1 }

      obj3.a.b = 2 // 引用类型会影响
      obj3.c = 3 // 基本类型不影响
      console.log(obj3) // { a: { b: 2 }, c: 3 }
      console.log(obj4) // { a: { b: 2 }, c: 1 }
    </script>
  </body>
</html>