前端面试知识点汇总

记录了我自己准备前端面试时复习的内容

HTML

CSS

目前用过sass(scss)和less
记录一些特殊点和用法

&
表示嵌套的上一级，表示当前的选择对象

.el-row {
    margin-bottom: 20px;
    &:last-child {
        margin-bottom: 0;
    }
}

等价于

.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}

吸附导航

//html
<div class="app-header-sticky" :class="{ show: y > 78 }"></div>
//js/vue
import { useScroll } from '@vueuse/core'
const { y } = useScroll(window)
//scss
.app-header-sticky {
  position: fixed;
  // 此处为关键样式!!!
  // 状态一：往上平移自身高度 + 完全透明
  transform: translateY(-100%);
  opacity: 0;

  // 状态二：移除平移 + 完全不透明
  &.show {
    transition: all 0.3s linear;
    transform: none;
    opacity: 1;
  }
}

JavaScript

回调函数
嵌套函数体在完成某种操作后由内向外调用某个外部函数
函数作为参数传递给另外一个函数
回调地狱
回调函数是一个this对象的方法时，必须保证this对象的上下文，Call和Apply函数来保存this

ES6

var let const
作用域. 变量提升. 重复声明. 暂时性死区
数组新增
1. … 数组变成参数序列
  浅拷贝解构赋值参数最后一位 iterator对象转成数组
2. 构造函数 Array.from() Array.of()
3. 实例对象方法
  copyWithin() 复制覆盖
  find(). findIndex() 查找
  fill() 填充
  entries()，keys()，values() 遍历
  includes() 判断是否包含
  flat()，flatMap() 扁平化（层数）
对象新增
1. 简写
2. 属性名表达式
3. super指向当前对象的原型对象
4. 扩展运算符解构赋值浅拷贝
5. 属性遍历数值键->字符串键->symbol键
  for…in：循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）
  Object.keys(obj)：返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名
  Object.getOwnPropertyNames(obj)：回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名
  Object.getOwnPropertySymbols(obj)：返回一个数组，包含对象自身的所有 Symbol 属性的键名
  Reflect.ownKeys(obj)：返回一个数组，包含对象自身的（不含继承的）所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举
6. 方法
  Object.is() 严格相等 +0不等于-0，NaN等于自身
  Object.assign() 对象合并浅拷贝替换
  Object.getOwnPropertyDescriptors()
  Object.setPrototypeOf()，Object.getPrototypeOf()
  Object.keys()，Object.values()，Object.entries()
  Object.fromEntries()
函数新增
1. 参数尾参数
2. length name
3. 箭头函数参数=>返回值
Set Map
1. Set
  add() delete() has() clear()
  keys()：返回键名的遍历器
  values()：返回键值的遍历器
  entries()：返回键值对的遍历器
  forEach()：使用回调函数遍历每个成员
  数组字符串去重
  filter 并集交集差集
2. Map
  set() get() has() delete() clear()
  keys()：返回键名的遍历器
  values()：返回键值的遍历器
  entries()：返回所有成员的遍历器
  forEach()：遍历 Map 的所有成员
  weak没有遍历属性
promise
Promise(function(resolve, reject) {})
then()
catch()
finally()
Promise对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止
generator
function关键字与函数名之间有一个星号
函数体内部使用yield表达式，定义不同的内部状态
通过next方法才会遍历，直到一个yield表达式暂停，返回值是yield表达式的值，下一次next方法继续，直到return
next可以带一个参数，当做一个yield表达式的返回值
返回的是Iterator对象，可以通过for…of进行遍历
异步处理
回调函数
Promise 对象
generator 函数可以控制迭代
async/await 本质上generator
proxy
用于创建一个对象的代理，从而实现基本操作的拦截和自定义
var proxy = new Proxy(target, handler)
Reflect 的所有属性和方法都是静态的（ Math 对象），提供拦截 JavaScript 操作的方法
get() set() deleteProperty()
Proxy.revocable(target, handler);取消代理
在复杂操作前对操作进行校验或对所需资源进行管理
拦截和监视外部对对象的访问
使用 Proxy 保障数据类型的准确性
使用Proxy实现观察者模式，观察者模式（Observer mode）指的是函数自动观察数据对象，一旦对象有变化，函数就会自动执行
module
静态化在编译时就完成模块加载
export：用于规定模块的对外接口
import：用于输入其他模块提供的功能
decorator
装饰器命名相当于一个注释，在不改变原有代码情况下，对类和类属性原来功能进行扩充
不能修饰函数

Vue.js

Node.js

Node.js 是一个开源与跨平台的 JavaScript 运行时环境
事件驱动、非阻塞和异步输入输出模型

