前端八股文经验分享：面试拷打经历 与 知识总结（纯个人总结）（九） - 持续更新ing

1. CSS中常见的结构伪类和伪元素分别有哪些？

结构伪类        :nth-child / :nth-of-type / :nth-last-child / :nth-last-of-type

伪元素            ::before / ::after / ::first-line / ::placeholder

2. HTML的全局属性有哪些？ Id、class、style、name、title

3. 写出URL的组成格式？ [协议类型] :// [服务器地址] :  [端口] / [文件路径][文件名] ? [查询] # [片段ID]

4. 说说TypeScript中命名空间与模块的理解和区别

命名空间：命名空间一个最明确的目的就是解决重名的问题

模块：TypeScript 与 ECMAScript 2015 一样，任务包含顶级 import 或者 export 的文件都被当成一个模块

区别：

• 命名空间位于全局命名空间下，但在大型的应用中，很难去识别组件之间的依赖关系
• 像命名空间一样，模块可以包含代码和声明，不同的是模块可以声明它的依赖
• 在正常的 TS 项目过程中并不建议用命名空间，但通常在通过 d.ts 文件标记 js 库类型的时候使用命名空间，主要作用是给编译器编写代码的时候参考使用

5. TS 和 JS 的区别

TS 是 JS 的超集，可以被编译成JS代码。用 JavaScript 编写的代码，在 TS 中依然生效。TS 是纯面向对象的编程语言，包含类和接口的概念。程序员用它来编写面向对象的服务端或客户端程序，并将他们编译成 JS 代码。

6. TS 中 Declare 关键字有什么作用？

所有的 JavaScript 库/框架都没有 TypeScript 文件，但我们希望在 TypeScript 文件中使用它们时不会出现编译错误。为此，使用 declare 关键字。

7. 解释一下 TS 的枚举

枚举是 TypeScript 数据类型，它允许我们定义一组命名变量，使用枚举去创建一组不同的案例变得更加容易

8. TS 中什么是装饰器

装饰器是一种特殊类型的声明，它能被附加到类声明，方法，属性或参数上，可以修改类的行为
装饰器的分类：类装饰器、属性装饰器、方法装饰器、参数装饰器

9. TS中模块是什么？

是相关变量、函数、类和接口的集合，可以将它视为包含执行任务所需一切的容器，通过导入可以在项目之间共享

10. TS 中 never 和 void 的区别

void 表示没有任何类型 （可以赋值为 null 和 undefined）
never 表示一个不包含值的类型，即表示永远不存在的值

拥有 void 返回值类型的函数能正常运行，拥有never返回值类型的函数无法正常返回，无法终止或抛出异常

11. TS 中类型断言是什么？

类断言可以用手动指定一个值具体类型，即允许变量从一种类型更改为另一种类型

当你比 TS 更了解某个值的类型，并且需要指定更具体的类型时，我们可以使用类型断言

12. TS 中 any 和 unknown 有什么区别

any 和 unknown 都是顶级类型，但是 unknown 更加严格，不像 any 那样不做类型检查，反而 unknown 因为未知性质，不允许访问属性，不允许赋值给其他有明确类型的变量

13. TS中什么是方法重载

方法重载是指在一个类中定义多个同名的方法，但是要求每个方法具有不同的参数或参数的个数，基本上，它在派生类或子类中重新定义了基类方法

方法覆盖规则：

• 该方法必须与父类中的名称相同
• 它必须具有与父类相同的参数
• 必须存在 IS-A 类或继承

14. TS 中的类是什么？

类表示一组相关对象的共享行为或属性

15. 解释如何使用 TypeScript mixin

Mixin 本质上是在相反方向上工作的继承，Mixins 允许你通过组合以前类中更简单的部分来设置构建新类

相反，类 A 继承类 B 来获得它的功能，类 B 从类 A 需要返回一个新类的附加功能

16. 什么是 TypeScript 映射文件

1. TypeScript Map 文件是一个源映射文件，其中包含有关我们原始文件的信息
2.  .map 文件是原映射文件，可以让工具在发出 JavaScipt 代码和创建它的 TypeScript 源文件之间进行映射
3. 许多调试器可以使用这些文件，因此我们可以调试 TypeScript 文件而不是 JavaScript 文件

17. TS 中的 interface 和 type 有什么区别

