【中大厂前端面试百问】这不迷死你？

写在前面

最近收到很多同行的抱怨，前端开发高级还行，对初中级最难过的不是面试过不去，而是“已读不回”，来自某聘的梗，确实是，初中级因为坑位较少，很多HR在专心招聘的时候都未必能让所有投简历都去面试，更别说还有刷业绩现象，还是那几个点：

1.学历要注意，在外的个人名片，企业对比哈工和清华这即使不看面试也对清华有好感了吧！
2.项目经历，强调很多遍了，简介的形容你在项目中的作用，负责，以及运行，突出重点，
3.简历的简洁，要学会用最短的语句体现最大的价值，没用的写上写上也用处不大，
4.工作经历，跳的多自己掂量，跳的少，空窗期少，包装，这些要注意
5.面试经过，八股面试题，刷就完了，尽量做到说话不急也不慢，吐字清晰，磕磕绊绊毫无条理，再来个不确定，你是在被面试，不是提问面试官的
6.衣着，不要紧张，如果紧张可以多约几个，把重要的排在最后，

大多情况下，简历方面的问题居多，对标大厂的话项目经历，工作经验、还有学历要求居多，对简历和面试题可以【点击此处】，解决还是很简单的！

目录

第 1 题：写 React / Vue 项目时为什么要在列表组件中写 key， 其作用是什么？
key 是给每一个 vnode 的唯一 id,可以依靠 key,更准确,更快的拿到 oldVnode 中对 应的 vnode 节点

第 2 题：['1', '2', '3'].map(parseInt) what & why ?
第一眼看到这个题目的时候，脑海跳出的答案是 [1, 2, 3]，但是真正的答案是[1, NaN, NaN]。
首先让我们回顾一下，map 函数的第一个参数 callback。这个 callback 一共可以接收三个参数，其中第一个参数代表当前被处理的元素，而第二个参数代表该元素的索引。
arr.map(callback: (value: T, index: number, array: T[]) => U, thisArg?: any);
而 parseInt 则是用来解析字符串的，使字符串成为指定基数的整数。接收两个参数，第一个表示被处理的值（字符串），第二个表示为解析时的基数。
parseInt(string, radix)
了解这两个函数后，我们可以模拟一下运行情况
parseInt('1', 0) //radix 为 0 时，且 string 参数不以“0x”和“0”开头时， 按照 10 为基数处理。这个时候返回 1parseInt('2', 1) //基数为 1（1 进制）表示的数中，最大值小于 2，所以无法解析，返回 NaNparseInt('3', 2) //基数为 2（2 进制）表示的数中，最大值小于 3，所以无法解析，返回 NaN

第 3 题：什么是防抖和节流？有什么区别？如何实现？
防抖——触发高频事件后 n 秒后函数只会执行一次，如果 n 秒内高频事件再 次被触发，则重新计算时间；
function debounce(fn) {
let timeout = null
// 创建一个标记用来存放定时器的返回值
return function() {
clearTimeout(timeout)
// 每当用户输入的时候把前一个 setTimeout clear 掉
timeout = setTimeout(() => {
// 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
fn.apply(this, arguments)
}, 500)
}}function sayHi() {
console.log('防抖成功')}var inp =
document.getElementById('inp')inp.addEventListener('input',
debounce(sayHi)) // 防抖
节流——高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率。
function throttle(fn) {
let canRun = true // 通过闭包保存一个标记
return function() {
if (!canRun) return
// 在函数开头判断标记是否为 true，不为 true 则 return
canRun = false // 立即设置为 false
setTimeout(() => {
// 将外部传入的函数的执行放在 setTimeout 中
fn.apply(this, arguments)
// 最后在 setTimeout 执行完毕后再把标记设置为 true(关键) 表示可以执行下一次循环了。当定时器没有执行的时候标记永远是 false，在开头被 return 掉
canRun = true
}, 500)
}}function sayHi(e) {
console.log(e.target.innerWidth,
e.target.innerHeight)}window.addEventListener('resize',
throttle(sayHi))

第 4 题：介绍下 Set、Map、WeakSet 和 WeakMap 的区别？
Set——对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用 WeakSet——成员都是对象；成员都是弱引用，可以被垃圾回收机制回收，可以用来保存 DOM 节点，不容易造成内存泄漏；
Map——本质上是键值对的集合，类似集合；可以遍历，方法很多，可以跟各种数据格式转换。
WeakMap——只接受对象最为键名（null 除外），不接受其他类型的值作为键名；键名是弱引用，键值可以是任意的，键名所指向的对象可以被垃圾回收，此时键名是无效的；不能遍历，方法有 get、set、has、delete。

