深浅拷贝+异常处理

最新推荐文章于 2024-07-20 15:10:58 发布
最新推荐文章于 2024-07-20 15:10:58 发布
阅读量85 收藏 1
点赞数
分类专栏： JavaScript 文章标签： 原型模式 html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50260510/article/details/130168998
版权

一、浅拷贝

深拷贝和浅拷贝是指在赋值一个对象时，拷贝的深度不同。

浅拷贝：把对象拷贝给一个新的对象，开发中我们经常需要复制一个对象 如果直接赋值，则复制的是地址，修改任何一个对象，另一个对象都会变化

1. 1 拷贝对象：

1.Object. assign()  

2.展开运算符  {...obj}

代码分享：

<!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>浅拷贝-对象拷贝的两种方法</title>
</head>

<body>
  <script>
    // 浅拷贝方法

    // 1. 对象拷贝
    const obj = {
      name: '佩奇'
    }
    // 1.1 Object.assign()
    const newObj = {}
    Object.assign(newObj, obj)
    // console.log(newObj)
    console.log(newObj === obj)  // false
    newObj.name = '乔治'
    console.log(obj)
    console.log(newObj)

    // 1.2 展开运算符
    const newObj = { ...obj }
    console.log(newObj === obj)  // false
    newObj.name = '乔治'
    console.log(obj)
    console.log(newObj)


    
  </script>
</body>

</html>

1.2 拷贝数组：

1.Array.prototype.concat()  

2.展开运算符 [...arr]

代码分享：

<!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>浅拷贝方法-数组</title>
</head>

<body>
  <script>
    // 浅拷贝方法
    // // 2. 数组拷贝
    const arr = ['佩奇', '乔治']
    // 2.1 concat 方法实现数组浅拷贝
    const arr1 = []
    const newArr = arr1.concat(arr)
    console.log(newArr)
    newArr[1] = '猪爸爸'
    console.log(arr)
    console.log(newArr)

    // 2.2 展开运算符
    const newArr = [...arr]
    console.log(newArr)
    newArr[1] = '猪爸爸'
    console.log(arr)
    console.log(newArr)

  </script>
</body>

</html>

1.3 浅拷贝的问题：

浅拷贝只会拷贝对象的第一层属性，如果这些属性是对象，则不会对这些对象进行拷贝，而是直接复制对象的引用。这意味着，对于浅拷贝后的对象，如果原对象的属性值发生了变化，浅拷贝后的对象的属性值也会跟着发生变化。

代码分享：

<!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>浅拷贝存在的问题</title>
</head>

<body>
  <script>
    // 浅拷贝方法
    // 3. 浅拷贝的问题如果遇到多层拷贝还是会影响原来的对象
    const obj = {
      name: '佩奇',
      family: {
        father: '猪爸爸'
      }
    }
    const newObj = { ...obj }
    // console.log(newObj)
    newObj.family.father = 'dad'
    console.log(newObj)
    console.log(obj)
  </script>
</body>

</html>

效果展示：

 

二、深拷贝

深拷贝：拷贝多层，不再拷贝地址

实现深拷贝三种方式？

（1）利用JSON序列化（常用）

（2）利用js库 lodash里面的  _.cloneDeep() （常用）

（3）自己利用递归函数书写深拷贝（理解）

在进行深拷贝时，会拷贝所有的属性，并且如果这些属性是对象，也会对这些对象进行深拷贝，直到最底层的基本数据类型为止。这意味着，对于深拷贝后的对象，即使原对象的属性值发生了变化，深拷贝后的对象的属性值也不会受到影响。在开发中，一般如果我想要使用这个对象内的数据，但是不想修改原本的对象内的数据内容时，使用深浅拷贝来复制数据，并对新的对象内的数据进行操作。

2.1 通过 JSON 序列化实现

<!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>深拷贝-JSON序列化</title>
</head>

