对象的浅克隆和深克隆

最新推荐文章于 2024-05-17 13:52:13 发布

多看书少吃饭

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量201

点赞数

文章标签： javascript vue.js 开发语言

本文链接：https://blog.csdn.net/weixin_56818823/article/details/124563610

版权

浅克隆分两步:
1. 做一个空的对象
2. 把旧对象进行遍历, 把其中的属性和值挨个放到新对象里

注意事项:

浅克隆只适合对象的属性是基础类型的场景
如果对象的属性也是个对象类型, 需要用递归方式来实现深克隆

代码如下

<!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 = {
        uname: 'tc',
        age: 18,
        colors: ['orange', 'green'],
        friend: { uname: '冯昕吃荷兰猪' },
      }

      //   let obj2 = obj1 //内存中的对象被两个变量名指向了
      //   obj2.uname = 'ljr' //此时a.uname也变成了ljr,所以无法实现浅克隆
      //   console.log(obj1)

      //   使用对象遍历的方法来实现浅克隆
      var obj3 = {}
      for (let key in obj1) {
        obj3[key] = obj1[key]
      }
      obj3.uname = 'bb'
      console.log(obj1) //此时a.uname的值没有被修改
      obj3.friend.uname = '荷兰猪'
      console.log(obj3) //此时发现obj.friend.uname值被修改了!

      //深克隆
      function deepClone(obj = {}) {
        if (typeof obj !== 'object' || obj == null) {
          return obj
        }
        let result
        if (obj instanceof Array) {
          result = []
        } else {
          result = {}
        }
        for (let key in obj) {
          if (obj.hasOwnProperty(key)) {
            result[key] = deepClone(obj[key])
          }
        }
        return result
      }
      let obj4 = deepClone(obj1)
      obj4.uname = '树下'
      obj4.friend.uname = '李白'
      //修改以后 obj4修改自身属性(包括属性是引用类型)都不会影响obj1
    </script>
  </body>
</html>