第 7 题：ES5/ES6 的继承除了写法以外还有什么区别？
let
-1)}let isTypeOf
map[type]
}
=1.
ES5 的继承实质上是先创建子类的实例对象，然后再将父类的方法添加到 this 上（Parent.apply(this)）.
2. ES6 的继承机制完全不同，实质上是先创建父类的实例对象 this（所以必须先调用父类的 super()方法），然后再用子类的构造函数修改 this。
3. ES5 的继承时通过原型或构造函数机制来实现。
4. ES6 通过 class 关键字定义类，里面有构造方法，类之间通过 extends 关键字实现继承。
5. 子类必须在 constructor 方法中调用 super 方法，否则新建实例报错。因为子类没有自己的 this 对象，而是继承了父类的 this 对象，然后对其进行加工。
如果不调用 super 方法，子类得不到 this 对象。
6. 注意 super 关键字指代父类的实例，即父类的 this 对象。
7. 注意：在子类构造函数中，调用 super 后，才可使用 this 关键字，否则报错。

第 11 题：算法手写题
已知如下数组，编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组
var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];
答：使用 Set 方法去重，flat(Infinity)扁平化
Array.from(new Set(arr.flat(Infinity))).sort((a,b)=>{ return a-b})//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]

第 12 题：JS 异步解决方案的发展历程以及优缺点。
1、回调函数（callback）
优点：解决了同步的问题（只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。）
缺点：回调地狱，不能用 try catch 捕获错误，不能 return
2、Promise
优点：解决了回调地狱的问题
缺点：无法取消 Promise ，错误需要通过回调函数来捕获
3、Generator
特点：可以控制函数的执行，可以配合 co 函数库使用
4、Async/await
优点：代码清晰，不用像 Promise 写一大堆 then 链，处理了回调地狱的问题
缺点：await 将异步代码改造成同步代码，如果多个异步操作没有依赖性而使用 await 会导致性能上的降低。

第 13 题：Promise 构造函数是同步执行还是异步执行，那么 then 方法呢？
const promise = new Promise((resolve, reject) => {
console.log(1)
resolve()
console.log(2)})promise.then(() => {
console.log(3)})console.log(4)
执行结果是：1243，promise 构造函数是同步执行的，then 方法是异步执行的

第 15 题：简单讲解一下 http2 的多路复用
HTTP2 采用二进制格式传输，取代了 HTTP1.x 的文本格式，二进制格式解析更高效。
多路复用代替了 HTTP1.x 的序列和阻塞机制，所有的相同域名请求都通过同一个 TCP 连接并发完成。
在 HTTP1.x 中，并发多个请求需要多个 TCP 连接，浏览器为了控制资源会有 6-8个 TCP 连接都限制。HTTP2 中
同域名下所有通信都在单个连接上完成，消除了因多个 TCP 连接而带来的延时和内存消耗。
单个连接上可以并行交错的请求和响应，之间互不干扰

第 17 题：A、B 机器正常连接后，B 机器突然重启，问 A 此时处于 TCP 什么状态
如果 A 与 B 建立了正常连接后，从未相互发过数据，这个时候 B 突然机器重启，问 A 此时处于 TCP 什么状态？如何消除服务器程序中的这个状态？（超纲题，了解即可）
因为 B 会在重启之后进入 tcp 状态机的 listen 状态，只要当 a 重新发送一个数据包（无论是 syn 包或者是应用数据），b 端应该会主动发送一个带 rst 位的重置包来进行连接重置，所以 a 应该在 syn_sent 状态

第 18 题：React 中 setState 什么时候是同步的，什么时候是异步的？
1、由 React 控制的事件处理程序，以及生命周期函数调用 setState 不会同步更新 state 。
2、React 控制之外的事件中调用 setState 是同步更新的。比如原生 js 绑定的事件，setTimeout/setInterval 等。

第 48 题：call 和 apply 的区别是什么，哪个性能更好一些
1. Function.prototype.apply 和 Function.prototype.call 的作用是一样的，区 别在于传入参数的不同；
2. 第一个参数都是，指定函数体内 this 的指向；
3. 第二个参数开始不同，apply 是传入带下标的集合，数组或者类数组， apply 把它传给函数作为参数，call 从第二个开始传入的参数是不固定的，都会传给函数作为参数。
4. call 比 apply 的性能要好，平常可以多用 call, call 传入参数的格式正是内部所需要的格式

第 49 题：为什么通常在发送数据埋点请求的时候使用的是 1x1 像素的透明 gif 图片？
1. 没有跨域问题，一般这种上报数据，代码要写通用的；（排除 ajax）
2. 不会阻塞页面加载，影响用户的体验，只要 new Image 对象就好了；（排 除 JS/CSS 文件资源方式上报）
3. 在所有图片中，体积最小；（比较 PNG/JPG）

