小秀的博客

需要 ES2022+ 环境支持，旧浏览器需通过 Babel 等工具编译。注意：private 关键字是 ts 中的，js 没有这个关键字。代理对象，拦截属性访问并过滤私有属性（如以下划线。：语法直观、强制封装、无内存泄漏风险。：每个实例独立存储方法，占用更多内存。：内存自动回收、无命名冲突风险。仍可遍历到 Symbol 键。：性能较低，需手动维护拦截逻辑。：属性键唯一，避免命名冲突。：无强制约束，外部仍可访问。：兼容旧环境，实现简单。：灵活控制属性可见性。

CDN（内容分发网络）CDN是一种分布式网络架构，通过在全球多个地理位置部署缓存节点，将静态资源（如图片、视频、CSS/JS文件等）缓存到离用户最近的节点，实现快速访问。其核心目标是减少网络延迟、降低源站负载，并提升用户体验。工作原理：用户请求资源时，CDN通过全局负载均衡（GSLB）选择最优节点，若节点已缓存资源则直接返回，否则回源获取并缓存。Service Worker是运行在浏览器后台的独立脚本，可拦截网络请求、管理缓存，并支持离线功能。

【代码】【JavaScript】异步代码执行顺序面试题。

当我们需要的时候，给予调用者一个承诺返回（比如我们的fetchData就会返回一个承诺）：待会儿我会给你回调数据时，就可以创建一个Promise 的对象；在早期没有 Promise 的情况下，解决回调地狱确实是比较棘手的一个问题。这种方式在处理简单异步任务时还算有效，但随着异步操作的复杂性增加，特别是在多个异步任务需要依次或并行执行时，回调函数会导致所谓的“回调地狱”问题。当然，在Promise、Generator、await、async出现之后，对于异步的处理，变得非常的简单和优雅了。

而Proxy则提供了更为强大和灵活的对象操作拦截能力，适合更复杂和动态的场景，但需要权衡性能和兼容性问题。其实他在我们开发的过程中使用到的很少，但是由于我们对 Vue 经常使用，而 Proxy 是 Vue 源码中的重要一环，因此也需要学好 Proxy。是一个内置的对象，和 Proxy 不同，他不是构造函数，不能用来创建对象，它提供了一组静态方法，用于执行一些与对象相关的默认操作。中新增的一个构造函数，它用于创建一个代理对象，可以拦截并自定义对象的基本操作，例如属性查找、赋值、枚举、函数调用等。

默认绑定：① 非严格模式:全局对象(window) ② 严格模式:undefined隐式绑定：对象方法调用的this值：① 调用者使用 new 方法调用构造函数，构造函数内的 this 会绑定到新创建的对象上。箭头函数，this 指向由外层作用域决定。apply / bind / call 方法调用，函数体内的 this 绑定到指定参数的对象上。// 为整个脚本开启严格模式// 为函数开启严格模式如何改变this指向,有2类改变this调用函数时并传入具体的thiscall。

执行。

WeakMap是 ES6 中新增的一种集合类型，叫做“弱映射”，key 必须是对象，由于他的，如果该对象只作为WeakMap 的键存在，在其他地方没有被引用，，可以防止内存泄露。因此 WeakMap 适合存储那些临时对象。WeakMap 不可迭代，无法通过for.of 或其他迭代方法遍历其内容。这是因为WeakMap的设计初衷是为了允许键被自动回收，如果可以迭代WeakMap, 将会打破其弱引用特性。

WebSockets是一种在浏览器和服务器之间建立持久连接的协议，它允许服务器主动推送数据给客户端，并且在客户端和服务器之间实现双向通信。建立连接：客户端使用WebSocket对象来建立WebSocket连接。例如：协议：WebSocket使用标准的WebSocket协议来进行通信。相对于HTTP协议，WebSocket协议提供了更高效率和更低的延迟。ws和wss协议正对应了http和https。事件：WebSocket对象提供了一些事件，用于处理连接的不同阶段和接收到的数据。常见的事件有（连接建立）、（接

配置的统一管理 .env 比如 timeout 和 baseUrl拦截器二次封装（接口（通过 ts 类型约束和类的继承为每一个 request 方法添加自定义 interceptors 配置，配置上有请求和响应成功和失败的方法）、实例（类构造实例）、全局）全局拦截（token 设置、loading 效果、message 弹窗提示）某个接口的请求拦截 -> 全局请求拦截 -> 全局响应拦截 -> 某个接口的响应拦截封装常用请求方法 post，get，delete，patch。

