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

JS进阶——高级技巧

news 2026/4/14 1:59:49

版权声明
本文章来源于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

如何免费在本地电脑上实现专业级音频转录？离线Whisper工具Buzz完全指南

如何免费在本地电脑上实现专业级音频转录？离线Whisper工具Buzz完全指南【免费下载链接】buzz Buzz transcribes and translates audio offline on your personal computer. Powered by OpenAIs Whisper. 项目地址: https://gitcode.com/GitHub_Trending/buz/buzz…...

编程新知 2026/4/14 1:55:10

SQL在分布式数据库中执行JOIN_数据分片与节点交互原理解析

JOIN在分片表上慢是因为默认不广播小表，而是跨节点拉取数据，导致网络请求激增、重复扫描和中间结果膨胀；需确保JOIN字段为相同分片键才能单节点执行。JOIN 在分片表上为什么慢得像卡住？因为大多数分布式数据库（比如 Ti…...

编程新知 2026/4/14 1:19:11

如何彻底解决八大网盘下载限速问题：LinkSwift直链获取完全指南

如何彻底解决八大网盘下载限速问题：LinkSwift直链获取完全指南【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 ，支持百度网盘 / 阿里云盘 / 中国移动云盘…...

编程新知 2026/4/14 1:08:26

我用AI给自己做了一场深度复盘

上一篇文章AI放大野心，用野心修炼内心里，我写了转型AI产品经理这四个月遇到的四面墙。但那篇文章本身，就是一场复盘的产物。准确地说，是我跟AI聊了两天，从"我感觉不太好"聊到挖出自己性格最底层的一个模…...

编程新知 2026/4/14 1:07:50

芯洲SCT SCT2361FPBR QFN-12 DC-DC电源芯片

特性宽4V - 28V输入电压范围0.6V - 5.5V输出电压范围6A连续输出电流集成高端/低端功率MOSFET，导通电阻为36mΩ/16mΩ集成一个3.3V、150mA的LDO固定1ms软启动时间固定400KHz开关频率可选PWM、PFM和USM工作模式逐周期电流限制输出过压保护过温保护采用QFN 12引脚3mmx3…...

编程新知 2026/4/14 0:40:20