算法

前端
diff算法深度优先算法时间复杂度:O(n) 最小量更新
patch 比较虚拟DOM根节点是否同一类型，不同直接替换
|
patchVnode 进一步比较两个虚拟节点有无text和children
|
updateChildren 都有子节点的情况下比较更新真实节点
四个指针，指向oldVnode子节点列表中的第一个节点和最后一个节点以及指向newVnode子节点列表中的第一个节点和最后一个节点，节点比较过，前的指针++，后的指针—
1. oldS 和 newS 使用sameVnode方法进行比较，sameVnode(oldS, newS)
2. oldS 和 newE 使用sameVnode方法进行比较，sameVnode(oldS, newE)，相同的话移动真实节点OE之后
3. oldE 和 newS 使用sameVnode方法进行比较，sameVnode(oldE, newS)，相同的话移动真实节点OS之前
4. oldE 和 newE 使用sameVnode方法进行比较，sameVnode(oldE, newE)
5. 如果以上逻辑都匹配不到，再把所有旧子节点的 key 做一个映射到旧节点下标的 key -> index 表，然后用新 vnode 的 key 去找出在旧节点中可以复用的位置
6. old先处理完，新增newS和newE之间的节点
7. new先处理完，删除oldS和oldE之间的节点
  key的设置判断两个虚拟节点是否为相同节点
  不建议用index作为循环项的key，因为操作过程中index会改变，一些相同节点index变了会被当成新的节点，用id的话每个节点key都不同，便于更新时复用节点
排序
数据结构
数组
栈
队列
链表
树
图
堆
散列表
经典算法

网络协议

HTTP
C/S模式可以传输任意类型数据对象明文传输，无身份验证不安全
默认端口80
无连接：限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间
无状态：HTTP协议无法根据之前的状态进行本次的请求处理
HTTPS
加密传输让HTTP运行安全的SSL/TLS协议(TCP/IP 协议与应用层协议之间)上
默认端口443 因为加密和多次握手，性能相对较差
通信过程:
- 首先客户端通过URL访问服务器建立SSL连接
- 服务端收到客户端请求后，会将网站支持的证书信息（证书中包含公钥）传送一份给客户端
- 客户端的服务器开始协商SSL连接的安全等级，也就是信息加密的等级
- 客户端的浏览器根据双方同意的安全等级，建立会话密钥，然后利用网站的公钥将会话密钥加密，并传送给网站
- 服务器利用自己的私钥解密出会话密钥
- 服务器利用会话密钥加密与客户端之间的通信
SSL
- 对称加密：加密和解密使用的秘钥是同一个，秘钥发送的过程中容易被窃取
- 非对称加密：有公钥和私钥，公钥加密后只能用私钥解密，私钥加密后也只能用公钥解密
- 混合加密：
  发送者用会话密钥加密消息（对称），用公钥加密的会话密钥（非对称），两个一起发送
  消息接收者用自己的私钥解密出会话密钥，用会话密钥解密消息
  
  摘要算法：
  会话密钥对称的明文和摘要一起加密
  验证信息的完整性散列函数、哈希函数
  把消息数据转化成一个特殊字符串，接收者比对接收到的明文计算出的消息摘要和接收到的信息摘要
  
  数字签名：
  公私钥非对称身份验证
  摘要私钥加密成数字签名，公钥解开后再比对原文验证
  
  CA验证机构:
  1. 服务器有一套公钥和私钥，把公钥发给CA机构
  2. CA机构用机构私钥给服务器公钥署数字签名，颁发公钥证书(服务器公钥+数字签名)
  3. 浏览器中预设了机构公钥，客户端拿到服务器的公钥证书，可以自行解密数字签名，得到服务器公钥，跟公钥证书比对
  4. 客户端用服务器公钥加密报文，服务器用服务器私钥解密
UDP
TCP

Git

echarts可视化

最重要的就是id问题，不能重复

provide inject导入echarts对象
获取后端数据
onMounted里初始化渲染，因为要获取dom元素
看文档setOption，notMerge: true
自适应大小window.onresize = function () {myChart1.resize();}
放echarts的容器要预先设置大小才会渲染

express

https://developer.mozilla.org/zh-CN/docs/Learn/Server-side/Express_Nodejs/Introduction

路由部分
由express.Router()创建监听特定地址和方法的路由，然后将路由暴露，然后在主应用app里使用路由模块，然后外部就可以访问路由了

跨域部分
在主应用里设置使用给每一个返回的响应配置响应头header”Access-Control-Allow-Origin”

数据库部分
导入mongoose模块进行连接，这里是创建一个用存储查询字段的schema接口来创建负责于数据库交互的model