但是，机器码实际上也会被去优化为ByteCode（Deoptimization),这是因为如果后续执行函数的过程中，类型发生了变化（比如sum函数，原来执行的是number 类型，后来执行变成了string类型)，之前优化的机器码并不能正确的处理运算，就会去优化的转换成字节码；比如如果一个函数被多次调用，那么就会被标记为热点函数，那么就会经过TurboFan转换成优化的机器码，提高代码的执行性能。字节码是一种低级的、比机器码更抽象的代码，它可以快速执行，但比直接的机器码慢。

单个 Promise 错误：使用.catch或语法。全局未处理 Promise 错误：浏览器环境使用，Node.js 中使用。

方法时间复杂度适用场景优点缺点SetO(n)原始类型去重简单高效，适合简单数据类型去重不适合对象、复杂数据类型filterindexOfO(n²)小型数据集，简单去重代码易懂性能较差，不适合大数据reduceO(n²)数据处理过程中去重可以与其他操作结合性能较差Map或ObjectO(n)原始类型去重、效率高高效，适合需要大量查找的场景代码稍显复杂手动双重循环O(n²)教学、展示用不依赖其他方法性能最差，代码冗长复杂对象去重O(n²)对象数组去重。

React：使用state和onDrop等事件来处理拖拽和元素的放置。Vue：利用data和v-on指令来处理拖拽事件，同时使用v-for结合动态样式来更新放置元素的位置。两者的核心思路都是通过事件监听来处理拖拽操作，并将元素的位置存储在状态中，随后根据状态重新渲染页面。

回调地狱（Callback Hell）是指在异步编程中，特别是在嵌套的回调函数中，代码变得深度嵌套、难以阅读和维护的现象。解决回调地狱的方式是采用异步编程的新模式，使代码结构更清晰，避免深层次的嵌套。：将复杂的异步操作拆分成一系列的事件或消息，利用事件处理机制或发布-订阅模式来组织异步流程，使代码结构更清晰。这些示例展示了如何使用不同的方式来解决回调地狱，使异步操作的代码更具可读性、可维护性，并减少了嵌套的层级。：将异步操作封装成模块，抽象出公共的逻辑，提高代码的复用性，减少回调地狱。

Promise 对象用于表示一个异步操作的最终完成（或失败）及其结构值，成功或失败会关联后续的处理函数。相关代码进行了封装，让我们只关心传递的接口参数。学习 XHR 就是了解。原生 XHR 需要自己在 url 后面携带查询参数字符串，没有。把参数对象转成 “参数名=值&参数名=值“ 格式的字符串。是浏览器与服务器通信的技术，采用。内部与服务器交互过程的真正原理。参数拼接到 url 字符串后面了。

在实际请求之前，浏览器向服务器发送一个预检请求，询问服务器是否允许跨域请求以及允许哪些HTTP方法、头部字段等。当发送跨域的POST请求时，浏览器会先发送一次OPTIONS请求，这是因为浏览器的同源策略。需要注意的是，简单请求(GET/www-form-urlencoded、multipart/form-data或text/plain)不会触发预检请求，浏览器会直接发送实际请求。如果服务器允许当前请求的跨域访问，那么浏览器才会发起实际的POST请求。否则，浏览器将阻止请求，并在控制台报告错误。

先选择的本地文件，接着提交到服务器保存，服务器会返回图片的 url 网址，然后把网址加载到 img 标签的 src 属性中即可显示。避免了浏览器保存是临时性的问题。图片是文件，而不是以前的数字和字符串。所以传递文件一般需要放入 FormData 以键值对-文件流的数据传递。获取数据的时候，需要给自己起一个外号。由于都是上传到同一服务器，为了区分不同同学的数据。先准备对应的标签结构（模板里已有）设置延迟自动消失的时间。

Ajax 笔记：Ajax 笔记（一）—— Ajax 入门Ajax 笔记（二）—— Ajax 案例Ajax 笔记（三）—— Ajax 原理Ajax 笔记（四）—— Ajax 进阶Ajax 笔记接口文档：使用浏览器的 XMLHttpRequest 对象 与 服务器 通信浏览器网页中，使用 AJAX技术（XHR对象）发起获取数据的请求，服务器代码响应准备好的数据给前端，前端拿到数据数组以后，展示到网页使用 cdn:axios 语法1.2.1 URLURL 是统一资源定位符，简称网址，用于定位网络中的

