5 JavaScript

约 2712 字大约 9 分钟

2025-06-17

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

字符串常用方法

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

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()等。提供操作元素属性、样式、事件等方法。

存储位置：属于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 属性判断具体是哪个子元素触发了事件。

事件委托的优点

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

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

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

事件冒泡

事件冒泡是 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