第 51 题：Vue 的响应式原理中 Object.defineProperty 有什么缺陷？
为什么在 Vue3.0 采用了 Proxy，抛弃了 Object.defineProperty？
 Object.defineProperty 无法监控到数组下标的变化，导致通过数组下标添加元素，不能实时响应；
 Object.defineProperty 只能劫持对象的属性，从而需要对每个对象，每个属性进行遍历，如果，属性值是对象，还需要深度遍历。Proxy 可以劫持整个对象，并返回一个新的对象。
 Proxy 不仅可以代理对象，还可以代理数组。还可以代理动态增加的属性。

第 53 题：输出以下代码的执行结果并解释为什么
var a = {n: 1};
var b = a;a.x = a = {n: 2};
console.log(a.x)
console.log(b.x)
结果:undefined{n:2}
首先，a 和 b 同时引用了{n:2}对象，接着执行到 a.x = a = {n：2}语句，尽管赋值 是从右到左的没错，但是.的优先级比=要高，所以这里首先执行 a.x，相当于为 a（或者 b）所指向的{n:1}对象新增了一个属性 x，即此时对象将变为 {n:1;x:undefined}。之后按正常情况，从右到左进行赋值，此时执行 a ={n:2}的时 候，a 的引用改变，指向了新对象{n：2},而 b 依然指向的是旧对象。之后执行 a.x = {n：2}的时候，并不会重新解析一遍 a，而是沿用最初解析 a.x 时候的 a， 也即旧对象，故此时旧对象的 x 的值为{n：2}，旧对象为 {n:1;x:{n：2}}，它被 b引用着。后面输出 a.x 的时候，又要解析 a 了，此时的 a 是指向新对象的 a，而这个新对象是没有 x 属性的，故访问时输出 undefined；而访问 b.x 的时候，将输出旧对象的 x 的值，即{n:2}。

第 73 题： 介绍下 BFC、IFC、GFC 和 FFC
BFC（Block formatting contexts）：
块级格式上下文页面上的一个隔离的渲染区域，那么他是如何产生的呢？可以 触发 BFC 的元素有 float、position、overflow、display：table-cell/ inline-block/table-caption ；BFC 有什么作用呢？比如说实现多栏布局’
IFC（Inline formatting contexts）：
内联格式上下文 IFC 的 line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的 padding/margin 影响)IFC 中的 line box 一般左右都贴紧整个 IFC，但是会因为 float 元素而扰乱。
float 元素会位于 IFC 与与 line box之间，使得 line box 宽度缩短。 同个 ifc 下的多个 line box 高度会不同 IFC 中时不可能有块级元素的，当插入块级元素时（如 p 中插入 div）会产生两个匿名块 与 div 分隔开，即产生两个 IFC，每个 IFC 对外表现为块级元素，与 div 垂直排列。那么 IFC 一般有什么用呢？水平居中：当一个块要在环境中水平居中时， 设置其为 inline-block 则会在外层产生 IFC，通过 text-align 则可以使其水平居中。
垂直居中：创建一个 IFC，用其中一个元素撑开父元素的高度，然后设置其 vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。
GFC（GrideLayout formatting contexts）：
网格布局格式化上下文当为一个元素设置 display 值为 grid 的时候，此元素将会 获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义 网格定义行（grid definition rows）和网格定义列（grid definition columns）属性 各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）
为每一个网格项目（grid item）定义位置和空间。那么 GFC 有什么用呢，和 table 又有什么区别呢？首先同样是一个二维的表格，但 GridLayout 会有更加丰富的 属性来控制行列，控制对齐以及更为精细的渲染语义和控制。
FFC（Flex formatting contexts）:
自适应格式上下文 display 值为 flex 或者 inline-flex 的元素将会生成自适应容器 （flex container），可惜这个牛逼的属性只有谷歌和火狐支持，不过在移动端 也足够了，至少 safari 和 chrome 还是 OK 的，毕竟这俩在移动端才是王道。Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素， 而设置为 inline-flex 的容器则渲染为一个行内元素。伸缩容器中的每一个子元 素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox 定义了伸缩容器内伸缩项目该如 何布局。

第 83 题：var、let 和 const 区别的实现原理是什么
三者的区别：
 var 和 let 用以声明变量，const 用于声明只读的常量；
 var 和 let 用以声明变量，const 用于声明只读的常量；
 var 声明的变量，不存在块级作用域，在全局范围内都有效，let 和 const 声明的，只在它所在的代码块内有效；
 let 和 const 不存在像 var 那样的 “变量提升” 现象，所以 var 定义变量可以先使用，后声明，而 let 和 const 只可先声明，后使用；
 let 声明的变量存在暂时性死区，即只要块级作用域中存在 let，那么它所声明的变量就绑定了这个区域，不再受外部的影响。
 let 不允许在相同作用域内，重复声明同一个变量；
 const 在声明时必须初始化赋值，一旦声明，其声明的值就不允许改变， 更不允许重复声明；如 const 声明了一个复合类型的常量，其存储的是一个引用地址，不允许改变的是这个地址，而对象本身是可变的。