相同点：

• 都可以描述一个对象或函数
• 都允许拓展

不同点：

• type 可以声明基本类型别名，联合类型，元组等类型；interface 不行
  type 还可以使用 typeof 获取实例的类型就行赋值
• interface 可以声明合并；type不行

18. TS 中 getter / setter 是什么

getter 和 setter 是特殊类型的方法

getter 允许你引用一个值但不能编辑它

setter 允许你更改变量的值，但不能查看其当前值

19. TypeScript 中 const 和 readyonly 的区别？

const 用于变量；readyonly 用于属性

const 在运行时检查；readyonly 在编译时检查

使用 const 保存的数组，可以使用push，pop 等方法；但如果readyonly Array 声明的数组不能使用数组方法

20. Omit 类型有什么作用

Omit 以一个类型为基础支持剔除某些属性，然后返回一个新类型

21. SEO优化

通过搜索引擎优化，我们的网站可以在搜索结果的排名中靠前

1. 创建唯一且准确的网页标题 < title >
2. 使用 meta description 标签来准确概括总结网页内容
3. 使用 meta keywords 来提取网页重要关键字
4. 网页 logo 不用 img 插入，而用超链接 a 标签插入，并写上关键字内容
5. 使用语义化元素，比如 <h1> ，但不可滥用
6. 利用 <img> 中的 alt 属性，图片未加载成功时，可以用文字代替
7. 应尽量让结构（HTML）、表现（CSS）、和行为（JS）分离
8. 扁平化网站结构，目录结构一般不多于3级

22. 怎么实现图片懒加载的

实现思路：

1. img 元素的自定义属性上 data-xxx 上挂载目标图片 url，src 属性指向默认地址
2. 监听图片是否出现在用户的可视区域内
3. 出现在可视区域内后更新 src 属性为目标图片 url

实现方法：

1. 监听 scroll 事件+节流，对比容器高度，滚动高度，和图片距离容器顶部的高度。判断是否滚动到可视区域
2. 使用 intersectionObserver API 实现，接受两个参数，call back 是可见性变化时的回调函数，option 是配置对象（可选）

23. 为什么体积较小的图片才转化为 base64

因为直接使用图片，会使用一个 http 链接进行请求，一个小图片也运行一次 http，得不偿失

24. 链表中头节点和头指针的区别

头结点：指链表中物理上的第一个结点，头结点通常不存储信息

头指针：指物理上第一个结点的指针（存放该结点地址的变量）

25. 二叉树的应用场景

1. AVL 树：最早的平衡二叉树之一。应用相对其他数据结构比较少，windows 对进程地址空间的管理用到 3AVL 树
2. 红黑树：平衡二叉树，广泛用于 C++ 的 STL 中，如 map 和 set 都是用红黑树实现的，还有 Linux 文件管理
3. B / B+ 树：用在磁盘文件组织，数据索引和数据库索引
4. Tire 树（字典树）：用在统计和排序大量字符串

二叉树遍历方式：

• 前序遍历：root ---> left ---> right
• 中序遍历：left ---> root ---> right
• 后序遍历：left ---> right ---> root
• 层序遍历：按照层次遍历

26. 堆排序

堆是一种叫做完全二叉树的数据结构，可以分为大根堆，小根堆，而堆排序就是基于这种结构而产生的一种程序算法

大根堆：每个节点的值都大于或等于它的左右孩子节点的值

小根堆：每个节点的值都小于或等于它的左右孩子节点的值

排序思想：（升序用大根堆，降序用小根堆）

• 首先将待排序的数组构成一个大根堆；即最大值为顶端
• 将顶端的数与末尾的数交换，此时，末尾的树为最大值，剩余待排序数组个数为 n-1
• 将 n-1 个数组再构成大根堆，重复前两步，便可得到有序数组

27. 七层模型 OIS

一、应用层

        网络服务与最终用户一个接口
        协议有：HTTP，HTTPS，DNS，TFTP，POP3，SMTP

二、表示层（已合并至应用层）

        数据的表示、安全、压缩

三、会话层（已合并至应用层）

        建立、管理、终止对话

四、传输层

        定义传输数据的协议端口号，以及流控和差错校验
        协议有：TCP、UDP

五、网络层

        进行逻辑地址寻址，实现不同网络之间的路径选择

        协议有：ICMP、IP（IPV6、IPV4）

