前端笔记+面试

获取DOM所有元素

documents.all

获取树状的所有节点

通过递归获取DOM，先从根元素开始遍历，再判断该元素是否存在child，再行递归。

什么是虚拟DOM

参照上述

VUE3 diff算法的变化

增加了动态节点（patch flag）的标签，避免重复遍历（详见上）

JS中广度遍历与深度遍历

简单总结：广度优先是逐层遍历，深度优先是自上而下地遍历。

详解：

​ 广度：按照数据结构的层次一层一层地遍历，创建一个队列对其进行遍历，如果某一项存在子节点，则将子节点加入队列末端。当前节点在遍历时则会在队列中删除。（队列，先进先出）

​ 深度：按照树形结构直接向下查找子节点，如果子节点不存在后再回溯到上一级节点的兄弟节点遍历，当不存在兄弟节点后再以此类推向上回溯，直至遍历完所有节点。（堆栈，后进先出，这里和堆栈并无关系）

数组去重的几种方式

第一种：new Set去重

第二种：两层循环法

嵌套循环去重（判断当前是否已经存在，是的话splice）

利用indexOf去重（arr.indexOf(item)===-1; arr.push(item)）\

利用sort排序，然后遍历和相邻元素对比

使用includes(类似indexOf)

filter，reduce去重

如果还有对象或数组，查找是否存在不同键值，再行去重，如果有嵌套对象或数组，则需要递归去重，对比对象每一个键值（不可使用JSON.parse,如果对象键值一样但是顺序不一样，判断失败）

前端的几种设计模式

结构型模式：

​ 外观模式：将子系统api统一封装在高层接口中，以便于子系统更容易使用，例如JQuery、常见的框架和npm库等。

​ 代理模式：增加对象的访问控制并添加额外的逻辑。例如Vue3的响应式原理。

创建型模式：

​ 工厂模式：将同一业务代码进行统一化，集中化的封装，避免代码混乱、重复的问题。（不再需要一个个引入构造函数，只需引入工厂对象即可）

​ 单例模式：单例模式的class实例个数只能为1，当需要一个对象贯穿整个系统时才需要单例模式，且会引入全局状态，尽量避免使用。

行为型模式

​ 策略模式：当同一个行为在不同的场景中有不同的实现方式，就需要采取策略模式，例如登录可分为密码登录，验证码登录，第三方登录等，这些行为会配置一个统一的接口或者行为模式。方便在运行时切换策略，并且可避免大量的判断，不同策略可分开编写，便于维护。

​ 迭代器模式：用于遍历容器中的元素，提供一致的遍历数据结构的方式，不用了解数据结构，提供遍历容器的能力且不用变更容器的接口。

​ 观察者模式（订阅模式）：当监测的对象变化时，通过调用观察者的方法将变化通知给观察者，例如Vue就应用了其作为响应式原理的一部分。

​ 中介者模式：中介者(Mediator)包装了一系列对象的交互方式，使得这些对象不必直接交互二十由中介者进行处理交互，从而松散耦合。当某些对象的作用 发生变化时，不会立即影响另外的对象的作用，保证这些作用可以独立于彼此的变化。中介者和观察者有些类似，都是一对多和集中式通信，但是中介者只处理同级对象之间的变化，而观察者只处理观察者和对象之间的交互。

​ 访问模式：访问者模式可以让我们在不改变对象结构的前提下给该对象新增不同的逻辑并保持在独立的访问者对象中，访问者模式常用于库和工具的拓展。

JS的事件循环（见上）

JS作为单线程语言，script在开始执行的时候整体作为一个宏任务开始执行，并在执行的时候将任务分为同步任务和异步任务，同步任务放在主线程中执行，异步任务会放在子线程中执行，不会影响主线程的执行栈。

执行完的子任务将会放在任务队列中等待被主线程调用，当主线程执行栈执行完毕后，则会在任务队列中调取任务执行。

而任务队列又分为宏任务和微任务，微任务会先于宏任务在执行栈中执行，宏任务会放在下一次的事件循环中执行。

如此循环，就形成了事件循环。