（1）在html上添加，其中this指向自身。添加：addEventListener(event,function,userCapture)（2） 匿名函数d.οnclick=function(){}，其中 this 指向自身。（3）普通函数 οnclick=“ok()”，相当于动态调用，没有时间参数e的传递。dom0和dom2可以共存，不互相覆盖，但是dom0之间依然会覆盖。事件只能注册一次，后面的会覆盖旧的；dom0级事件会覆盖；

简单地说，任何 JavaScript 代码片段在执行前都要进行编译（通常就在执行前）。这段程序进行编译，然后做好执行它的准备，并且 通常马上就会执行它。在传统的编译语言里，比如JAVA、Go等，是提前编译的，它们的执行是先在本地编译出一个"东西"，然后在放到服务器上运行。例如，在 语法分析和代码生成阶段有特定的步骤来对运行性能进行优化，包括对冗余元素进行优化 等。但是JS是脚本语言，JS是一边编译一边执行的，所以JS会复杂很多。JIT实际上指，JS的编译过程、运行时。

这个例子中，我们可以看到尾递归优化前后的区别。在第一个函数中，每次递归都会创建一个新的栈帧，直到栈溢出。而在第二个函数中，每次递归都会更新参数，而不是创建新的栈帧。这样可以避免栈溢出的问题。

Ajax 笔记：Ajax 笔记（一）—— Ajax 入门Ajax 笔记（二）—— Ajax 案例Ajax 笔记（三）—— Ajax 原理Ajax 笔记（四）—— Ajax 进阶Ajax 笔记接口文档：JavaScript 是单线程的语言，意味着它只有一个主线程用来执行代码。这个特点决定了 JavaScript 在同一时间只能处理一个任务，防止了多线程带来的竞态条件和死锁等问题。随着 HTML5 到来也支持了多线程webWorker，但也是不允许操作 DOM 。同步代码：逐行执行，需原地等待结果后，才继续向下

encodeURI和decodeURI是成对来使用的，在浏览器地址栏中有中文字符的话，可能会出现不可预期的错误。所以可以用encodeURI把非英文字符转化为英文编码，decodeURI可以用来把字符还原回来。使用场景：通过URL传中文参数时，服务端后台获取的值往往会出现乱码。

你可以使用 Blob 构造函数来创建一个新的 Blob 对象，或者使用 File 对象的 slice 方法来从文件中获取一个数据块。File 对象和 Blob 对象都表示一个二进制数据块，它们都继承自 Blob 类。它们之间的主要区别在于 File 对象除了包含二进制数据外，还包含了文件的元数据（如文件名和修改日期）。总之，File 对象和 Blob 对象都可以用来表示二进制数据，但是 File 对象还包含了文件的元数据，而 Blob 对象则不包含这些信息。Blob对象是包含File的。

推荐使用 OpenAPI 工具，直接自动生成即可：https://www.npmjs.com/package/@umijs/openapi。在 package.json 的 script 中添加 “openapi”: “ts-node openapi.config.ts”。Next.js 使用客户端和服务端同构渲染，需要选择一个同时支持 Node.js 和浏览器环境的请求库，而 Axios 是支持的。执行该命令，可以在 /src/api 目录看到生成的请求代码。

如果去掉 await ，那么由于是异步操作会先输出 returnSchoolInfoList.value，再输出 result1，并且因为赋值的时候并没有获取到result1 的具体值，所以需等待该异步操作完成后再进行赋值。然后报错： [vite] Internal server error: [vue/compiler-sfc] Unexpected reserved word ‘await’.。然后幸好有 Webstorm 的智能提示，让我使用 for…并且等待异步完成后，正确赋值了！

【代码】qs 解决 axios 使用 get 方法传递数组参数。

JavaScript 也会出现内存泄漏问题。内存泄漏是指⼀些被分配的内存空间，因为某些原因⽽⽆法被垃圾回收机制回收，导致占⽤内存空间⽆法被释放，最终会导致程序崩溃。

为需要拖拽的元素添加 mousedown、mousemove和mouseup 事件监听器。在 mousedown事件处理函数中，记录⿏标按下时的位置，以及⿏标相对于元素的位置。在 mousemove 事件处理函数中，计算⿏标移动的距离，并更新元素的位置。在 mouseup 事件处理函数中，移除 mousemove 和 mouseup 事件监听器。

在 JavaScript 中，数字类型是采⽤双精度浮点数表示的，由于双精度浮点数只有 52 位精度，因此在进⾏精度较⾼的数值计算时，可能会出现数字精度丢失的问题。

