小秀的博客

配置的统一管理 .env 比如 timeout 和 baseUrl拦截器二次封装（接口（通过 ts 类型约束和类的继承为每一个 request 方法添加自定义 interceptors 配置，配置上有请求和响应成功和失败的方法）、实例（类构造实例）、全局）全局拦截（token 设置、loading 效果、message 弹窗提示）整体下来最难的地方我感觉是 ts 类型的约束，不看一些源码真的理解不了。

在小程序中，编写的 wxml、wxss 是由渲染层执行的（WebView，直接调用原生 IOS / Android WebView 渲染），js 是由 jsCore （逻辑层）解析执行。js源代码 到 ast 的过程中有词法分析（词法分析将代码转换为 tokens）和语法分析两个过程。ast 到 字节码主要是 为了 后续的兼容性处理做准备，因为不同系统上的 cpu 处理机制也不同。js 由 js 引擎（比如现在最为主流的 V8）执行。

单个 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 是统一资源定位符，简称网址，用于定位网络中的

async 函数和 await 关键字是 JavaScript 中用于处理异步操作的语法糖，它们结合使用可以简化异步代码的书写和理解。

（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算法是两种概念。

Cookie：通过在⻚⾯间共享 Cookie 实现简单的跨⻚⾯通信，但是 Cookie ⼤⼩有限制，不能存储过多的数据。localStorage 和 sessionStorage：HTML5 提供了本地存储的能⼒，可以通过 localStorage 或 sessionStorage 实现⻚⾯间数据共享，相⽐ Cookie 更加⽅便，但是也有⼤⼩限制。BroadcastChannel API：这是⼀个 HTML5 新增的 API，允许多个⻚⾯间通信，可以⼴播消息或向特定⻚⾯发送消息。SharedWor

⽤ CSS 和 JS 来实现动画各有其优缺点，具体如下：

每个浏览器都有⼀个 User-Agent (UA) 字符串，其中包含了浏览器和设备的相关信息。通过解析 UA 字符串，可以判断⽤户设备类型。但需要注意的是，UA 字符串可以被篡改，因此这种⽅法并不可靠。这⾥的参数 (max-width: 768px) 表示屏幕宽度最⼤为 768 像素，如果当前屏幕宽度⼩于等于 768 像素，则可以认为是移动设备。正则表达式匹配了⼀些移动设备的关键词，如果⽤户代理信息中包含这些关键词，则可=以认为是移动设备。使用一些第三方库，如 Device.js，Detect.js 等。

使⽤ AbortController 创建⼀个新的 AbortController 对象，然后使⽤它的 abort() ⽅法来中⽌请求。在创建请求时，将 AbortController.signal 分配给请求的 signal 属性，以便在调⽤ abort() ⽅法时取消请求。当⼀个请求被终⽌，它的 readyState 将被置为 XMLHttpRequest.UNSENT (0)，并且请求的。abort() ⽅法会在 DOM 请求完成之前中⽌它。它能够中⽌ fetch 请求、各种响应主体或者流的消耗。

Proxy 和 Reflect 是两个与元编程和对象操作相关的核心特性。它们一起提供了对象操作和拦截功能，便于捕获和修改对象的行为。Reflect 提供了一组用于拦截 JavaScript 操作的方法。这些方法与 Proxy 处理器对象中的方法相同，可以用来自定义对象的基本操作。与 Proxy 不同的是，Reflect 不是一个构造函数，不能用来创建对象。它只是一个普通的对象，包含了一组静态方法，这些方法与 Object 对象中的方法类似。

ES6（ECMAScript 6）是 JavaScript 的第六个版本，也称为 ES2015，引⼊了很多新特性来增强 JavaScript 语⾔的能⼒。let 和 const 声明变量，解决了使⽤ var 时出现的⼀些不合理的问题，如变量提升、重复声明等。模板字符串解构赋值，数组、对象、字符串以及函数参数等都可以进⾏解构赋值。箭头函数Promise 对象Promise 是⼀种异步编程的解决⽅案，⽐回调函数更加强⼤。与 Promise 相关的还有 Generator 和 async。

所有的异步场景，都可以看作是一个异步任务，每个异步任务，在 js 中应该表现为一个对象（比如上面的 sendMessage ）该对象称为Promise对象，也叫做任务对象，例如远程登录、延时弹窗。//当图像成功加载后，将图像元素加入到container容器中，当图像加载失败后，输出加载失败的原因。//该函数需要返回一个Promise,当图片加载完成后，任务完成，若图片加载失败，任务失败。//当图像成功加载后，将图像宽高显示在元素中，当图像加载失败后，输出加载失败的原因。任务失败时，需要提供失败的原因。

利用 CDN 可以大幅缩减静态资源的访问时间，特别是对于公共库的访问，可以使用知名的 CDN 资源，这样可以实现跨越站点的缓存。现代浏览器普遍支持压缩格式，因此服务端的各种文件可以压缩后再响应给客户端，只解压时间小于优化的传输时间，压缩就是可行的。利用一些打包插件，针对不同的浏览器打包出不同的兼容性版本，这样一来，每个版本的兼容性代码就会大大减少，从而减少包体积。对于不支持 HTTP2 的场景，将相对独立的静态资源分到多个域中保存，可以让浏览器同时开启多个TCP连接，并行下载。