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

JavaScript 高级 （完结）

news 2025/7/14 15:04:29

目录

深浅拷贝

浅拷贝

深拷贝

递归实现深拷贝

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

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/7/12 7:16:15

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

编程新知 2025/7/14 2:17:57

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2025/6/16 23:36:50

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

编程新知 2025/7/9 20:34:17

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

编程新知 2025/7/10 18:06:49

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/7/7 20:05:25

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2025/7/13 6:21:16

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

编程新知 2025/7/13 18:18:34

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/7/9 9:20:33

嵌入式学习笔记DAY33（网络编程——TCP）

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

编程新知 2025/7/13 11:45:30