1. push(接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度
2. unshift()在数组开头添加任意多个值，然后返回新的数组长度
3. splice传入三个参数，分别是开始位置、0（要删除的元素数量）、插入的元素，返回空数组
4. concat()首先会创建一个当前数组的副本，然后再把它的参数添加到副本末尾，最后返回这个新构建的数组，不会影响原始数组
5. pop()用于删除数组的最后一项，同时减少数组的length 值，返回被删除的项
6. shift()用于删除数组的第一项，同时减少数组的length 值，返回被删除的项
7. splice()传入两个参数，分别是开始位置，删除元素的数量，返回包含删除元素的数组
8. slice()用于创建一个包含原有数组中一个或多个元素的新数组，不会影响原始数组
9. indexOf()返回要查找的元素在数组中的位置，如果没找到则返回-1
10. includes()返回要查找的元素在数组中的位置，找到返回true，否则false
11. find()返回第一个匹配的元素
12. reverse()将数组元素逆序排列
13. sort()接受一个比较函数，用于判断哪个值应该排在前面
14. join()接收一个参数，即字符串分隔符，返回包含所有项的字符串
15. some()对数组每一项都运行传入的函数，如果有一项函数返回 true ，则这个方法返回 true
16. every()对数组每一项都运行传入的函数，如果对每一项函数都返回 true ，则这个方法返回 true
17. forEach()对数组每一项都运行传入的函数，没有返回值
18. filter()对数组每一项都运行传入的函数，函数返回 true 的项会组成数组之后返回
19. map()对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组

字符串常用方法

1. concat用于将一个或多个字符串拼接成一个新字符串
2. slice()
3. substr()
4. substring()这三个方法都返回调用它们的字符串的一个子字符串，而且都接收一或两个参数。
5. trim()、trimLeft()、trimRight()删除前、后或前后所有空格符，再返回新的字符串
6. repeat()接收一个整数参数，表示要将字符串复制多少次，然后返回拼接所有副本后的结果
7. padEnd()复制字符串，如果小于指定长度，则在相应一边填充字符，直至满足长度条件
8. toLowerCase()、 toUpperCase()大小写转化
9. charAt()返回给定索引位置的字符，由传给方法的整数参数指定
10. indexOf()从字符串开头去搜索传入的字符串，并返回位置（如果没找到，则返回 -1 ）
11. startWith()、includes()从字符串中搜索传入的字符串，并返回一个表示是否包含的布尔值
12. split把字符串按照指定的分割符，拆分成数组中的每一项
13. match()接收一个参数，可以是一个正则表达式字符串，也可以是一个RegExp对象，返回数组
14. search()接收一个参数，可以是一个正则表达式字符串，也可以是一个RegExp对象，找到则返回匹配索引，否则返回 -1
15. replace()接收两个参数，第一个参数为匹配的内容，第二个参数为替换的元素（可用函数）

==和===

（==）在比较中会先进行类型转换，再确定操作数是否相等 （ === ）只有两个操作数在不转换的前提下相等才返回 true。即类型相同，值也需相同

浏览器存储与JWT

浏览器存储 localStorage 数据持久化存储在磁盘中，用于存储用户偏好设置、缓存数据等。 sessionStorage 数据仅在当前会话（浏览器标签页）用于存储临时数据，如购物车信息。

JWT（JSON Web Token） 用户登录后，服务器返回JWT，前端将其存储在localStorage或cookie中。后续请求时，在请求头携带JWT，服务器验证后返回数据。 JWT有过期时间，过期后需要重新登录。

Cookie 存储在客户端的小型文本数据，可设置过期时间、作用域等。可自动发送到服务器，常用于存储用户身份信息。

Vue Router的路由模式与切换方法

路由模式

• Hash模式 URL中带有#，兼容性好，无需服务器特殊配置。
• History模式 URL无#，URL美观，符合传统URL格式。需要服务器配置，否则刷新页面可能出现404错误。

路由切换方法

• push 将新路由添加到历史记录中，可回退到上一个页面。
• replace 替换当前路由，不会添加到历史记录栈中，不可回退到上一个页面。

JavaScript的组成

JavaScript的组成

• ECMAScrip：JavaScript的语法标准，规定了基本语法、数据类型、操作符等。
• BOM（浏览器对象模型）：提供与浏览器交互的接口，如window、location、navigator等。
• DOM（文档对象模型）：将HTML文档表示为树形结构，提供操作文档的接口。

BOM的API

• window：全局对象，提供与窗口相关的操作，如window.alert()、window.location等。
• location：提供当前页面的URL信息，如location.href、location.reload()等。
• navigator：提供浏览器信息，如navigator.userAgent。

DOM的API

• document：代表整个HTML文档，提供查找和操作元素的方法，如document.getElementById()、document.createElement()等。 提供操作元素属性、样式、事件等方法。

Cookie

• 存储位置：属于DOM，通过document.cookie提供了一种方式来访问由浏览器为当前网页管理的cookie，这更接近于浏览器的行为层面，即BOM的部分功能。因为从根本上说，cookie的管理和存储是由浏览器控制的，
• 用途：存储用户身份信息、会话状态等。

for in和for of

for in

用于遍历对象的可枚举属性名（键）。

• 遍历的是对象的 键（key）。
• 可以遍历普通对象、数组、字符串等所有可枚举属性。
• 不保证顺序（尤其在对象中），不建议用于遍历数组（顺序可能不符合预期）。
• 包括原型链上的可枚举属性（除非使用 hasOwnProperty() 判断）。

for of

用于遍历可迭代对象的值（value）。

• 遍历的是 值（value）。
• 支持的类型包括：Array、Map、Set、String、TypedArray、arguments 对象、生成器（Generator）等。
• 不适用于普通对象（因为普通对象不可迭代）。
• 顺序是可预测的（如数组按索引顺序遍历）。

事件委托

事件委托（Event Delegation） 是 JavaScript 中一种高效的事件处理机制，它利用了 事件冒泡 的特性，将事件监听器绑定到父元素上，而不是每个子元素单独绑定。

事件委托的原理

• 在 DOM 中，事件会从目标元素向上传播（冒泡），途中经过它的所有祖先节点。
• 利用这一特性，我们可以在父级元素统一监听事件然后根据事件对象中的 target 属性判断具体是哪个子元素触发了事件。

事件委托的优点

1. 性能优化
   • 减少绑定的事件监听器数量，尤其适用于动态内容或大量子元素。
2. 支持动态添加的元素
   • 不需要为新添加的子元素重新绑定事件监听器。
3. 代码更简洁、易维护
   • 更少的事件绑定逻辑，提升可维护性。

事件委托就是“以父治子”，通过父元素来管理子元素的事件，提高性能和灵活性。

方式	优点	缺点
直接绑定事件	逻辑清晰，控制粒度细	性能差，不易维护动态内容
事件委托	性能好，兼容动态内容	逻辑稍复杂，需判断事件源

事件冒泡

事件冒泡 是 JavaScript 中 事件传播机制的一部分，它指的是：当一个元素上的事件被触发时，该事件会从当前元素（目标元素）开始，向上传播到其父元素、祖父元素，一直到 window 对象。

事件冒泡的应用

• 事件委托：利用冒泡机制，在父元素监听子元素的事件。
• 统一处理嵌套结构中的交互逻辑
• 阻止冒泡：使用 event.stopPropagation() 来阻止事件继续向上传播。

特性	事件捕获（Capture Phase）	事件冒泡（Bubbling Phase）
执行顺序	从外层向内层（window → target）	从内层向外层（target → window）
默认行为	否	是
是否支持	支持	支持
使用方式	addEventListener(type, fn, true)	addEventListener(type, fn, false) 或不写第三个参数

如何判断是否是数组

有以下几种方法可以判断一个值是否为数组：

• Array.isArray()方法

  • 最常用和推荐的方法，直接判断一个值是否为数组。
  • 示例：Array.isArray(arr)

• Object.prototype.toString.call()

  • 利用Object的原型方法toString，通过call改变上下文，获取对象的类型信息。
  • 示例：Object.prototype.toString.call(value) === '[object Array]'

• 原型链判断

  • 通过检查对象的__proto__或prototype属性是否为Array的原型。
  • 示例：value.__proto__ === Array.prototype 或 Object.getPrototypeOf(value) === Array.prototype

• instanceof操作符

  • 判断对象是否是某个构造函数的实例。
  • 示例：value instanceof Array

this的指向

谁调用指向谁 全局环境下的this指向window

箭头函数：没有this和arguments，捕捉外层的执行环境，继承了该外层的this

两个对象如何比较

1. 使用JSON.stringifyO方法转化成json字符串比较
2. 使用es6的object.is0方法
3. 使用递归的方式

展开运算符

迭代的对象展开到单独的元素中

对一维数组深拷贝 对多维数组第，一维深拷贝，其它为浅拷贝 对象的拷贝：一层深拷贝，二层浅拷贝

实现sleep

基于时间戳的实现

开始时获取当前时间戳，将当前时间戳加上目标时间获得结束时间戳 开启while循环，每次循环获取当前时间戳，当前时间戳大于等于目标时间戳时返回

缺点： 程序一直在执行，程序不会让线程休眠的，而且所有任务都会暂停，一直执行循环 在sleep过程中程序处于假死状态，不会执行其他任务的

基于promise实现

创建一个新的promise，在promise中执行settimeout定时器

贡献者

PinkDopeyBug

版权所有

版权归属：wynnsimon

许可证：署名 4.0 国际 (CC-BY-4.0)