在 JavaScript 中，可以使⽤ String 类型的 length 属性来获取字符串的⻓度。但是，由于 Emoji 表情在字符串中占⽤了两个字符的位置，因此直接使⽤ length 属性得到的结果并不准确（我们希望的是 Emoji 表情是一个字符）。

use strict” 声明时，代码将会在严格模式下执⾏。严格模式包含了⼀些额外的规则和限制。注意：ES6 的模块⾃动采⽤严格模式，不管有⽆在头部加上 “use strict”;

当操作系统命令 CPU 去执行一个进程时，实际上是该进程的多个线程之间切换执行，主要是为了充分利用多核 CPU（比如线程数 === CPU 数，线程永不阻塞，没有 io，只存在大量运算）。此外，JS 最初是为了解决⽹⻚交互的问题⽽诞⽣的，⽽⽹⻚交互的需求⼤部分是基于⽤户事件的，⽐如点击按钮、输⼊⽂本等。比如在大文件上传过程中的 hash 计算部分，由于需要读取所有文件，依次将每一个分片计算 hash ，是 CPU 密集型应用，直接在主线程操作会造成页面卡顿，所以需要开启额外的 线程来计算 hash。

前端路由适合⽤于单⻚⾯应⽤（SPA）的开发。当⼀个应⽤中需要经常切换⻚⾯时，使⽤前端路由可以避免频繁向服务器发起请求，而是在使⽤前端路由的SPA单⻚⾯应⽤中，⻚⾯的切换是通过 JavaScript 动态修改 DOM 内容来实现的，提⾼⻚⾯切换的速度和⽤户体验。前端路由是指在前端⻚⾯内部实现⻚⾯之间的跳转，⽽不是像传统的⽹⻚跳转那样在后端进⾏⻚⾯跳转，从后端获取 html 页面。前端路由使⽤浏览器的 history 接⼝，通过改变浏览器的 URL，来更新⻚⾯的视图。

相⽐普通函数，箭头函数有更加简洁的语法箭头函数不绑定this，会捕获其所在上下⽂的this，作为⾃⼰的this箭头函数不绑定arguments，取⽽代之⽤rest参数解决，同时没有super和new.target使⽤call,apply,bind并不会改变箭头函数中的this指向箭头函数没有原型对象prototype这个属性。

in 循环和 Object.keys ⽅法的区别，在于前者包括对象继承⾃原型对象的属性，⽽后者只包括对象本身的属性。有些内置对象的属性是不可枚举的，例如 Object.prototype 上的属性，这些属性可以通过 Object.getOwnPropertyNames() ⽅法获取。JS 对象的可枚举性指的是对象的某些属性是否可以被 JSON.stringify()、 for…每个对象属性都有⼀个名字和一个属性描述符，这个属性描述符⾥⾯包括了该属性的许多特性，如可枚举性、可写性、可配置性和值等。

点击穿透是指在某些场景下，⽤户在快速点击⻚⾯元素时，由于某些原因（例如⽹络延迟），在前⼀个元素上的点击事件还没有完成时，下⼀个元素的点击事件就已经触发了，导致⽤户感。觉到⻚⾯点击⽆效或者出现异常。

将 HTML 中的标签放在标签的末尾是为了提升网页的加载性能。避免阻塞页面渲染：当浏览器解析 HTML 时，如果遇到位于页面顶部的标签，浏览器会暂停解析和渲染，直到脚本加载并执行完毕。把脚本放在的末尾，可以让页面的其他内容（如 HTML 和 CSS）先加载并渲染，提升用户的体验。页面元素的可访问性：有时脚本会操作页面中的 DOM 元素。如果脚本在 HTML 的头部或内容之前执行，页面的 DOM 还未完全构建，可能导致脚本无法正确找到或操作这些元素。

虚拟 DOM 需要进⾏额外的计算和⽐较操作，⽽这些操作也会消耗⼀定的时间和性能。因此，虚拟 DOM 适⽤于⼤规模、⾼度动态的⻚⾯，⽽在简单的静态⻚⾯中使⽤虚拟 DOM 并不能提⾼性能。虚拟 DOM 是⼀层对真实DOM的抽象，以JavaScript 对象 (VNode 节点) 作为基础的树，⽤对象的属性来描述节点，最终可以通过⼀系列操作使这棵树映射到真实环境上。虚拟DOM算法操作真实DOM，性能⾼于直接操作DOM，直接操作DOM还会引用回流或者重绘，虚拟DOM和虚拟DOM算法是两种概念。