六、数据链路层

七、物理层

28. 圣杯布局的实现

方法一：绝对定位

        左右两边盒子采用绝对定位固定高度，中间的盒子用 margin-left 和 margin-right 将盒子固定在中间

方法二：flex 布局

        左右两边的盒子固定高宽，中间盒子采用 flex:1 占剩下的内容区域

29. flex:1 的真正意思

flex:1 表示 flex:1 1 0 ;

定义了在分配剩余空间之前，项目占据的主轴空间

flex-basis: atuo

flex-basis: 0

30. CSS 层级问题

两个元素，现在 B 叠在 A 上，你想让 A 叠在 B 上，就设置了 A 的 z-indx 大于 B 的。但你发现设置后 B 还是叠在 A 上，你觉得可能是哪些原因导致没有生效呢？

z-index 的元素position，没有设置为 relative；

31. 用 html+css 实现布局

父元素宽度未知，三个子元素默认间距30px，但当父元素不够宽时，三个子元素的间距会自动缩小

父元素够宽时，子元素水平居中，间距为30p

 父元素不够宽时，子元素间距会自动缩小

 代码：

< !DOCTYPE html >
<html>
<body>
<div class='parent'>
    <div class='child'>A</div>
    <div class='item'></div>
    <div class='child b'>B</div>
    <div class='item'></div>
    <div class='child c'>C</div>
</div>
</body>
<style>
.parent{
background:grey;
width:100%;
height:200px;
dispaly:flex;
justify-content:center;
align-items:center;
}

.child{
background:red;
width:50px;
height:50px;
justify-self:center;
flex-shrink:0
}            
.item{
width:30px;
            }
</style>
</html>

32. 类组件的生命周期

挂载、更新、卸载 

33. 全局、块级、函数三种作用域的区别

一、全局作用域

        在函数之外，使用 var 进行定义，在全局中都能使用全局变量，对应的就是全局作用域

二、函数作用域

        在函数之内，使用var进行定义的局部变量，对应的就是全局作用域

三、块级作用域

        es6中，通过关键字 let 定义变量，只能在当前代码块使用（以 {} 为界）

34. 多人协同开发时如何解决变量命名冲突

es6 之前，采用匿名 IIFE ，程序员自己定义一个对象通过属性来存放自己的变量，然后把对象挂载到 windows 中，最后通过访问其属性和方法

es6 之后，块级作用域即可

35. click 事件属于宏任务还是微任务

宏任务

36. 如何防护 CSRF

1. 尽量使用 post
2. 利用好 cookie 的 SameSit 属性 （从第三方站点发送请求时，禁止 cookie 发送）
3. 用随机数 token 验证

37. 在页面渲染前想要初始化的数据初始化在哪个钩子中？

created ()

38. ES6 的 Symbol

新的基本数据类型，可以通过 const a=Symbol() 创建，内存中独一无二的值，除了通过变量a，任何情况都无法重新创建这个值，并且 Symbol 的值不会与别的值相等，Symbol 类型的变量只是为了标记一块唯一的内存而存在的。因此，Symbol 类型的值不参与运算

39. Webpack 中的 Loader 与 plugin

一、Loader

        对于 Loader 我们可以通过 rules 去匹配，哪些文件被这个 Loader 所处理，Loader 本身是一个函数，当 webpack 解析资源的时候，会调用相关的 Loader 去处理，Loader 接收到文本内容作为参数外，将处理完的内容进行返回出去，那么 Loader 除了接收内容作为参数外，还有 map 代表 sourcemap 以及 meta 代表别的 Loader 传递的参数

例如：clean-log-loader        清楚开发过程用来调试的 console.log() 

           banner-loader            对所编译的打包文件，都添加上作者信息

二、Plugin

        通过扩展 webpack 功能，加入自定义的构建行为，使得 webpack 可以执行更广泛的任务，webpack 在编译代码执行过程中，会触发一系列 Tapable钩子事件，插件所做的就是找到相应的钩子，往上面挂上自己的任务，这样，当 webpack 构建的时候，插件注册的事件会随着钩子的触发而执行了

        Plugin 构建对象中有 complier 和 compilation

