STATICHIT静砸的博客

今天在做svg预览时遇到了一个报错意思是：无法在“Window”上执行“btoa”：要编码的字符串包含超出 Latin1 范围的字符查了很多博客都没有很好的解决，所以写这篇博客记录一下我最终的解决方式。

今天在开发TinyEngine华为低代码引擎开源项目时，我遇到了一个细节的问题：原本是点击标题显示菜单，再次点击标题或点击空白区域关闭菜单。中国没错的，然后呢，这里我手动实现了一个二级菜单，二级菜单内部点击是会切换该选项后面跟着的图标的，我希望点击完之后只是图标变化，但点击菜单内部时菜单也会关闭，虽然也能用，但很影响用户体验，这不是我期望的行为。简单的描述一下问题就是：在项目中，我实现了一个点击标题显示菜单的功能，并在点击空白区域时关闭菜单。然而，点击菜单内部时菜单也会关闭，这导致用户体验不佳。

filter 方法是数组对象的一个内置方法，用于创建一个新数组，其中包含所有通过指定函数测试的元素。（filter 方法会遍历数组中的每个元素，并将那些使测试函数返回true的元素组成一个新的数组。❗再三强调，会返回一个新的数组哦！！！但使用了filter不会对原数组产生影响。

而我们只能在Downloading组件中去监听进度条的进度，而关闭提示框又需要调用notification.close(key)，所以我采取的方案是，渲染进度条时，将当前提示框的key传递给Downloading组件，当Downloading组件监听到进度为100时，调用notification.close(key)。项目中进度条的实现是通过Vue3的 h（）函数将进度条组件Downloading和自定义进度条函数process渲染在notification中的。，不会作为普通的 prop 传递给组件。

这可能是因为工具或框架在处理组件时依赖于组件名称和文件名的唯一性，如果它们相同，则可能会引起冲突或错误。但是在Vue 3中，使用`defineComponent`来定义组件时，Vue 不再使用 `name` 选项来指定组件的名称，而是推荐使用 `filename` 选项。今天在开发新组件时，在使用defineComponent定义组件时，把name写成了文件名的首字母大写法导致项目一直报错。找了很久才知道是名字的问题。这个时候我们在定义组件时，name一定不能与文件名相同，否则在调用组件时就会发生冲突。

5️⃣ list.push(str) ==>将当前字符串放进list(如果存在一样的hashkey,会添加到列表里去,如果不存在,会添加到我们新建的list里面去)4️⃣ map.get(key) ==>存在key键的值=>map[key]对应的[xxxxx] / 不存在 => -1,新建一个。这道题考察的是对 哈希表（如JavaScript 中的 Map）的运用，以及对字母异位词的理解和处理能力。所以在这个问题中，哈希表的key是按照字母顺序排列后的字母组成的字符串，value是由相同字母异位词组成的。

其中有一个是，在使用element-plus的el-dialog时，在pc端和在手机端打开，由于屏幕宽度的不同，我希望el-dialog的宽度是不一样的。当我在pc端用浏览器打开页面，并缩小窗口时，并不会触发宽度的变化。1️⃣首先，直接给el-dialog设置自定义class结合媒体查询是无效的，直接设置el-dialog的样式属性无效。但每次窗口修改时我需要刷新才会重新触发修改width的操作，所以这里我再加了个监听视口变化的操作。这只是获取你操作屏幕的宽度，并不是你窗口的宽度。

其实目前在我现有的开发经历中，我还没有实际运用过$nextTick，今天在看书时，学习到了这个东西，所以做个笔记记录一下。$nextTick 是 Vue提供的一个方法，用于在 DOM 更新之后执行回调函数。它在 Vue.js 中常常用于处理 DOM 相关的操作或获取更新后的 DOM 元素。通过使用 $nextTick 方法，可以确保在 DOM 更新完成后再执行回调函数，从而保证操作的准确性和可靠性。注意，它返回的是一个Promise对象。

JS38 高频数据类型。

题目来源：JS37 双向绑定。

