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

JavaScript 高级 （完结）

news 2025/9/17 20:24:27

目录

深浅拷贝

浅拷贝

深拷贝

递归实现深拷贝

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

JSON序列化

异常处理

throw 抛异常

try /catch 捕获异常

debugg

处理this

this指向

普通函数

箭头函数

改变this

call()

apply()

bind()

call apply bind 总结

性能优化

防抖

节流

深浅拷贝

浅拷贝

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

浅拷贝：拷贝的是地址

常见方法：

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

如果是简单数据类型拷贝值，引用数据类型拷贝的是地址 (简单理解： 如果是单层对象，没问题，如果有多层就有问题)

深拷贝

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

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

常见方法：

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

递归实现深拷贝

怎么实现深拷贝？

  1. 拷贝出来的新对象不会影响旧对象
  2. 要用到函数递归实现
  3. 遇到普通的拷贝直接赋值，如果遇到数组的，再次调用递归函数
  4. 如果遇到 对象形式 再次利用递归解决
  5. 先数组再对象

函数递归：

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

  • 简单理解:函数内部自己调用自己, 这个函数就是递归函数
  • 递归函数的作用和循环效果类似
  • 由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件 return
<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>

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

 <!-- 先引用 --><script src="./lodash.min.js"></script>
再调用const o = _.cloneDeep(obj)

JSON序列化

通过JSON.stringify()实现  
JSON.parse（）实现   
<body><script>// 把对象转换为 JSON 字符串// console.log(JSON.stringify(obj))//把字符串 用parse 转为对象 形成新对象const o = JSON.parse(JSON.stringify(obj))console.log(o)o.family.baby = '123'console.log(obj)</script>
</body>

异常处理

throw 抛异常

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

总结：

  1. throw 抛出异常信息，程序也会终止执行
  2. throw 后面跟的是错误提示信息
  3. Error 对象配合 throw 使用，能够设置更详细的错误信息

try /catch 捕获异常

总结：

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

debugg

相当于断点调试

处理this

this指向

普通函数

普通函数的调用方式决定了 this 的值，即【谁调用 this 的值指向谁】

注： 普通函数没有明确调用者时 this 值为 window，严格模式下没有调用者时 this 的值为 undefined

箭头函数

箭头函数中的 this 与普通函数完全不同，也不受调用方式的影响，事实上箭头函数中并不存在 this ！箭头函数中访问的 this 不过是箭头函数所在作用域的 this 变量。

改变this

call()

使用 call 方法调用函数，同时指定被调用函数中 this 的值

语法：fun.call(thisArg, arg1, arg2, ...)

总结：

  1. call 方法能够在调用函数的同时指定 this 的值
  2. 使用 call 方法调用函数时，第1个参数为 this 指定的值
  3. call 方法的其余参数会依次自动传入函数做为函数的参数

apply()

使用 apply 方法调用函数，同时指定被调用函数中 this 的值

语法：
fun.apply(thisArg, [argsArray])
总结：
  1. apply 方法能够在调用函数的同时指定 this 的值
  2. 使用 apply 方法调用函数时，第1个参数为 this 指定的值
  3. apply 方法第2个参数为数组，数组的单元值依次自动传入函数做为函数的参数
  4. 因此 apply 主要跟数组有关系，比如使用 Math.max() 求数组的最大值

bind()

bind 方法并不会调用函数，而是创建一个指定了 this 值的新函数

语法：
fun.bind(thisArg, arg1, arg2, ...)
  • 返回由指定的 this 值和初始化参数改造的 原函数拷贝 （新函数）
  • 因此当我们只是想改变 this 指向，并且不想调用这个函数的时候，可以使用 bind，比如改变定时器内部的 this指向

注：bind 方法创建新的函数，与原函数的唯一的变化是改变了 this 的值。

call apply bind 总结

  相同点:
  • 都可以改变函数内部的this指向.
区别点:
  • call 和 apply 会调用函数, 并且改变函数内部this指向.
  •  call 和 apply 传递的参数不一样, call 传递参数 aru1, aru2..形式 apply 必须数组形式[arg]
  •  bind 不会调用函数, 可以改变函数内部this指向.
  主要应用场景:
  •  call 调用函数并且可以传递参数
  •  apply 经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
  • bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向

性能优化

防抖

  1. 防抖（debounce） 所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间
开发使用场景- 搜索框防抖 
<script>const box = document.querySelector('.box')let i = 1  // 让这个变量++// 鼠标移动函数function mouseMove() {box.innerHTML = ++i// 如果里面存在大量操作 dom 的情况，可能会卡顿}// 防抖函数function debounce(fn, t) {let timeIdreturn function () {// 如果有定时器就清除if (timeId) clearTimeout(timeId)// 开启定时器 200timeId = setTimeout(function () {fn()}, t)}}// box.addEventListener('mousemove', mouseMove)box.addEventListener('mousemove', debounce(mouseMove, 200))</script>