Compiler：

        compiler 对象中保存着完整的 webpack 环境配置，在首次启动 webpack 时创建，独一无二，且仅会创建一次对象

        有以下属性：

                compiler.options 可以访问本次启动 webpack 时所有的配置文件

                compiler.hooks 可以注册 taple 的不同种类 hook，从而可以在 compiler 生命周期中植入不同逻辑

                compiler.inputFileSystem 和 compiler.outputFileSyatem 可以进行文档操作

Compilation:

        代表一次资源的构建，compilation 实例能够访问所有的模块和他们的依赖

        一个compilation对象会对构建依赖图中所有模块进行编译，在编译阶段，模块会被加载（load）、优化（optimize）、分块（chunk）、哈希（hash）和重新创建（restore）

        主要属性：

                compilation.modules        可以访问所有模块，打包的每一个文件都是一个模块

                compilation.chunks           chunk 即是多个 modules 组成而来的一个代码块

                compilation.assets            可以访问本次打包生成所有文件的结果

                compilation.hooks             可以注册不同 hooks，在编译阶段进行逻辑添加和修改

40. 如何使用页面适配移动端

1. flex+rem 单位 ；flex+viewport width / vh
2. rem 单位，rem 相对单位，跟 html 文字大小有关系
3. 媒体查询，检测屏幕的视口宽度，设置不同 html 文字大小
4. flexible.js，可以自动检测屏幕宽度，自动修改 html 文字大小
5. less 预处理，让 css 有了计算能力

41. 数组哪些方法会更新其元素组，哪些不会

会更新	不会更新	其他方法
push	slice	join
unshift	concat	toString
pop	filter	indexOf
splice	map	includes
reserve		every
sort		forEach
shift		find / some/ every

42. 事件循环的原理

EventLoop 是 js 中一个底层运行原理，js 是单线程的，但是也有一些耗时任务，会影响执行效率，代码都在主线程中执行，当遇见像 ajax 请求，setTimeout 定时器，会单独开启异步线程，异步线程耗时之后会推入异步队列中等待执行，然后当主线程执行完毕后，会到异步队列中取出到主线程中执行，然后再去异步队列取第三个，这个来回取得过程，即事件循环。

43. Event Bus 中的设计模式

一、单例模式

定义：确保一个类只有一个实例，并为整个系统提供一个全局访问点（向整个系统提供这个实力）

使用：内部缓存了各个组件发送过来的 event 对象，并负责分发出去，各个组件需要向同一个Event Bus 对象注册自己，才能接受到 event 事件

二、观察者模式

定义：定义对象间一种一对多的依赖关系，使得每当一个对象改变状态，则所有依赖它的对象都会得到通知并自动更新

使用：当一个 Message Event 对象改变了状态的时候，所有依赖他的 event 对象都会收到通知并作出对应的处理

44. Object 包含哪些属性

一、数据属性 (数据描述符)
(1) configurable：表示能否通过 delete 删除此属性，能否修改属性的特性，或能否修改把属性修改为访问器属性，如果直接使用字面量定义对象,默认值为true。
(2) enumerable：表示该属性是否可枚举，即是否通过 for-in 循环或 Object.keys() 返回属性，如果直接使用字面量定义对象，默认值为true。
(3) writable：能否修改属性的值，如果直接使用字面量定义对象，默认值为 true。
(4) value：该属性对应的值，默认为 undefined.

二、访问器属性(存取描述符)
(1) configurable：和数据属性的 [[Configurable]] 一样，表示能否通过 delete 删除此属性，能否修改属性的特性，或能否修改把属性修改为访问器属性，如果直接使用字面量定义对象，默认值为 true
(2) enumerable：和数据属性的 [[Configurable]] 一样，表示该属性是否可枚举，即是否通过 for-in 循环或 Object.keys() 返回属性，如果直接使用字面量定义对象，默认值为 true
(3) get：一个给属性提供 getter 的方法(访问对象属性时调用的函数，返回值就是当前属性的值)，如果没有 getter 则为undefined. 该方法返回值被用作属性值。默认为 undefined
(4) set：一个给属性提供 setter 的方法(给对象属性设置值时调用的函数)，如果没有 setter 则为 undefined 。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认为 undefined.
 

45. Vuex 包含哪些属性，及使用方法

state、getters、mutations、actions、modules