直接使用this.$store.state.xxx是不行的，会报错。想获取很简单。先引用store文件，再调用。例如我项目中把token存入store。在封装请求的http.js文件中，这样子获取。

js中跳转页面

例：传回来的是11或10或01或00，我想要得到两个字符分别是什么并且在后续进行判断，需要分的得到两个字符，所以先resp.data.toString()，再追加使用charAt（）函数。需要先将值转为String类型，也就是使用toString函数处理resp.data；直接resp.data.substring(0,1)是没有用的。然后再使用字符串函数。例如chatAt（index）；

这些对象用来表示和操作结构化的缓冲区数据，或使用 JSON（JavaScript Object Notation）编码的数据。顾名思义，基本对象是定义或使用其他对象的基础。基本对象包括一般对象、函数对象和错误对象。全局函数可以直接调用，不需要在调用时指定所属对象，执行结束后会将结果直接返回给调用者。这些对象表示按照索引值来排序的数据集合，包括数组和类型数组，以及类数组结构的对象。控件抽象可以帮助构造代码，尤其是异步代码（例如，不使用深度嵌套的回调）。错误对象是一种特殊的基本对象。

对于c或java来说，初始化二维数组很简单，但js有些不一样。

Javascript倒计时实现

当一个值无法触达时，或者说当程序无法以任何方式引用到这个值时，解释器就知道这个值以及用不到了，会自动释放它占用的内存（但是Javascript程序呀有时需要留意，不要让某些值在不经意间存续过长时间后仍可触达，从而导致它们无法被回收）。有一个例外：当0除以0时是没有意义的值，这个操作的结果是一个特殊的“非数值”（NaN，NotａNumber）.此外，无穷除无穷，负数平方根或者用无法转换为数值的非数值作为算术操作符的操作数，结果也都是NaN。与其他JavaScript非原始值一样，函数和类也是特殊的对象。

JavaScript作用域就是代码名字（变量）在某个范围内起作用和效果 目的是为了提高程序的可靠性，减少命名冲突。JS没有块级作用域，{}内写的变量外部也可以使用。

JavaScript添加删除数组元素的方法等

在一个程序执行的过程中，各条代码的执行顺序怼程序的结果是有直接影响的。很多时候我们药通过控制代码的执行顺序来实现我们药完成的功能。简单理解：流程控制就是来控制我们的代码按照什么结构顺序来执行。

JS有三种书写位置，分别为行内，内嵌和外部。注意，引用外部JS文件，script双标签内部不可以写代码了。

JAvaScript2

操作提到了该作用域的最前面，但是没有把赋值提前，所以运行到console.log(num)时，num变量已经存在但没有进行赋值操作，所以输出undefined而不报错。这里在前面直接调用fun（），运行结果是报错了，是因为这里的fun是个变量，不是函数，所以提升是把var fun；被提升到前面后（未进行赋值，也就是未进行函数定义），进行fun（），此时fun（）函数未被定义，所以调用fun肯定会直接报错。（1）变量提升：就是把所有的变量声明提升到当前的作用域最前面，不提示赋值操作。

使用 for ...in 语句来遍历，用于对数组或者对象的属性进行循环操作。k是属性名，obj【k】是属性值。

深浅拷贝是JavaScript一个非常经典的知识点，每次提到深浅拷贝我总是没办法特别清楚的表述出来，包括很多其他的知识点，其实是会的，但是没办法讲的很清楚，学习了费曼学习法，决定在复盘知识点的时候，每天找人讲解知识点，如果我能表达出来且让对方能听明白我讲的东西才算过关！这意味着如果原始对象包含嵌套对象，浅拷贝后的对象仍然会共享这些嵌套对象的引用。如果对象存在循环引⽤，即对象内部包含对⾃身的引⽤， JSON.stringify() ⽅法⽆法正确处理，会导致循环引⽤的属性被序列化为 null。