防抖函数怎么实现： 核心就是利用setTimeout定时器来实现

1、声明定时器变量

2、每次触发时间都要判断是否有定时器 如果有就先清除以前的定时器

3、如果没有定时器 则开启定时器 存到定时器变量里面

4、定时器里面写函数调用

节流

  1. 节流（throttle） 所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数

const box = document.querySelector('.box')let i = 1  // 让这个变量++// 鼠标移动函数function mouseMove() {box.innerHTML = ++i// 如果里面存在大量操作 dom 的情况，可能会卡顿}// console.log(mouseMove)// 节流函数 throttle function throttle(fn, t) {// 起始时间let startTime = 0return function () {// 得到当前的时间let now = Date.now()// 判断如果大于等于 500 采取调用函数if (now - startTime >= t) {// 调用函数fn()// 起始的时间 = 现在的时间   写在调用函数的下面 startTime = now}}}box.addEventListener('mousemove', throttle(mouseMove, 500))

 

<script src="./lodash.min.js"></script><script>const box = document.querySelector('.box')let i = 1  // 让这个变量++// 鼠标移动函数function mouseMove() {box.innerHTML = ++i// 如果里面存在大量操作 dom 的情况，可能会卡顿}// box.addEventListener('mousemove', mouseMove)// lodash 节流写法// box.addEventListener('mousemove', _.throttle(mouseMove, 500))// lodash 防抖的写法box.addEventListener('mousemove', _.debounce(mouseMove, 500))</script>

相关文章：

JavaScript 高级 （完结）

目录 深浅拷贝 浅拷贝 深拷贝 递归实现深拷贝 js库lodash里面cloneDeep内部实现了深拷贝 JSON序列化 异常处理 throw 抛异常 try /catch 捕获异常 debugg 处理this this指向 普通函数 箭头函数 改变this call() apply() bind() call apply bind 总结 性能优化…...

编程日记 2023/5/31 22:27:56

【P30】JMeter 事务控制器（Transaction Controller）

文章目录 一、事务控制器&#xff08;Transaction Controller&#xff09;参数说明二、测试计划设计2.2.1、勾选 Generate parent sample2.2.1、勾选 Include duration of timer and pre-post processors in generated sample 一、事务控制器&#xff08;Transaction Controlle…...

编程日记 2023/5/31 22:22:55

【MySQL】MySQL的事务原理和实现？

文章目录 MySQL事务的底层实现原理一、事务的目的可靠性和并发处理 二、实现事务功能的三个技术2.1 redo log 与 undo log介绍2.1.1 redo log2.1.2undo log 2.2 mysql锁技术2.2.1 mysql锁技术 2.3 MVCC基础 三、事务的实现3.1 原子性的实现3.1.1 undo log 的生成3.1.2 根据undo…...

编程日记 2023/5/31 22:17:49

S7-300Smart1200的ISO on TCP通信

1、西门子PLC的通信资源 1.1 S7-1200 的PROFINET 通信口 S7-1200 CPU 本体上集成了一个 PROFINET 通信口，支持以太网和基于 TCP/IP 的通信标准。使用这个通信口可以实现 S7-1200 CPU 与编程设备的通信，与HMI触摸屏的通信，以及与其它 CPU 之间的通信。这个PROFINET 物理接口…...

编程日记 2023/5/31 22:12:48

Spark写入Hive报错Mkdir failed on :com.alibaba.jfs.JindoRequestPath

1. 报错内容 23/05/31 14:32:13 INFO [Driver] FsStats: cmdmkdirs, srcoss://sync-to-bi.[马赛克].aliyuncs.com/tmp/hive, dstnull, size0, parameterFsPermission:rwx-wx-wx, time-in-ms32, version3.5.0 23/05/31 14:32:13 ERROR [Driver] ApplicationMaster: User class …...

编程日记 2023/5/31 22:07:47

分布式id解决方法--雪花算法

uuid&#xff0c;jdk自带&#xff0c;但是数据库性能差&#xff0c;32位呀。 mysql数据库主键越短越好&#xff0c;Btree产生节点分裂&#xff0c;大大降低数据库性能&#xff0c;所以uuid不建议。 redis的自增&#xff0c;但是要配置维护redis集群&#xff0c;就为了一个id&a…...

编程日记 2023/5/31 22:02:46

5年经验之谈：月薪3000到30000，测试工程师的变“行”记

