前端知识汇编（持续更新中）

舍予一

已于 2024-06-26 10:14:28 修改

阅读量534

点赞数 8

分类专栏：前端知识汇总文章标签：前端汇编

于 2024-01-15 17:36:58 首次发布

本文链接：https://blog.csdn.net/hsy0827/article/details/135606147

版权

前端知识汇总专栏收录该内容

28 篇文章 0 订阅

订阅专栏

1. 浅析cookie sessionStorage localStorage

详请-> cookie、Web Storage

同：

保存在浏览器端
都有同源限制（cookie：与特定域绑定，不被其他域访问；sessionStorage：与会话绑定；localStorage：来自相同域，子域不行）

异：

所有cookie都会作为请求头部由浏览器发送给服务器（在浏览器与服务器之间来回传递）；webStorage只存在浏览器本地；
存储空间大小不同，cookie一般只有4kb；webStorage的大小由浏览器限制，一般有5MB；
生命周期不同。cookie可设置过期时间；localStorage没有手动清除就会一直在；sessionStorage在会话结束时被清掉
应用场景不。Cookie一般用于存储登录验证信息SessionID或者token，LocalStorage常用于存储不易变动的数据，减轻服务器的压力，SessionStorage可以用来检测用户是否是刷新进入页面，如音乐播放器恢复播放进度条的功能。

2. *浅析js数据类型

详请-> JS数据类型（undefined、null、boolean、number、bigInt、string、symbol、object，8种）

js数据类型分两类：

简单数据类型（7种）：undefined、null、boolean、number、bigInt、string、symbol
复杂数据类型（1种）：object
（二者最大区别就是他们在内存中的存储方式不同，简单数据类型直接存储在栈中的简单数据，占据空间小；复杂数据类型存储在堆内存中，占用空间大，存取涉及指针）

注意：
BigInt和Symbol都是后面新加的数据类型，实际运用上比较少。

js中Numberr类型只能安全的表示-2⁵³+1 和 2⁵³-1 任何超出此范围的整数值都可能失去精度。BigInt 是一种内置对象，它提供了一种方法来表示超出 [-2⁵³+1， 2⁵³-1] 范围的整数。BigInt 可以用任意精度表示整数。

BigInt 和 Number 不是严格相等的，但是宽松相等的；
BigInt和Number之间不能进行混合操作；
最好Number和BigInt不要互相转换

Symbol是原始值，且Symbol实例是唯一、不可变的。Symbol的用途是确保对象属性使用唯一标识符，不会发生属性冲突的危险。Symbol就是用来创建唯一记号，进而作用非字符串形式的对象属性。可以作为object的key。

3. 浅析js中的闭包

详请-> 闭包
闭包指那些引用了另一个函数作用域中变量的函数，通常是在嵌套函数中实现的。

闭包形成的原理：作用域链。只要是代码都一个作用域中，写在函数内部的局部作用域，未写在任何函数内部即在全局作用域中；如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域；根据在 [内部函数可以访问外部函数变量] 的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作 作用域链。就近原则。
闭包带来的问题：由于垃圾回收器不会将闭包中变量销毁，于是就造成了内存泄露，内存泄露积累多了就容易导致内存溢出。

4. *浅析Promise

详请-> Promise
Promise的作用：Promise是异步微任务，解决了异步多层嵌套回调的问题，让代码的可读性更高，更容易维护。

Promise有三种状态·待定pending(初始)，兑现resolved，拒绝rejected，状态落定后不可逆。resolve 方法的参数是then中回调函数的参数，reject 方法中的参数是catch中的参数。

5. 浅析BFC

详请-> 浅析BFC

定义：BFC(Block Formatting Context)块级格式化上下文，是Web页面一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素。
形成条件：
float 设置成 left 或 right ；
position 是absolute或者fixed；
overflow 不是visible，为 auto、scroll、hidden；
display是flex或者inline-block 等
作用：
解决外边距塌陷
解决包含塌陷（解决子级元素外边距会使父级元素塌陷的问题）
解决当父级元素没有高度时，子级元素浮动会使父级元素高度塌陷的问题
阻止标准流元素被浮动元素覆盖

6. 浅析Vuex

详请-> 浅析Vuex

Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享。
State用来存储公共数据源。
Mutation用于同步变更state中的数据。
Action用于异步变更state中的数据，但是在Action中还是要用过触发Mutation的方式间接变更数据。
Getter用于对Store中的数据进行加工处理形成新的数据（类似于计算属性），Store中数据发生变化，Getter中的数据也会变化。
moudle属性是将store分割成模块。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。

7. vue3基础知识汇总

详请-> vue3知识整理

8.Vue Router基础知识整理

详请-> Vue Router基础知识整理

9.Vue3 Vite配置环境变量

详请-> Vue3 Vite配置环境变量

10. 基于Vue3的Axios异步请求

详请-> 基于Vue3的Axios异步请求

11. ES6 Generator函数

详请-> ES6 Generator函数

12. TypeScript知识整理

详请-> TypeScript知识整理

13. js中的遍历（for、forEach、map、filter、reduce、every、some、includes、find）

详请-> js中的遍历（for、forEach、map、filter、reduce、every、some/、includes、find）

for
foreach
map：创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
filter：创建给定数组一部分的浅拷贝，其包含通过所提供函数实现的测试的所有元素。filter()过滤方法，会对原数组中的每个元素应用指定的函数，并返回一个新数组，其中包含符合条件的元素。原数组不会受到影响。
reduce：对数组中的每个元素按序执行一个提供的 reduce 函数，每一次运行 reduce 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。
every：测试一个数组内的所有元素是否都能通过指定函数的测试。它返回一个布尔值，全部满足返回true,只要有一项不满足则返回false。
some：测试数组中是否至少有一个元素通过了由提供的函数实现的测试。如果在数组中找到一个元素使得提供的函数返回 true，则返回 true；否则返回 false。它不会修改数组。只要找到满足的就不再往下遍历
includes：判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。
find:返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。只要找到满足的就不再往下遍历。