1、state：vuex 的基本数据，用来存储变量
2、geeter: 从基本数据(state)派生的数据，相当于 state 的计算属性
3、mutation: 提交更新数据的方法，必须是同步的(如果需要异步使用 action )。每个 mutation 都有一个字符串的事件类型       ( type )和一个回调函数( handler )。
回调函数就是我们实际进行状态更改的地方，并且它会接受state作为第一个参数，提交载荷作为第二个参数。
4、action：和 mutation 的功能大致相同，不同之处在于==》1. Action 提交的是 mutation ，而不是直接变更状态。2. Action 可以包含任意异步操作。
5、modules: 模块化 vuex, 可以让每一个模块拥有自己的 state、mutation、action、getters，使得结构非常清晰，方便管理。
 

46. slot 的作用

slot分为三类，默认插槽，具名插槽和作用域插槽

• 默认插槽：又名匿名插槽，没有设置name属性的插槽，一个组件内只有一个匿名插槽
• 具名插槽：带有 name 属性的 slot，一个组件可以出现多个具名插槽
  1. 如果父组件想要传递多个便签内容，可以使用 <template> 包裹
  2. 且用 v-slot 指令指定子组件中的具名插槽的位置
  3. v-slot 只能添加在 <template> 上
  4. v-slot: default 指向默认插槽
• 作用域插槽：在子组件渲染作用域插槽时，可以将子组件内部的数据传递给父组件，让父组件根据子组件传递过来的数据决定如何渲染该插槽
  1. 在子组件的坑（插槽）里绑定数据 <slot :数据名="数据名"></slot>
  2. 绑定在 <slot> 元素上的属性 childData 被称为插槽 prop
  3. 父组件需要通过 <template slot-scope="接收数据的别名">
  4. 作用域插槽也可以配置名字

slot 与 props 的区别：通过 props 属性，父组件可以向子组件传递属性，方法，可是父组件不能通过属性传递带标签的内容、甚至是组件，而插槽可以。

47. bind、call、apply 的区别与应用

一、相同点

都可以改变函数内部的 this 指向

二、区别点

1. call 和 apply 会调用参数，并且改变函数内部 this 指向
2. call 和 apply 传递的参数不一样，call 传递参数以 aru1，aru2... 形式，apply必须以数组的形式 [arg]
3. bind 不会调用函数，可以改变函数内部 this 指向

三、主要应用场景

1. call 经常做继承
2. apply 经常跟数组有关系，比如借助数学对象实现数组 max、min
3. bind 不调用函数，改变函数内部 this 指向。eg: 改变定时器内部 this

48. 模块化和组件化的区别

一、模块化

是从代码逻辑角度进行划分，保证每个模块的职能单一；比如登录页的登陆功能，就是一个模块，注册功能又算一个模块

二、组件化

是从 UI 的角度划分的；页面上的每个独立的区域，都可以视为一个组件，前端组件化开发，便于 UI 组件的复用，减少编码量

49. express 中间件

中间件：特指业务流程的中间处理环节

express 的中间件本质上是一个 function 处理函数（参数必须包含 next）

中间件的作用：多个中间件之间，共享一份 req、res，基于这样的特性，我们可以在上游的中间件中，统一为 req 或 res 对象添加自定义属性或方法，供下游的中间件或路由使用

50. Node 中 setTimeout 和 setImmediate 的执行顺序问题

Node 中的 libuv 在遇到 setTimeout 函数时，会立即执行 setTimeout 函数，将其回调函数放入一个树结构中存储，虽然说设置延迟0ms，但是这个存储过程会消耗时间，假设是 10ms 将回调函数放入树结构，然后延迟 0ms 将其放入事件队列，这个过程花费了 10ms

当 node 执行完 main script 时会初始化事件循环

假设当这个初始化花费的时间大于 10ms 时，也就是说在事件循环初始化前 setTimeout 的回调函数就被放入了 timer 事件队列，这时就会按照顺序依次执行 setTimeout setlmmediate

假设当初始化事件循环的时间小于10ms时，也就是说在 setTimeout 回调函数被放入 timer 事件队列前，事件循环就已经初始化了，这时事件队列中还没有 setTimeout的回调函数，所以会先执行 setlmmediate，当执行到第二次 tick 时才会执行setTimeout 的回调函数，所以此时的打印顺序为 setlmmediate setTimeout