<body>
  <script>
    // 深拷贝实现方式一：JSON序列化（常用的方式）
    // const obj = {
    //   name: '佩奇',
    //   family: {
    //     father: '猪爸爸'
    //   },
    //   hobby: ['跳泥坑', '唱歌']
    // }

    // // console.log(JSON.stringify(obj))
    // // console.log(JSON.parse(JSON.stringify(obj)))
    // const newObj = JSON.parse(JSON.stringify(obj))
    // console.log(newObj === obj)  // false
    // newObj.family.father = 'dad'
    // console.log(obj)
    // console.log(newObj)

    // 注意事项：JSON.stringify序列化的时候会忽略 function undefined
    const obj = {
      name: '佩奇',
      love: undefined,
      family: {
        father: '猪爸爸'
      },
      hobby: ['跳泥坑', '唱歌'],
      sayHi() {
        console.log('我会唱歌')
      }
    }
    const newObj = JSON.parse(JSON.stringify(obj))
    console.log(newObj)
  </script>
</body>

</html>

2.2 lodash库 实现     

<!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>深拷贝-lodash库实现</title>
</head>

<body>
  <!-- 引入lodash库 -->
  <script src="./js/lodash.min.js"></script>
  <script>
    const obj = {
      name: '佩奇',
      love: undefined,
      family: {
        father: '猪爸爸'
      },
      hobby: ['跳泥坑', '唱歌'],
      sayHi() {
        console.log('我会唱歌')
      }
    }
    // lodash 库实现
    const newObj = _.cloneDeep(obj)
    // console.log(newObj)
    newObj.family.father = 'dad'
    console.log(obj)
    console.log(newObj)

  </script>
</body>

</html>

2.3 通过递归实现

<!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>深拷贝-递归实现深拷贝</title>
</head>

<body>
  <script>
    // 递归实现深拷贝 - 简版实现对象和数组的拷贝
    const obj = {
      name: '佩奇',
      family: {
        father: '猪爸爸'
      },
      hobby: ['跳泥坑', '唱歌'],
    }

    // 封装深拷贝函数 cloneDeep()
    function cloneDeep(oldObj) {
      // 先判断拷贝的是数组还是对象
      const newObj = Array.isArray(oldObj) ? [] : {}

      // 遍历拷贝属性和值
      for (let k in oldObj) {
        // console.log(k)  // k 是属性
        // console.log(oldObj[k])  // oldObj[k] 是属性值
        // 把旧对象的值给新对象的属性
        if (typeof oldObj[k] === 'object') {
          // 如果属性值是引用数据类型，则需要递归再次拷贝
          newObj[k] = cloneDeep(oldObj[k])

        } else {
          // 否则属性值是基本数据类型，则直接赋值即可
          newObj[k] = oldObj[k]
        }
      }

      // 返回新对象
      return newObj
    }
    const newObj = cloneDeep(obj)
    newObj.family.father = 'dad'
    console.log(newObj)
    console.log(obj) 
  </script>
</body>

</html>

三、异常处理

3.1 throw 抛异常

异常处理是指预估代码执行过程中可能发生的错误，然后最大程度的避免错误的发生导致整个程序无法继续运行

总结：

1. throw 抛出异常信息，程序也会终止执行

2. throw 后面跟的是错误提示信息

3. Error 对象配合 throw 使用，能够设置更详细的错误信息

代码分享：

<!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>异常处理-throw抛出异常</title>
</head>

<body>
  <script>
    // 异常处理 - throw抛出异常
    function count(x, y) {
      if (!x || !y) {
        // throw '请输入参数'
        throw new Error('函数的参数不能为空')
        console.log(111)
      }
      return x + y
    }
    count()
  </script>
</body>

</html>

效果展示：

3.2 try /catch 捕获异常 

我们想要测试某些代码是否有异常，可以通过try / catch 捕获错误信息（浏览器提供的错误信息）   try 试试   catch 拦住  finally  最后

说明： 1. 将预估可能发生错误的代码写在 try 代码段中 2. 如果 try 代码段中出现错误后，会执行 catch 代码段，并截获到错误信息 3. finally  不管是否有错误，都会执行

代码分享：

<!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>try/catch 捕获错误信息</title>
</head>