实现 WebSocket 相对简单，服务器端和客户端都有相应的库或 API 可以使⽤，例如 Node.js 中的 socket.io、ws 等，客户端则可以使⽤浏览器提供的 WebSocket API。与传统的 HTTP 请求-响应模式不同，WebSocket 提供了持久连接，使服务器能够主动向客户端推送数据，⽽不需要客户端发起请求。存在⼀个明显的弊端（消息只能有客户端推送到服务器端，⽽服务器端不能主动推送到客户端），导致如果服务器如果有连续的变化，这时只能使⽤轮询，⽽轮询效率过低，并不适合。

合并和压缩 CSS、JavaScript ⽂件，使⽤雪碧图、字体图标等减少图片请求，减少不必要的资源请求。：在构建Vue应⽤时，确保使用⽣产模式，这将禁⽤⼀些开发模式下的警告和调试⼯具，并启用性能优化的功能。：使⽤Vue的计算属性和侦听器来优化视图的更新。：使⽤Webpack的代码分割功能，将代码拆分为多个小块，按需加载，避免打包⼀个巨⼤的⽂件。等代码规范⼯具和静态代码分析⼯具，可以发现潜在的性能问题和优化机会，并进行相应的调整。：选择⾼效的插件和加载器，合理配置它们的项，以优化构建过程和资源处理。

正则表达式构造函数RegExp（）和正则表达式字面量的主要区别在于语法和使用方式。正则表达式构造函数RegExp（）使用字符串作为参数，需要进行双重转义，即需要使用双反斜杠来表示特殊字符，如 \\d 表示数字， \\w表示字母下划线等。构造函数的参数可以是一个字符串，也可以是两个字符串，第一个字符串是正则表达式模式，第二个字符串是修饰符。如果正则表达式模式是一个变量，只能使用构造函数的方式创建正则表达式。正则表达字面量 // （是左边一个 / 右边一个 / 将表达式包围起来）使用两个斜杠将

注意，以上⽅法都是基于 document 对象进⾏操作的，如果需要在特定的节点上执⾏这些操。作，可以使⽤相应节点的⽅法，例如 parentNode.appendChild(node)添加、移除、替换、插⼊节点。

对于 const 关键字声明的变量 x ，它创建了⼀个只读的引⽤，也就是说它的值不能被修改。在示例中， const x = 10 声明了⼀个常量 x ，⽽在 if 语句块内部再次使⽤ const x = 20 声明了⼀个新的常量 x ，它的作⽤范围也仅限于 if 语句块内部。const 关键字声明的变量创建⼀个只读的引⽤，其值不可修改，但对于复合类型的变量，可以修改其属性或元素的值。声明变量的作⽤域限制在其声明位置的上下⽂中，⽽⾮声明变量总是全局的。声明创建⼀个值的只读引⽤ (即指针)

在上述示例中，我们通过 Object.defineProperty() 对 data 对象的 message 属性进⾏劫持，并在 getter 和 setter 中添加了相应的⽇志和更新操作。vue.js 则是采⽤数据劫持结合发布者-订阅者模式的⽅式，通过 Object.defineProperty() 来劫持各个属性的 setter ， getter ，在数据变动时发布消息给订阅者，触发相应的监听回调。通过数据劫持，Vue能够捕获数据的变化，⽽发布者-订阅者模式则确保了数据变化时的及时通知和更新。

在上⾯的示例中，使⽤ forEach ⽅法遍历数组并输出元素、索引和原数组。⽽使⽤ map ⽅法遍历数组并返回每个元素的两倍值，⽣成⼀个新的数组 doubledNumbers。map ⽅法也⽤于遍历数组，返回⼀个新的数组，并且可以通过在回调函数中使⽤ return 语句来指定每次遍历的返回值。的，即使在遍历过程中使⽤ return 语句也⽆法停⽌遍历。⽽ map ⽅法可以使⽤ return 语句中断遍历。⽽ forEach ⽅法不能链式调⽤其他数组⽅法。⽽ forEach⽅法没有返回值，仅⽤于遍历数组。