自我介绍下&#xff0c;我是一名转IT测试人&#xff0c;我的专业是化学&#xff0c;去化工厂实习才发现这专业的坑人之处&#xff0c;化学试剂害人不浅&#xff0c;有毒&#xff0c;易燃易爆&#xff0c;实验室经常用丙酮&#xff0c;甲醇&#xff0c;四氯化碳&#xff0c;接触…...

编程日记 2023/5/31 21:57:45

PMP考试都是什么题？

PMP新版大纲加入了ACP敏捷管理的内容&#xff0c;说是敏捷混合题型占到了 50%&#xff0c;但是这次318的考试&#xff0c;敏捷题占了大半&#xff0c;都说敏捷和情景快要占到80%-90%。 所以有友友说开了四个小时盲盒&#xff0c;题目读不懂&#xff0c;或者觉得4个选项都不对或…...

编程日记 2023/5/31 21:52:43

macbook2023系统清理软件cleanmymac中文版

cleanmymac x 中文版基本都是大家首选Mac清理软件了。它集各种功能于一身&#xff0c;几乎满足用户所有的清理需求。它可以清理&#xff0c;优化&#xff0c;保养和监测您的电脑&#xff0c;确保您的Mac运行畅通无阻&#xff01;支持一键快速清理Mac&#xff0c;快速检查并安全…...

编程日记 2023/5/31 21:47:42

基于Python+AIML+Tornado的智能聊天机器人（NLP+深度学习）含全部工程源码+语料库 适合个人二次开发

目录 前言总体设计系统整体结构图系统流程图 运行环境Python 环境Tornado 环境 模块实现1. 前端2. 后端3. 语料库4. 系统测试 其它资料下载 前言 本项目旨在利用AIML技术构建一个聊天机器人&#xff0c;实现用户通过聊天界面与机器人交互的功能。通过提供的工程源代码&#xf…...

编程日记 2023/5/31 21:42:41

算法Day15 | 层序遍历，102，107，199，637，429，515，116，117，104，111，226，101

Day15 层序遍历102.二叉树的层序遍历107.二叉树的层次遍历 II199.二叉树的右视图637.二叉树的层平均值429.N叉树的层序遍历515.在每个树行中找最大值116.填充每个节点的下一个右侧节点指针117.填充每个节点的下一个右侧节点指针II104.二叉树的最大深度111.二叉树的最小深度 226…...

编程日记 2023/5/31 21:37:40

Prometheus+Grafana学习(十一)安装使用pushgateway

Pushgateway允许短暂和批量作业将其指标暴露给 Prometheus。由于这些工作的生命周期可能不足够长&#xff0c;不能够存在足够的时间以让 Prometheus 抓取它们的指标。Pushgateway 允许它们可以将其指标推送到 Pushgateway&#xff0c;然后 Pushgateway 再将这些指标暴露给 Prom…...

编程日记 2023/5/31 21:32:39

深入理解C/C++预处理器指令#pragma once以及与ifndef的比较

#pragma once用法总结 为了防止重复引用造成二义性 在C/C中&#xff0c;在使用预编译指令#include的时候&#xff0c;为了防止重复引用造成二义性&#xff0c;通常有两种方式 第一种是#ifndef指令防止代码块重复引用&#xff0c;比如说 #ifndef _CODE_BLOCK #define _CODE_BLO…...

编程日记 2023/5/31 21:27:38

git 环境配置 + gitee拉取代码

好嘛 配环境的时候 老是忘记这个命令行 干脆自己写一个记录一下 也不用搜了 1.先从git官网下载git 安装 2.然后从gitee拉取代码的时候提示 这是因为换了新电脑没有加入新的公钥啦 哎 所以老是记不住命令行 first &#xff1a; git config --global user.name “Your Name” …...

编程日记 2023/5/31 21:22:37

港联证券|港股拥抱特专科技企业 内资券商“修炼内功”蓄势而为

港股市场新一轮改革举措渐次落地。特别是港交所推出特专科技公司上市机制&#xff0c;吸引符合资格的科技企业申请赴港上市&#xff0c;成为这一轮港股市场改革的“重头戏”。 作为香港资本市场的重要参与者&#xff0c;内资券商立足香港、背靠内地、辐射全球&#xff0c;走出一…...

编程日记 2023/5/31 21:17:35

多项创新技术加持，实现零COGS的Microsoft Editor语法检查器

编者按&#xff1a;Microsoft Editor 是一款人工智能写作辅助工具&#xff0c;其中的语法检查器&#xff08;grammar checker&#xff09;功能不仅可以帮助不同水平、领域的用户在写作过程中检查语法错误&#xff0c;还可以对错误进行解释并给出正确的修改建议。神经语法检查器…...

编程日记 2023/5/31 21:12:34

Python编程环境搭建:Windows中如何安装Python

