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

JS进阶——高级技巧

news 2026/1/21 0:13:07

版权声明
本文章来源于B站上的某马课程，由本人整理，仅供学习交流使用。如涉及侵权问题，请立即与本人联系，本人将积极配合删除相关内容。感谢理解和支持，本人致力于维护原创作品的权益，共同营造一个尊重知识产权的良好环境。

深浅拷贝

浅拷贝

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

浅拷贝：拷贝的是地址

常见方法：

拷贝对象：Object.assgin() / 展开运算符 {…obj} 拷贝对象

const obj = {uname: 'pink',age: 18,family: {baby: '小pink'}}// 浅拷贝// const o = { ...obj }// console.log(o)// o.age = 20// console.log(o)// console.log(obj)const o = {}Object.assign(o, obj)o.age = 20o.family.baby = '老pink'console.log(o)console.log(obj)

拷贝数组：Array.prototype.concat() 或者 […arr]

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

深拷贝

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

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

常见方法：

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

递归实现深拷贝

函数递归：

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

简单理解:函数内部自己调用自己, 这个函数就是递归函数
递归函数的作用和循环效果类似
由于递归很容易发生“栈溢出”错误（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内部实现了深拷贝

<body><!-- 先引用 --><script src="./lodash.min.js"></script><script>const obj = {uname: 'pink',age: 18,hobby: ['乒乓球', '足球'],family: {baby: '小pink'}}const o = _.cloneDeep(obj)console.log(o)o.family.baby = '老pink'console.log(obj)</script>
</body>

JSON序列化

<body><script>const obj = {uname: 'pink',age: 18,hobby: ['乒乓球', '足球'],family: {baby: '小pink'}}// 把对象转换为 JSON 字符串// console.log(JSON.stringify(obj))const o = JSON.parse(JSON.stringify(obj))console.log(o)o.family.baby = '123'console.log(obj)</script>
</body>

异常处理

了解 JavaScript 中程序异常处理的方法，提升代码运行的健壮性。

throw

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

总结：

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

