当前位置： 首页 > article >正文

JavaScript进阶(十二)

article 2025/9/11 23:05:51

第三部分：JavaScript进阶

目录

第三部分：JavaScript进阶

十二、深浅拷贝

12.1 浅拷贝

12.2 深拷贝

1. 通过递归实现深拷贝

2. js库lodash里面cloneDeep内部实现了深拷贝

3. 通过JSON.stringify()实现

十三、异常处理

13.1 throw抛异常

13.2 try /catch捕获异常

13.3 debugger

十四、处理this

14.1 this指向

1. 普通函数this指向

2. 箭头函数this指向

14.2 改变this

1. call() - 了解

2. apply() - 理解

3. bind() - 重点

call apply bind 总结

十五、性能优化

15.1 防抖

15.2 节流

十六、节流综合案例

案例-页面打开，可以记录上一次的视频播放位置

十二、深浅拷贝

开发中我们经常需要复制一个对象。如果直接用赋值会有下面问题：


 

12.1 浅拷贝

首先浅拷贝和深拷贝只针对引用类型

浅拷贝：拷贝的是地址常见方法

常见方法：

  1. 拷贝对象：Object.assgin() / 展开运算符...obj} 拷贝对象
  2. 拷贝数组：Array.prototype.concat() 或者[..arr]
     

总结：

1. 直接赋值和浅拷贝有什么区别?

  • 直接赋值的方法，只要是对象，都会相互影响，因为是直接拷贝对象栈里面的地址
  • 浅拷贝如果是一层对象，不相互影响，如果出现多层对象拷贝还会相互影响

2. 浅拷贝怎么理解?

  • 拷贝对象之后，里面的属性值是简单数据类型直接拷贝值
  • 如果属性值是引用数据类型则拷贝的是地址
     

12.2 深拷贝

首先浅拷贝和深拷贝只针对引用类型

深拷贝：拷贝的是对象，不是地址

常见方法：

1. 通过递归实现深拷贝
2. lodash/cloneDeep
3. 通过JSON.stringify()实现
 

1. 通过递归实现深拷贝

函数递归：如果一个函数在内部可以调用其本身，那么这个函数就是递归函数

  • 简单理解：函数内部自己调用自己，这个函数就是递归函数
  • 递归函数的作用和循环效果类似
  • 由于递归很容易发生“栈溢出”错误(stack overflow)，所以必须要加退出条件return
     

练习-利用递归函数实现setTimeout模拟setInterval效果

需求：
①页面每隔-秒输出当前的时间
②输出当前时间可以使用：new Date().toLocaleString()


 

通过递归函数实现深拷贝(简版)：

<!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>const obj = {uname: 'pink',age: 18,hobby: ['乒乓球', '足球'],family: {baby: '小pink'}}const o = {}// 拷贝函数function deepCopy(newObj, oldObj) {debuggerfor (let k in oldObj) {// 处理数组的问题  一定先写数组 在写 对象 不能颠倒if (oldObj[k] instanceof Array) {newObj[k] = []//  newObj[k] 接收 []  hobby//  oldObj[k]   ['乒乓球', '足球']deepCopy(newObj[k], oldObj[k])} else if (oldObj[k] instanceof Object) {newObj[k] = {}deepCopy(newObj[k], oldObj[k])}else {//  k  属性名 uname age    oldObj[k]  属性值  18// newObj[k]  === o.uname  给新对象添加属性newObj[k] = oldObj[k]}}}deepCopy(o, obj) // 函数调用  两个参数 o 新对象  obj 旧对象console.log(o)o.age = 20o.hobby[0] = '篮球'o.family.baby = '老pink'console.log(obj)console.log([1, 23] instanceof Object)// 复习// const obj = {//   uname: 'pink',//   age: 18,//   hobby: ['乒乓球', '足球']// }// function deepCopy({ }, oldObj) {//   // k 属性名  oldObj[k] 属性值//   for (let k in oldObj) {//     // 处理数组的问题   k 变量//     newObj[k] = oldObj[k]//     // o.uname = 'pink'//     // newObj.k  = 'pink'//   }// }</script>
</body></html>

2. js库lodash里面cloneDeep内部实现了深拷贝

Lodash网址：Lodash 简介 | Lodash中文文档 | Lodash中文网


 

3. 通过JSON.stringify()实现


 

总结：