在 Windows 上安装 Python 和安装普通软件一样简单&#xff0c;下载安装包以后猛击“下一步”即可。 Python 安装包下载地址&#xff1a;https://www.python.org/downloads/ 打开该链接&#xff0c;可以看到有两个版本的 Python&#xff0c;分别是 Python 3.x 和 Python 2.x&…...

编程日记 2023/5/31 21:07:33

Sui Builder House首尔站倒计时！

Sui主网上线后的第一场Builder House活动即将在韩国首尔举行&#xff0c;同期将举办首场线下面对面的黑客松。活动历时两天&#xff0c;将为与会者提供独特的学习、交流和娱乐的机会。活动详情请查看&#xff1a;Sui Builder House首尔站&#xff5c;主网上线后首次亮相。 Sui…...

编程日记 2023/5/31 21:02:32

Java设计模式-状态模式

简介 在软件开发领域&#xff0c;设计模式是一组经过验证的、被广泛接受的解决问题的方案。其中之一是状态模式&#xff0c;它提供了一种优雅的方式来管理对象的不同状态。 状态模式是一种行为型设计模式&#xff0c;它允许对象在内部状态发生改变时改变其行为。状态模式将对…...

编程日记 2023/5/31 20:57:31

智慧社区用什么技术开发

智慧社区是指利用信息技术和先进的管理理念&#xff0c;将社区内的各种公共服务进行整合和优化&#xff0c;提高社区居民的生活品质和社区管理的效率。为了实现智慧社区的建设&#xff0c;需要采用多种技术&#xff0c;包括但不限于以下几种&#xff1a; 1.物联网技术&#xf…...

编程日记 2023/5/31 20:52:30

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2025/9/9 10:11:47

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/8/14 5:51:59

代码规范和架构【立芯理论一】（2025.06.08）

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

编程新知 2025/9/2 5:09:11

从“安全密码”到测试体系：Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"&#xff1a;Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力&#xff0c;从金融交易到交通管控&#xff0c;这些关乎国计民生的关键领域…...

编程新知 2025/9/6 0:32:57

嵌入式常见 CPU 架构

架构类型架构厂商芯片厂商典型芯片特点与应用场景PICRISC (8/16 位)MicrochipMicrochipPIC16F877A、PIC18F4550简化指令集&#xff0c;单周期执行&#xff1b;低功耗、CIP 独立外设&#xff1b;用于家电、小电机控制、安防面板等嵌入式场景8051CISC (8 位)Intel&#xff08;原始…...

编程新知 2025/6/10 21:24:01

怎么开发一个网络协议模块（C语言框架）之(六) ——通用对象池总结(核心)

+---------------------------+ | operEntryTbl[] | ← 操作对象池 (对象数组) +---------------------------+ | 0 | 1 | 2 | ... | N-1 | +---------------------------+↓ 初始化时全部加入 +------------------------+ +-------------------------+ | …...

编程新知 2025/8/28 4:17:05

React核心概念：State是什么？如何用useState管理组件自己的数据？

系列回顾&#xff1a; 在上一篇《React入门第一步》中&#xff0c;我们已经成功创建并运行了第一个React项目。我们学会了用Vite初始化项目&#xff0c;并修改了App.jsx组件&#xff0c;让页面显示出我们想要的文字。但是&#xff0c;那个页面是“死”的&#xff0c;它只是静态…...

编程新知 2025/8/7 7:01:20

Python爬虫实战：研究Restkit库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代，互联网上存在着海量的有价值数据。如何高效地采集这些数据并将其应用于实际业务中，成为了许多企业和开发者关注的焦点。网络爬虫技术作为一种自动化的数据采集工具，可以帮助我们从网页中提取所需的信息。而 RESTful API …...

编程新知 2025/8/10 9:41:32

【1】跨越技术栈鸿沟：字节跳动开源TRAE AI编程IDE的实战体验

2024年初&#xff0c;人工智能编程工具领域发生了一次静默的变革。当字节跳动宣布退出其TRAE项目&#xff08;一款融合大型语言模型能力的云端AI编程IDE&#xff09;时&#xff0c;技术社区曾短暂叹息。然而这一退场并非终点——通过开源社区的接力&#xff0c;TRAE在WayToAGI等…...

编程新知 2025/9/13 0:08:45

Win系统权限提升篇UAC绕过DLL劫持未引号路径可控服务全检项目

应用场景&#xff1a; 1、常规某个机器被钓鱼后门攻击后&#xff0c;我们需要做更高权限操作或权限维持等。 2、内网域中某个机器被钓鱼后门攻击后&#xff0c;我们需要对后续内网域做安全测试。 #Win10&11-BypassUAC自动提权-MSF&UACME 为了远程执行目标的exe或者b…...

编程新知 2025/9/7 8:43:27