<script>function counter(x, y) {if(!x || !y) {// throw '参数不能为空!';throw new Error('参数不能为空!')}return x + y}counter()
</script>

总结：

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

try … catch

<script>function foo() {try {// 查找 DOM 节点const p = document.querySelector('.p')p.style.color = 'red'} catch (error) {// try 代码段中执行有错误时，会执行 catch 代码段// 查看错误信息console.log(error.message)// 终止代码继续执行return}finally {alert('执行')}console.log('如果出现错误，我的语句不会执行')}foo()
</script>

总结：

try...catch 用于捕获错误信息
将预估可能发生错误的代码写在 try 代码段中
如果 try 代码段中出现错误后，会执行 catch 代码段，并截获到错误信息

debugger

相当于断点调试

处理this

了解函数中 this 在不同场景下的默认值，知道动态指定函数 this 值的方法。

this 是 JavaScript 最具“魅惑”的知识点，不同的应用场合 this 的取值可能会有意想不到的结果，在此我们对以往学习过的关于【 this 默认的取值】情况进行归纳和总结。

普通函数

普通函数的调用方式决定了 this 的值，即【谁调用 this 的值指向谁】，如下代码所示：

<script>// 普通函数function sayHi() {console.log(this)  }// 函数表达式const sayHello = function () {console.log(this)}// 函数的调用方式决定了 this 的值sayHi() // windowwindow.sayHi()// 普通对象const user = {name: '小明',walk: function () {console.log(this)}}// 动态为 user 添加方法user.sayHi = sayHiuesr.sayHello = sayHello// 函数调用方式，决定了 this 的值user.sayHi()user.sayHello()
</script>

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

箭头函数

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

<script>console.log(this) // 此处为 window// 箭头函数const sayHi = function() {console.log(this) // 该箭头函数中的 this 为函数声明环境中 this 一致}// 普通对象const user = {name: '小明',// 该箭头函数中的 this 为函数声明环境中 this 一致walk: () => {console.log(this)},sleep: function () {let str = 'hello'console.log(this)let fn = () => {console.log(str)console.log(this) // 该箭头函数中的 this 与 sleep 中的 this 一致}// 调用箭头函数fn();}}// 动态添加方法user.sayHi = sayHi// 函数调用user.sayHi()user.sleep()user.walk()
</script>

在开发中【使用箭头函数前需要考虑函数中 this 的值】，事件回调函数使用箭头函数时，this 为全局的 window，因此DOM事件回调函数不推荐使用箭头函数，如下代码所示：

<script>// DOM 节点const btn = document.querySelector('.btn')// 箭头函数 此时 this 指向了 windowbtn.addEventListener('click', () => {console.log(this)})// 普通函数 此时 this 指向了 DOM 对象btn.addEventListener('click', function () {console.log(this)})
</script>

同样由于箭头函数 this 的原因，基于原型的面向对象也不推荐采用箭头函数，如下代码所示：

<script>function Person() {}// 原型对像上添加了箭头函数Person.prototype.walk = () => {console.log('人都要走路...')console.log(this); // window}const p1 = new Person()p1.walk()
</script>

改变this指向

以上归纳了普通函数和箭头函数中关于 this 默认值的情形，不仅如此 JavaScript 中还允许指定函数中 this 的指向，有 3 个方法可以动态指定普通函数中 this 的指向：

call

使用 call 方法调用函数，同时指定函数中 this 的值，使用方法如下代码所示：

<script>// 普通函数function sayHi() {console.log(this);}let user = {name: '小明',age: 18}let student = {name: '小红',age: 16}// 调用函数并指定 this 的值sayHi.call(user); // this 值为 usersayHi.call(student); // this 值为 student// 求和函数function counter(x, y) {return x + y;}// 调用 counter 函数，并传入参数let result = counter.call(null, 5, 10);console.log(result);
</script>

总结：

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

apply

使用 call 方法调用函数，同时指定函数中 this 的值，使用方法如下代码所示：

<script>// 普通函数function sayHi() {console.log(this)}let user = {name: '小明',age: 18}let student = {name: '小红',age: 16}// 调用函数并指定 this 的值sayHi.apply(user) // this 值为 usersayHi.apply(student) // this 值为 student// 求和函数function counter(x, y) {return x + y}// 调用 counter 函数，并传入参数let result = counter.apply(null, [5, 10])console.log(result)
</script>

总结：

apply 方法能够在调用函数的同时指定 this 的值
使用 apply 方法调用函数时，第1个参数为 this 指定的值
apply 方法第2个参数为数组，数组的单元值依次自动传入函数做为函数的参数

bind

bind 方法并不会调用函数，而是创建一个指定了 this 值的新函数，使用方法如下代码所示：

<script>// 普通函数function sayHi() {console.log(this)}let user = {name: '小明',age: 18}// 调用 bind 指定 this 的值let sayHello = sayHi.bind(user);// 调用使用 bind 创建的新函数sayHello()
</script>

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

防抖节流

防抖（debounce）
所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间
节流（throttle）
所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数

TG-ADMIN 权限管理系统

项目简介该项目是一款基于 SpringBoot + Vue2 + Jwt + ElementUi的 RBAC模型管理系统。主要以自定义拦截器和jwt结合进行权限验证通过自定义指令实现按钮级别权限，使用经典的RBAC模型什么是RBAC？ 1、RBAC模型概述 RBAC模型（Role-Based Access Control：基于角色的…...

编程日记 2024/3/2 6:50:39

十五届蓝桥杯第三期模拟赛题单（C++、java、Python）

备战2024年蓝桥杯省赛第三期模拟赛题单备战Python大学A组第一题【问题描述】请问 2023 有多少个约数？即有多少个正整数，使得 2023 是这个正整数的整数倍。【问题描述】这是一道结果填空的题，你只需要算出结果后提交即可。本题的结果…...

编程日记 2024/3/2 6:48:37

嵌入式驱动学习第一周——git的使用

前言本文主要介绍git的使用，包括介绍git，gitee，以及使用gitee创建仓库并托管代码嵌入式驱动学习专栏将详细记录博主学习驱动的详细过程，未来预计四个月将高强度更新本专栏，喜欢的可以关注本博主并订阅本专栏&#xf…...

编程日记 2024/3/2 6:45:35

界面控件DevExpress .NET MAUI v23.2新版亮点 - 拥有全新的彩色主题

DevExpress拥有.NET开发需要的所有平台控件，包含600多个UI控件、报表平台、DevExpress Dashboard eXpressApp 框架、适用于 Visual Studio的CodeRush等一系列辅助工具。屡获大奖的软件开发平台DevExpress 今年第一个重要版本v23.1正式发布，该版本拥有众多…...

编程日记 2024/3/2 6:44:34

大语言模型LLM Pro+中Pro+（Prompting）的意义

—— Pro ，即Prompting，构造提示 1.LLM Pro中Pro（Prompting）的意义 Prompting不仅是大语言模型交互和调用的一种高效手段，而且已成为推动模型泛化能力和应用灵活性的关键技术路径，它不仅极大地拓展了模型功…...

编程日记 2024/3/2 6:43:33

React 中，children 属性

在 React 中，children 属性是一个特殊的属性，它允许你将组件作为其他组件的子元素传递。这意味着你可以在组件内部嵌套任何类型的子组件或元素，并且在父组件中通过 props.children 访问它们。这为组件的复用和组合提供了极大的灵活性。以下…...

编程日记 2024/3/2 6:42:32

多行业万能预约门店小程序源码系统支持多门店预约小程序带完整的安装代码包以及搭建教程

随着消费者对于服务体验要求的不断提升，门店预约系统成为了许多行业提升服务质量、提高运营效率的重要工具。然而，市面上的预约系统往往功能单一，无法满足多行业、多场景的个性化需求。下面，小编集合了多年的行业经验和技术积累&a…...

编程日记 2024/3/2 6:39:29

Node.js 中 fs 模块文件操作的应用教程

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它可以让 JavaScript 代码在服务器端运行。在 Node.js 中，fs 模块是用来处理文件系统操作的模块。通过 fs 模块，我们可以进行文件的读取、写入、删除等操作。本教程将介绍如何在 No…...

编程日记 2024/3/2 6:38:28

git stash -a //缓存所有文件 git checkout -b dev origin/dev //切换到dev分支上,接着跟远程的origin地址上的dev分支关联起来 //推送本地分支到远程仓库 git push origin localbranchname:remotebrancname git revert onefile //https://www.freecodecamp.org/news/git-re…...

编程日记 2024/3/2 6:34:24

spring boot3解决跨域的几种方式

⛰️个人主页: 蒾酒 🔥系列专栏：《spring boot实战》 🌊山高路远，行路漫漫，终有归途。目录 1.前言 2.何为跨域 3.跨域问题出现特征 4.方式一：使用 CrossOrigin 注解 5.方式二：自定义…...

编程日记 2024/3/2 6:32:22

【Spring】19 @Autowired注解使用详解

文章目录构造函数注入Setter方法注入字段注入数组和集合注入特殊情况处理特殊接口类型的注入异常处理结语 Spring 框架的 Autowired 注解是实现依赖注入的一种强大而灵活的方式。在本文中，我们将介绍 Autowired 注解的多种用法，包括构造函数、setter方法…...

编程日记 2024/3/2 6:30:20

Educational Codeforces Round 132 (Rated for Div. 2) E. XOR Tree（启发式合并+贪心）

题目 n(n<2e5)个点的树，点i权值ai（1<ai<2^30） 修改最少的点的权值，使得树上不存在异或和为0的简单路径，输出最少的点数权值可以被修改成任意正整数（可以是无限大） 思路来源官方…...

编程日记 2024/3/2 6:29:20

JavaScript 基本数据类型的详解

JavaScript的基本数据类型以下都是JS内置的几种类型数据类型描述number数字，不区分整数和小数string字符串类型booleantrue 真, false 假undefined表示未定义的值null只有唯一的值 null，表示空值 number 数字类型 JavaScript 中不区分整数和浮点数&…...

编程日记 2024/3/2 6:27:17

DDR5内存相比DDR4内存的优势和区别？选择哪一个服务器内存配置能避免丢包和延迟高？

根据幻兽帕鲁服务器的实际案例分析，选择合适的DDR4与DDR5内存大小以避免丢包和延迟高，需要考虑以下几个方面： 性能与延迟：DDR5内存相比DDR4在传输速率、带宽、工作电压等方面都有显著提升，但同时也伴随着更高的延迟。D…...

编程日记 2024/3/2 6:26:16

篮球游戏中的挑战精神与怄气心理：扣篮被帽后的再度冲击

在篮球比赛中，扣篮无疑是最具观赏性和震撼力的动作之一，它展示了球员的爆发力、技巧和自信。而在篮球游戏中，玩家即便面临连续扣篮被盖帽的挫折，仍渴望继续杀入内线尝试扣篮的现象，实则是体育竞技精神、挑战意识与怄气…...

编程日记 2024/3/2 6:25:15

JavaScript高级程序设计

前言《JavaScript高级程序设计》第1章——什么是JavaScript DOM将整个页面抽象为一组分层节点。 BOM用于支持访问和操作浏览器的窗口。第2章——HTML中的JavaScript 2.1 < script >元素元素描述async立即开始下载脚本，但不能阻止其他页面动作&#…...

编程日记 2024/3/2 6:24:14

初阶数据结构：栈与队列

目录 1. 简述：栈2. 栈的功能分析与实现2.1 功能分析2.2 栈的实现2.2.1 栈的结构创建与初始化2.2.2 压栈，出栈与判空：2.2.3 获取栈顶元素，检索栈的长度与栈的销毁 3. 简述：队列4. 队列的功能分析与实现4.1 队列的功能分…...

编程日记 2024/3/2 6:23:13

Houdini学习笔记

按住Alt / 空格左键：进行旋转按住Alt / 空格中间：移动屏幕画面按住Alt / 空格右键：缩放视口如果不要Alt，就先按ESC，再去左键、中键、右键操作这里有对应的层级关系，类似于树形结构&#xff…...

编程日记 2024/3/2 6:22:12

电销机器人识别客户情绪状态

最近有电销机器人需求的客户咨询我，你们OKCC的机器人可以识别客户的情绪变化吗？别人说目前电销机器人系统有支持的。首先还是从原理的角度解答一下，是否能识别情绪状态。是的，电销机器人可以识别客户的情绪状态。这可以通过语音…...

编程日记 2024/3/2 6:21:10

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异，它们的数据同步要求既要保持数据的准确性和一致性，又要处理好性能问题。以下是一些主要的技术要点： 数据结构差异数据类型差异&#xff…...

编程新知 2026/1/11 0:40:53

Rust 异步编程

Rust 异步编程引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。异步编程基础什么是异步…...

编程新知 2025/11/17 18:58:56

什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

编程新知 2025/10/2 17:12:14

如何理解 IP 数据报中的 TTL？

目录前言理解前言面试灵魂一问：说说对 IP 数据报中 TTL 的理解？我们都知道，IP 数据报由首部和数据两部分组成，首部又分为两部分：固定部分和可变部分，共占 20 字节，而即将讨论的 TTL 就位于首…...

编程新知 2026/1/17 18:29:58

企业如何增强终端安全？

在数字化转型加速的今天，企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机，到工厂里的物联网设备、智能传感器，这些终端构成了企业与外部世界连接的 “神经末梢”。然而，随着远程办公的常态化和设备接入的爆炸式…...

编程新知 2026/1/19 5:27:10

2025季度云服务器排行榜

在全球云服务器市场，各厂商的排名和地位并非一成不变，而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势，对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析： 一、全球“三巨头”…...

编程新知 2026/1/19 22:38:12

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍： img 属性指定分区存放的 image 名称，指定的 image 名称必须是当前工程生成的 binary 。如果 binary 有多个文件，则以 proj_name:binary_name 格式指定文件名， proj_name 为工程名&…...

编程新知 2026/1/19 22:47:13

免费PDF转图片工具

免费PDF转图片工具一款简单易用的PDF转图片工具，可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件，也不需要在线上传文件，保护您的隐私。工具截图主要特点 🚀 快速转换：本地转换，无需等待上…...

编程新知 2026/1/15 10:53:03

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言： 在Java编程中，类的生命周期是指类从被加载到内存中开始，到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期，让读者对此有深刻印象。目录 …...

编程新知 2026/1/15 5:02:19

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机，它可以执行Java字节码。Java虚拟机是Java平台的一部分，Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

编程新知 2025/9/13 18:20:34