11 . 管道操作符：提案阶段的特性，引⼊了管道操作符( |> )，可以将表达式的结果作为参数传递给下⼀个表达式，简化了函数调⽤和⽅法链的写法。9. 模块化：引⼊了模块化的概念，可以使⽤ import 和 export 语法导⼊和导出模块，提供了更好的代码组织和模块复⽤的⽅式。7. Promise：引⼊了 Promise 对象，⽤于更好地处理异步操作，解决了回调地狱的问题，并提供了更清晰的异步编程模式。8. 类：ES6引⼊了类的概念，可以使⽤ class 关键字定义类，实现了更接近传统⾯向对象编程的⽅式。

14. 对于⻓的逻辑语句或表达式，可以使⽤合适的换⾏和缩进来增加可读性，或者使⽤括号将其。7. 尽量避免使⽤全局变量，封装代码到函数或模块中，使⽤局部变量来限制作⽤域，减少命名。5. 使⽤缩进（通常是四个空格或⼀个制表符）来表示代码块的层次结构，增加代码的可读性。11 . 使⽤单引号或双引号来表示字符串，保持⼀致性，推荐使⽤单引号。12. 尽量使⽤模板字符串来拼接字符串，避免使⽤字符串连接符（9. 尽量避免使⽤隐式类型转换，使⽤严格相等运算符（）来提⾼代码的安全性和效率，避免使⽤隐式全局变量。

一开始是pending，然后可以转变为fulfilled或rejected，一旦转变为其中一种状态，就会保持在那个状态，无法再次改变。在settled状态下，Promise的状态已经确定，不会再发生变化。作的结果，调⽤了 resolve 或 reject ⽅法来改变 Promise 的状态。功时的回调函数，使⽤ catch ⽅法捕获了错误。在上⾯的示例中，我们创建了⼀个 Promise 对象，并在内部定义了⼀个异步操作。这样，我们就可以通过对 Promise 的状态进⾏判断和处理，来执⾏相应的操作。

Webpack具有强⼤的打包能⼒，能够将项⽬中的多个模块打包成⼀个或多个静态资源⽂件。它⽀持各种模块加载器和插件，可以处理各种类型的资源⽂件，并且能够进⾏代码压缩、⽂件合并、按需加载等优化操作，以提⾼应⽤的性能和加载速度。在实际开发中，Webpack 是一个非常强大的前端构建工具，可以用于将各种前端资源（如 JavaScript、CSS、图片等）打包成静态资源。- 根据开发环境和生产环境的不同，使用 webpack 的环境变量进行配置，以实现对应环境下的不同行为，如开发时的热更新、生产时的代码压缩等。

JavaScript 内存泄露指的是在程序中，不再使用的内存没有被正确释放，导致内存占用持续增加，最终引发性能问题甚至崩溃。setTimeout 的第一个参数使用字符串而非函数。一直存在于内存中，直到页面关闭，容易造成内存泄漏。控制台日志（console.log）移除存在绑定事件的 DOM 元素。通常哪些操作会造成内存泄漏呢？未使用 var 声明的全局变量。闭包函数（Closures）循环引用（两个对象相互引用）解析后的代码无法被垃圾回收。垃圾回收器定期扫描对象。

将字符串转换为数组，然后使用`reverse()`方法反转数组，最后再使用`join()`方法将数组转换回字符串。通过循环遍历字符串的每个字符，逆序拼接字符来构建反转后的字符串。使用递归函数逐个截取字符串的最后一个字符，并与剩余部分进行拼接。这些方法都可以实现字符串反转。我觉得最香最好用的还是第一种！

toFixed()`方法可以将数字转换为字符串，并保留指定小数位数。你还可以传递一个基数作为参数给`toString()`方法（例如，将数字转换为二进制、八进制或十六进制字符串）。这种方法利用了JavaScript的类型强制转换特性，当数字与字符串进行加法操作时，数字会被转换为字符串。字符串模板（ES6新增的功能）也可以用来将数字转换为字符串，通过将数字嵌入到`${}`中。将数字与空字符串（`""`）使用加号（`+`）运算符连接，也可以实现转换。`String()`函数可以将其参数转换为字符串。