<body>
  <p>我是测试文字</p>
  <script>
    // try/catch 捕获错误信息
    try {
      // 要写测试的代码可能出现错误的代码
      const p = document.querySelector('.p')
      p.style.color = 'red'
    } catch (error) {
      // 如果try里面的代码出现错误，则进入catch ， 参数 error 是错误信息
      // console.log(error)
      throw error
    } finally {
      // 不管代码是否有错误都会执行
      console.log('不管代码是否有错误都会执行')
    }

  </script>
</body>

</html>

效果展示：

3.3 debugger 

debugger 语句调用调试功能，例如设置断点

代码分享：

<!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>异常处理-debugger</title>
</head>

<body>
  <script>
    // 异常处理 -debugger
    const obj = {
      name: '佩奇',
      family: {
        father: '猪爸爸'
      },
      hobby: ['跳泥坑', '唱歌'],
    }
    // 封装深拷贝函数 cloneDeep()
    function cloneDeep(oldObj) {
      const newObj = Array.isArray(oldObj) ? [] : {}
      debugger9
      for (let k in oldObj) {
        if (typeof oldObj[k] === 'object') {
          newObj[k] = cloneDeep(oldObj[k])

        } else {
          newObj[k] = oldObj[k]
        }
      }
      return newObj
    }
    const newObj = cloneDeep(obj)
    newObj.family.father = 'dad'
    console.log(newObj)
    console.log(obj)



  </script>
</body>

</html>

效果展示：

 