1. 实现深拷贝三种方式?

    相关文章：

    JavaScript进阶(十二)

    第三部分：JavaScript进阶 目录 第三部分：JavaScript进阶 十二、深浅拷贝 12.1 浅拷贝 12.2 深拷贝 1. 通过递归实现深拷贝 2. js库lodash里面cloneDeep内部实现了深拷贝 3. 通过JSON.stringify()实现 十三、异常处理 13.1 throw抛异常 13.2 try /catch捕获异常 1…...

    编程日记 2025/9/2 13:33:11

    Honeywell CV-DINA-DI1624-2A 数字输入模块

    概述 型号&#xff1a;CV-DINA-DI1624-2A 类型&#xff1a;数字输入模块&#xff08;16通道&#xff0c;24V DC&#xff09; 制造商&#xff1a;霍尼韦尔&#xff08;Honeywell&#xff09;&#xff0c;属于其工业自动化或楼宇控制系统产品线。 主要功能&#xff1a; 采集16路数…...

    编程日记 2025/7/4 4:03:19

    中文域名25周年，取得哪些里程碑式的进展？

    二十五载中文域名路 第八届中文域名创新应用论坛在北京举办。与会领导专家回顾了中文域名发展历史&#xff0c;深入探讨了当下面临的机遇与挑战&#xff0c;并展望了未来的发展。 自2000年中国推出全球首个中文域名试验系统以来&#xff0c;中文域名已走过25年历程&#xff0c…...

    编程日记 2025/9/2 13:33:08

    HTTP协议接口三种测试方法之-postman

    HTTP协议作为现代Web开发的基石，其接口测试是开发过程中不可或缺的环节。Postman作为最流行的API测试工具之一，能够极大提升我们的测试效率。本文将详细介绍如何使用Postman进行HTTP接口测试。 一、HTTP协议基础回顾 在开始使用Postman之前，我们先简单回顾下HTTP协议的基本…...

    编程日记 2025/8/11 6:42:26

    【Linux cmd】查看 CPU 使用率的几个命令

    1、查看 CPU 使用情况 dstat -c usr 用户sys 系统idl 空闲 2、查看最占 CPU 的进程 dstat --top-cpu...

    编程日记 2025/8/18 1:21:35

    架空线路监控系统是针对高压架空输电线路设计的一种安全监测解决方案

    一、系统介绍 架空线路监控系统是在传统电网线路传输结构的基础上&#xff0c;增设的线路传输无线监控装置。它能够对高压传输线路自身危险点进行监控&#xff0c;也可以对线路闪络、线路舞动、线路二次回流、高压漏电等电力传输故障进行综合检验&#xff0c;是现代电力传输安…...

    编程日记 2025/7/9 2:42:12

    Kotlin Compose Button 实现长按监听并实现动画效果

    想要实现长按按钮开始录音&#xff0c;松开发送的功能。发现 Button 这个控件如果去监听这些按下&#xff0c;松开&#xff0c;长按等事件&#xff0c;发现是不会触发的&#xff0c;究其原因是 Button 已经提前消耗了这些事件所以导致&#xff0c;这些监听无法被触发。因此为了…...

    编程日记 2025/7/8 19:58:42

    应对进行性核上性麻痹，健康护理铸就温暖防线

    进行性核上性麻痹&#xff08;PSP&#xff09;是一种罕见的神经退行性疾病&#xff0c;主要影响患者的运动、平衡及吞咽等功能。针对这类患者&#xff0c;有效的健康护理对提升其生活质量、延缓病情发展至关重要。 在日常生活护理方面&#xff0c;由于患者存在平衡障碍和肌肉僵…...

    编程日记 2025/9/2 13:33:05

    python邮件地址检验 2024年信息素养大赛复赛/决赛真题 小学组/初中组 python编程挑战赛 真题详细解析

    python邮件地址检验 2024全国青少年信息素养大赛Python编程挑战赛复赛真题解析 博主推荐 所有考级比赛学习相关资料合集【推荐收藏】 1、Python比赛 信息素养大赛Python编程挑战赛 蓝桥杯python选拔赛真题详解 蓝桥杯python省赛真题详解 蓝桥杯python国赛真题详解 2、…...

    编程日记 2025/9/2 13:33:01

    CAD球体功能梯度材料3D插件

    插件介绍 CAD球体功能梯度材料3D插件可在AutoCAD内建立大小呈现梯度分布的球体及长方体孔隙三维模型。 功能梯度材料&#xff08;FGM&#xff09;模型包含大小梯度变化的球体及与之适配的长方体部件&#xff0c;可用于球体材料的梯度分布或梯度多孔结构材料建模。 插件支持…...

    编程日记 2025/9/7 1:59:24

    自制操作系统day9内存管理（cache、位图、列表管理、内存的释放）（ai辅助整理）

    day9内存管理 整理源文件&#xff08;harib06a&#xff09; 残留问题&#xff1a;鼠标指针的叠加处理不太顺利&#xff0c;以后处理 先介绍cache&#xff08;高速缓存&#xff09; 每次访问内存&#xff0c;都将所访问的地址和内容存入高速缓存&#xff0c; 往内存里写入数据…...

    编程日记 2025/9/9 0:27:57

    JavaWebsocket-demo

    Websocket客户端 pom依赖 <dependency><groupId>org.java-websocket</groupId><artifactId>Java-WebSocket</artifactId><version>1.4.0</version></dependency>客户端代码片段 Component Slf4j public class PositionAlarmL…...

    编程日记 2025/9/10 11:13:05

    特征学习：赋予机器学习 “慧眼” 的核心技术

    一、特征学习&#xff1a;从人工设计到智能发现的范式革新 1.1 核心定义与价值 特征学习的本质是让机器模仿人类大脑的认知过程 —— 例如&#xff0c;人类视觉系统通过视网膜→视神经→大脑皮层的层级处理&#xff0c;从像素中识别物体&#xff1b;特征学习则通过神经网络的卷…...

    编程日记 2025/9/4 7:47:50

    3D个人简历网站 7.联系我

    3D个人简历网站 7.联系我 修改Contact.jsx // 从 react 库导入 useRef 和 useState hooks import { useRef, useState } from "react";/*** Contact 组件&#xff0c;用于展示联系表单&#xff0c;处理用户表单输入和提交。* returns {JSX.Element} 包含联系表单的 …...

    编程日记 2025/9/2 13:32:44

    软考中级软件设计师——计算机系统篇

    一、数据的表示和运算 1、进制转换 1. 常见进制类型 二进制&#xff08;B&#xff09;&#xff1a;基数为2&#xff08;0,1&#xff09;&#xff0c;计算机底层使用。 八进制&#xff08;O&#xff09;&#xff1a;基数为8&#xff08;0-7&#xff09;&#xff0c;3位二进制…...

    编程日记 2025/9/5 3:49:03

    甘特图（项目计划图）

    甘特图是甘特在第一次世界大战时为了提供工人效率所创。 由时间&#xff08;顶部横坐标&#xff09;和工作事项&#xff08;左边纵坐标组成&#xff09; 假设&#xff0c;我要做大数据迁移&#xff08;一般半年&#xff0c;几PB的数据和上万个任务&#xff09; 类似于这种...

    编程日记 2025/9/2 13:32:36

    Java流式处理-Steam详解

    Java 8 引入的 Stream API 是一种强大的处理集合数据的工具&#xff0c;它允许你以声明式方式处理数据集合&#xff08;如 List、Set 等&#xff09;&#xff0c;并支持多种聚合操作&#xff08;如过滤、映射、排序、归约等&#xff09;。Stream API 可以显著提高代码的可读性和…...

    编程日记 2025/9/5 18:31:03

    windows服务器部署jenkins工具（一）

    jenkins作为一款常用的构建发布工具&#xff0c;极大的简化了项目部署发布流程。jenkins通常是部署在linux服务上&#xff0c;今天给大家分享的是windows服务器上如何搭建jenkins发布工具。 1.首先第一步还是看windows安装docker 这篇文章哈&#xff0c;当然也可以不采用docke…...

    编程日记 2025/9/8 9:35:19

    LCS4110R加密芯片在打印机墨盒的应用

    在打印机耗材行业&#xff0c;始终有一部分用户在谋求以某种方式破解、绕开厂商采取的各种限制措施使用第三方墨盒&#xff0c;低价克隆墨盒泛滥导致原厂利润流失、用户体验下降&#xff0c;甚至引发设备损坏风险。所以墨盒的兼容性与安全性一直是品牌商与用户的共同痛点。如何…...

    编程日记 2025/7/1 6:24:53

    什么是 API 管理？为什么管理 API 很重要？如何用 iPaaS 平台管理 API

    在当今数字化浪潮下&#xff0c;API&#xff08;ApplicationProgrammingInterface&#xff0c;应用程序编程接口&#xff09;作为连接不同系统、应用程序与设备的关键桥梁&#xff0c;其重要性日益凸显。而API管理则是把控API全生命周期&#xff0c;使其稳定、可靠、安全运转并…...

    编程日记 2025/9/1 0:11:16

    基于51单片机和8X8点阵屏、独立按键的飞行躲闪类小游戏

    目录 系列文章目录前言一、效果展示二、原理分析三、各模块代码1、8X8点阵屏2、独立按键3、定时器04、定时器1 四、主函数总结 系列文章目录 前言 用的是普中A2开发板。 【单片机】STC89C52RC 【频率】12T11.0592MHz 【外设】8X8点阵屏、独立按键 效果查看/操作演示&#xff…...

    编程日记 2025/9/3 14:17:12

    告别“盘丝洞”车间：4-20mA无线传输如何重构工厂神经网？

    4-20ma无线传输是利用无线模块将传统的温度、压力、液位等4-20mA电流信号转换为无线信号进行传输。这一技术突破了有线传输的限制&#xff0c;使得信号可以在更广泛的范围内进行灵活、快速的传递&#xff0c;无线传输距离可达到50KM。达泰4-20ma无线传输模块在实现工业现场应用…...

    编程日记 2025/9/5 19:09:34

    VMware虚拟机突然无法ssh连接

    遇到的情况&#xff1a; 功能全部正常的情况下&#xff0c;没有修改任何配置&#xff0c;重启电脑之后无法ssh连接 其实不太可能的可能原因&#xff1a; 1、虚拟机内部sshd服务未运行 systemctl status sshd systemctl start sshd 2、检查SSH端口监听 netstat -an | grep :…...

    编程日记 2025/9/5 19:09:25

    Android帧抢占协议技术剖析：触摸事件与UI绘制的智能调度优化方案

    简介 在移动应用开发中，触摸事件响应与UI绘制的同步竞争是导致卡顿和掉帧的主要原因之一。腾讯工程师提出的优先级策略通过紧急事件抢占、增量渲染机制和时间片补偿技术，有效解决了这一竞争问题。本文将深入分析这些技术原理，并提供完整的代码实现，帮助开发者构建更流畅的…...

    编程日记 2025/6/18 17:44:28

    Maven 项目介绍

    一、Maven 概述​ Maven 是一个基于 Java 的项目管理和构建自动化工具&#xff0c;由 Apache 软件基金会开发。它采用 “约定优于配置”&#xff08;Convention Over Configuration&#xff09;的原则&#xff0c;通过标准化的项目结构和配置&#xff0c;极大地简化了项目的构建…...

    编程日记 2025/6/5 5:57:27

    班迪录屏--解决视频剪辑时声音和画面不同步的问题

    原文网址&#xff1a;班迪录屏--解决视频剪辑时声音和画面不同步的问题_IT利刃出鞘的博客-CSDN博客 简介 本文介绍如何用班迪录屏解决视频剪辑时声音和画面不同步的问题。 问题描述 我用班迪录屏录了视频&#xff0c;用剪映进行剪辑&#xff0c;结果发现在剪辑时声音和画面…...

    编程日记 2025/9/5 19:09:15

    Git上传项目到GitHub

    Git上传项目到GitHub 下载Git客户端配置Git设置GitHub上传本地项目到Github 下载Git客户端 网址&#xff1a;Git Windows客户端。选择Standalone Installer(单独安装程序)&#xff0c;并点击64bit Git for Windows Setup(64位Git for Windows安装程序)进行下载。然后一路默认选…...

    编程日记 2025/9/5 19:08:59

    【工具】Quicker/VBA｜PPT 在指定位置添加有颜色的参考线

    文章目录 效果展示使用方式技术原理更多原理ActivePresentation.Guides 概述主要属性和方法使用示例添加水平参考线添加垂直参考线删除所有参考线获取参考线数量 注意事项 致谢 效果展示 先展示效果&#xff1a; Quicker 动作&#xff1a;VBA 添加参考线 - Quicker 动作 使用…...

    编程日记 2025/9/5 19:08:50

    第34节：迁移学习中的特征提取方法

    迁移学习中的特征提取方法：原理、技术与应用 1. 迁移学习与特征提取概述 迁移学习（Transfer Learning）作为机器学习领域的重要范式 通过将源领域（source domain）学到的知识迁移到目标领域（target domain），有效解决了传统机器学习需要大量标注数据的瓶颈问题。 在迁…...

    编程日记 2025/9/5 19:08:41

    C语言中的文件I/O

    C标准I/O库函数 1、C标准I/O库函数1.1、打开/写入/读取/关闭文件1.2、读取文件数据1.2.1、fgetc1.2.2、fgets1.2.3、fscanf1.3、标准输入/输出/错误2、系统调用2.1、常用的系统调用2.2、综合小demo3、文件描述符3.1、定义3.2、`文件描述符`关联的数据结构3.2.1、struct file3.2…...

    编程日记 2025/9/10 6:10:47