变量与内存之间的关系，主要由三个部分组成：
 变量名
 内存地址
 内存空间JS 引擎在读取变量时，先找到变量绑定的内存地址，然后找到地址所指向的内 存空间，最后读取其中的内容。当变量改变时，JS 引擎不会用新值覆盖之前旧 值的内存空间（虽然从写代码的角度来看，确实像是被覆盖掉了），而是重新分配一个新的内存空间来存储新值，并将新的内存地址与变量进行绑定，JS 引擎会在合适的时机进行 GC，回收旧的内存空间。
const 定义变量（常量）后，变量名与内存地址之间建立了一种不可变的绑定关系，阻隔变量地址被改变，当 const 定义的变量进行重新赋值时，根据前面的论述，JS 引擎会尝试重新分配新的内存空间，所以会被拒绝，便会抛出异常。

第 96 题：介绍下前端加密的常见场景和方法
首先，加密的目的，简而言之就是将明文转换为密文、甚至转换为其他的东西， 用来隐藏明文内容本身，防止其他人直接获取到敏感明文信息、或者提高其他人获取到明文信息的难度。通常我们提到加密会想到密码加密、HTTPS 等关键词，这里从场景和方法分别提一些我的个人见解。
场景-密码传输
前端密码传输过程中如果不加密，在日志中就可以拿到用户的明文密码，对用户安全不太负责。这种加密其实相对比较简单，可以使用 PlanA-前端加密、后端解密后计算密码字符串的 MD5/MD6 存入数据库；也可以 PlanB-直接前端使用一种稳定算法加密成唯一值、后端直接将加密结果进行 MD5/MD6，全程密码明文不出现在程序中。
PlanA 使用 Base64 / Unicode+1 等方式加密成非明文，后端解开之后再存它的MD5/MD6 。
PlanB 直接使用 MD5/MD6 之类的方式取 Hash ，让后端存 Hash 的 Hash 。
场景-数据包加密
应该大家有遇到过：打开一个正经网站，网站底下蹦出个不正经广告——比如X 通的流量浮层，X 信的插入式广告……（我没有针对谁）但是这几年，我们会发现这种广告逐渐变少了，其原因就是大家都开始采用 HTTPS 了。被人插入这种广告的方法其实很好理解：你的网页数据包被抓取->在数据包到达你手机之前被篡改->你得到了带网页广告的数据包->渲染到你手机屏幕。而 HTTPS 进行了包加密，就解决了这个问题。严格来说我认为从手段上来看，它不算是一种前端加密场景；但是从解决问题的角度来看，这确实是前端需要知道的事情。
Plan 全面采用 HTTPS
场景-展示成果加密
经常有人开发网页爬虫爬取大家辛辛苦苦一点一点发布的数据成果，有些会影响你的竞争力，有些会降低你的知名度，甚至有些出于恶意爬取你的公开数据后进行全量公开……比如有些食谱网站被爬掉所有食谱，站点被克隆；有些求职网站被爬掉所有职位，被拿去卖信息；甚至有些小说漫画网站赖以生存的内容也很容易被爬取。
Plan 将文本内容进行展示层加密，利用字体的引用特点，把拿给爬虫的数据变成“乱码”。举个栗子：正常来讲，当我们拥有一串数字“12345”并将其放在网站页面上的时候，其实网站页面上显示的并不是简单的数字，而是数字对应的字体的“12345”。这时我们打乱一下字体中图形和字码的对应关系，比如我们搞成这样：
图形：1 2 3 4 5 字码：2 3 1 5 4
这时，如果你想让用户看到“12345”，你在页面中渲染的数字就应该是“23154”。
这种手段也可以算作一种加密。

结束

前端面试合集~

八股文and大厂面经~

技术知识点源码笔记解析~

总是投简历找不到工作，或者已读不回居多要考虑简历的问题，也可以【点击此处】，优化及修改

很多时候来说前端开发确实对新人不友好，想要更进一步，薪资涨幅比较难，大多时候都没有机会，简历的修改与更新，项目的参与和制作，大环境就是这样，想要进步只能被迫向前，内卷每个行业都有，不是说只有前端卷的严重，所以安稳求富贵，多给自己的技术升升级才能在行业不断更迭下维持现状，寻找突破~