你想要那颗糖
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android下Activity间通信序列化过程中的深浅拷贝浅析
08-29
本文将重点解析Android下Activity间通信时涉及到的深浅拷贝概念，以及如何在实际应用中正确使用。 首先，我们需要理解深拷贝和浅拷贝的概念。在Java中，拷贝通常指的是对象复制。浅拷贝（Shallow Copy）是指创建一...
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
09-17
Python编程语言中有许多核心概念，其中包括闭包、深浅拷贝、垃圾回收和with语句。这些知识点对于理解和编写高效、安全的代码至关重要。 **1. 闭包** 闭包是一种特殊的函数，它记住了自己被创建时的环境，即能够访问...
8.06 深浅拷贝+异常处理
weixin_30660027的博客
08-06 98
目录 8.06 深浅拷贝+异常处理 拷贝（赋值） 浅拷贝 深拷贝 扩展-可变or不可变 异常处理 什么是异常 语法异常 逻辑异常 异常种类 异常处理 try ....
前端 - 笔记 - JavaScript - 高级【深浅拷贝 + 异常处理（throw、try-catch） + this指向 + 性能优化（防抖 + 节流）】
qq_48937489的博客
03-13 913
❗❗开发中我们经常需要复制一个对象。和只针对。
JS深浅拷贝异常处理
caiyijing_的博客
03-21 45
js
深浅拷贝与异常处理
djbktqw5273的博客
08-06 103
Python深浅拷贝 拷贝（赋值） 当lt2为lt的拷贝对象时，lt内的可变化类型变化，lt2变化；lt内的不可变类型变化,lt2变化 使用的是简单的赋值 lt = [1, 2, 3] lt2 = lt lt.append(4) print(lt) # 因为列表是可变类型，所以lt的值变化，lt2的值也会跟着变化 print(lt2) 结果为： [1, 2, 3, 4] [1, 2...
前端JavaScript笔记整理
04-18
JavaScript基础：变量、常量、数据类型、类型转换、运算符、语句、数组、函数、对象、堆栈 ...JavaScript高级：作用域、函数进阶、解构赋值、构造函数、编程思想、原型、深浅拷贝、异常处理、this、防抖节流
16-17 秋冬《面向对象程序设计》 Final Examination with answer1
08-08
3. **构造函数与深浅拷贝**： 这段代码涉及到了类`A`和`B`的构造函数，以及拷贝构造函数。`A`类有一个默认构造函数和一个拷贝构造函数，`B`类继承自`A`并添加了自己的数据成员和构造函数。当创建`B`对象`b`和`c`时...
Python基础全套教程 细致讲解新手必备课件
04-15
异常处理.py 11_traceback模块.py 12_zipfile模块.p y 05_pickle.py 06_json模块.py 07_hashlib.p y 01_模块的概述.py 03_datetime模块.py 04_random 模块.py 02_time模块.py glance python_1_2 4_b ool类型.py 5_...
求立方体面积体积以及判断（c++）
XAX520_1314的博客
07-16 298
刷题
Synchronized升级到重量级锁会发生什么？
最新发布
m0_72410274的博客
07-20 278
升级为重量级锁之后会降级吗？
java设计模式：02-02-原型模式
Mr_Air_Boy的博客
07-17 358
原型模式（Prototype Pattern）用于创建重复的对象，同时又能保证性能。它属于创建型设计模式，使用现有的实例来创建新对象，而不是每次都通过实例化来创建新对象。原型模式通过克隆已有对象来创建新的实例。
js | 原型链
YuuuPeeiiiii的博客
07-16 245
为什么前者会输出Lucas 后者不会？call动作具体干了什么?
js | Core
YuuuPeeiiiii的博客
07-17 278
总结就是 proto 只是一个访问方式，现在慢慢被舍弃了，没显示，可能是浏览器的问题。实际上你仔细对比，只要是有[[prototype]]或者__proto__就行了。例如，下面的，son是对象，foo不是对象。打印出来的son，能看到有一个prototype 对象。_： 那[[prototype]]是私有属性，访问不了也改不了，那就不访问不改了？也就是标记对象是从哪个对象继承来的。_ 就是用改[[prototype]]的。[[prototype]] ：是对象的。_，只有[[protptype]]啊？
泛型新理解
qq_53374893的博客
07-19 258
若有返回值，他会在编译期间加上强制类型转换成你传入进去的类型，相同的类型，保证类型安全转换，若是不同类型，则会在编译期间报错，告诉你类型不正确，这就是 类型擦除！方法三 ： 因为给了 T的字节码对象，所以字节码对象是不会在编译期 擦除，所以编译还是知道 T是什么类型，也能够检测出 U的类型是不是 T的同类或子类。方法二 ：因为显示 约束了 T 的类型， 泛型会被擦除为People 类型的下届或者同级，所以编译器能够约束好 U的类型 是T 的同类或子类。加了这个是可以进行集合的强转泛型的，不加是转不了的。
Linux的热插拔UDEV机制和守护进程
weixin_54859557的博客
07-19 519
Linux的热插拔UDEV机制和守护进程
设计模式11-原型模式
qq_41810539的博客
07-19 941
通过对象创建模式绕开动态内存分配来避免创建过程中所导致的耦合过紧的问题。从而支持对象创建的稳定，它是接口抽象之后的第一步工作。原型模式同样用于隔离类对象的使用者和具体类型之间的耦合关系，同样要求这些异变类拥有稳定的接口。原型模式对于如何创建异变类的实体对象，采用原型克隆的方法来做。它使得我们可以非常灵活的动态创建。拥有某些稳定接口的新对象。所需工作仅仅是注册一个新类的对象即原型，然后在任何需要的地方克隆。原型模式中的克隆方法可以利用某些框架中的序列化，来实现深拷贝。
FATE Flow 源码解析 - 日志输出机制
易迟的专栏
07-17 840
在之前的文章中介绍了 FATE 的作业处理流程，在实际的使用过程中，为了查找执行中的异常，需要借助运行生成的日志，但是 FATE-Flow 包含的流程比较复杂，对应的日志也很多，而且分散在不同的文件中，在这篇文章中就对 FATE-Flow 的日志机制进行梳理，帮助大家了解 Python 服务中实现一个更加灵活的日志机制。
"Python面试题36道及答案，特点和优点，深浅拷贝，列表和元组区别
除了这种基本的异常处理方式外，在 Python 中还有更多的高级异常处理方式，如自定义异常、捕获特定类型的异常等。Python 中如何进行模块的导入?在 Python 中，模块的导入是通过 import 关键字来实现的。具体的操作...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值