2020 前端面试 | 第二波面试题总结

前言

哈，看样子年后跳槽仍是你们比较关心的一件事情了，继第一波面试题汇总的反响和评论，观看和点赞的朋友们不少，我继续将后续面试的一些内容写出来，有不少面试题答案我本身写的比较含糊，可是在面试了条的过程当中是描述的表较多的。毕竟写文字要写出来太多了。我也只是写了一个大概，若是对答案不太满意的同窗能够自行查询标准答案哈。

2020 前端面试 | 第以波面试题总结

对了，有不少朋友说面试题过于简单都是基础之类的，实际上我自己也就是一个初中级的水平，因此面试的公司职位和对应的薪资匹配的就是这类的问题，算法题基本不多面试到。

薪资范围: 11k-14k

技术能力：自身能力强和扩展性高的能够本身跟HR多谈多要

面试建议：请勿态度高冷，聊天请等对方说完在回答，切勿抱怨和说上家公司的缺点

面试重点：JavaScript基础须要掌握得好，即便有些框架的原理和区别说不上来也没事

最后总结：本人还在面试中，若有贵公司在招聘初中级请联系我哈

面试题汇总

• 请描述一下 React 和 Vue的区别

这道题你若是熟知的话，从各个方面的不一样点，原理，为何这样实现来描述，起吗聊个半个小时。后续就不会问你太多问题了。

1.设计思想
    vue的官网中说它是一款渐进式框架，采用自底向上增量开发的设计。
    
    react主张函数式编程，因此推崇纯组件，数据不可变，单向数据流，固然须要双向的地方也能够手动实现，
    好比借助 onChange 和 setState 来实现一个双向的数据流。
2.编写语法
    Vue推荐的作法是webpack+vue-loader的单文件组件格式，vue保留了html、css、js分离的写法
    
    React的开发者可能知道，react是没有模板的，直接就是一个渲染函数，它中间返回的就是一个虚拟DOM树，
    React推荐的作法是  JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即'all in js'。
3.构建工具
    vue提供了CLI 脚手架，能够帮助你很是容易地构建项目。
    
    React 在这方面也提供了 create-react-app，可是如今还存在一些局限性，不能配置等等
4.数据绑定
    vue是实现了双向数据绑定的mvvm框架，当视图改变动新模型层，当模型层改变动新视图层。
    在vue中，使用了双向绑定技术，就是View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。
    (这里咱们能够继续深刻讲解一下双向数据绑定的原理，我以前的文章手写Vue源码可参考)
    
    react是单向数据流，react中属性是不容许更改的，状态是容许更改的。
    react中组件不容许经过this.state这种方式直接更改组件的状态。自身设置的状态，能够经过setState来进行更改。
    (注意：React中setState是异步的，致使获取dom可能拿的仍是以前的内容，
    因此咱们须要在setState第二个参数（回调函数）中获取更新后的新的内容。)
    
    【这里若是你了解深刻的话能够尝试描述一下React中setState的异步操做是怎么实现的，Vue中的更新是经过微任务等】
5.diff算法
    vue中diff算法实现流程：
        1.在内存中构建虚拟dom树
        2.将内存中虚拟dom树渲染成真实dom结构
        3.数据改变的时候，将以前的虚拟dom树结合新的数据生成新的虚拟dom树
        4.将这次生成好的虚拟dom树和上一次的虚拟dom树进行一次比对(diff算法进行比对)，来更新只须要被替换的DOM，
        而不是所有重绘。在Diff算法中，只平层的比较先后两棵DOM树的节点，没有进行深度的遍历。
        5.会将对比出来的差别进行从新渲染
        
    react中diff算法实现流程:
        DOM结构发生改变-----直接卸载并从新create
        DOM结构同样-----不会卸载,可是会update变化的内容
        全部同一层级的子节点.他们均可以经过key来区分-----同时遵循1.2两点
        (其实这个key的存在与否只会影响diff算法的复杂度,换言之,你不加key的状况下,
        diff算法就会以暴力的方式去根据一二的策略更新,可是你加了key,diff算法会引入一些另外的操做)
    
复制代码

React会逐个对节点进行更新，转换到目标节点。而最后插入新的节点，涉及到的DOM操做很是多。diff总共就是移动、删除、增长三个操做，而若是给每一个节点惟一的标识（key），那么React优先采用移动的方式，可以找到正确的位置去插入新的节点。

vue会跟踪每个组件的依赖关系，不须要从新渲染整个组件树。而对于React而言,每当应用的状态被改变时,所有组件都会从新渲染,因此react中会须要shouldComponentUpdate这个生命周期函数方法来进行控制。

以上内容来自于Vue 和 React 的优势分别是什么？，你们说的越多理解的越深越好。我只说了其中的三点。

• 前端经常使用的数据请求格式有哪些？都有些什么特色？

这个问题在http中已经回答了一部分了，这里就在单独详细的描述一下使用场景

Get/Post/Delete/Patch/Put常常用的这五种，其余的就不说了

一般：
    咱们使用Get请求来获取数据
    咱们使用Post请求来发送数据
    咱们使用Put请求来更新数据
    咱们使用Delete请求来删除数据
    咱们使用Patch请求用于对资源应用部分修改。
Get和Post的区别：
    1.Get 请求能缓存，Post 不能
    2.Post 相对 Get 安全一点点，由于Get 请求都包含在 URL 里，
    （固然你想写到 body 里也是能够的），且会被浏览器保存历史纪录。Post 不会，可是在抓包的状况下都是同样的。
    4.URL有长度限制，会影响 Get 请求，可是这个长度限制是浏览器规定的，不是 RFC 规定的
    5.Post 支持更多的编码类型且不对数据类型限制
复制代码

• 二次封装axios，描述一下你在项目中封装axios的思路和想法

关于axios等封装，我以前有一篇简易封装axios的文章，你们能够简单参考。

一般来讲，咱们在二次封装axios，通常会引入UI组件的一些Message和Loading组件用来作提示信息。
    1.经过获取存储在浏览器端，或者是vuex中的token信息，判断是否跳转登陆页面
    2.在获取到token的状况下设置自定义请求头部信息
    3.在响应事件中，根据返回的不一样状态码，根据业务需求，使用switch判断跳转页面仍是发出提示信息。
    4.封装请求和响应事件的返回结果，使用Promise封装。
    5.增长请求loading和提示信息。
简单版本大体如上，复杂版本须要根据业务进行对应的封装。
复制代码

• 请介绍一下this

其实大部分状况下能够用一句话来归纳，this老是指向调用该函数的对象。

对于常规的函数来讲，谁调用该函数，this就指向该调用者，全局环境下调用函数执行，this指向window

对于箭头函数的this总结以下：

箭头函数不绑定this，箭头函数中的this至关于普通变量。

箭头函数的this寻值行为与普通变量相同，在做用域中逐级寻找。

箭头函数的this没法经过bind，call，apply来直接修改（能够间接修改）。

改变做用域中this的指向能够改变箭头函数的this。

描述this问题，这里咱们能够扩展说明如何去改变this指向，经过bind，call，apply，而后说说他们的区别，懂得多的话，
能够说说他们的实现原理，或者手写bind，call，apply的实现。
复制代码

• 请介绍一下节流函数和防抖函数，简单实现节流函数和防抖函数

“节流”与“防抖”的本质： 这两个东西都以闭包的形式存在。

它们经过对事件对应的回调函数进行包裹、以自由变量的形式缓存时间信息，最后用 setTimeout 来控制事件的触发频率。

防抖函数：有这样一个按钮，他提供查看你将来老婆的样子，当你在必定时间内屡次点击查询时，他只会在你最后一次点击之后，
采起执行查询操做。

节流函数：当你在玩LOL的时候，你在放出大招后的一段时间内，再次点击放大招是不启做用的，由于有一个冷却时间。

代码我就不写在这里了，简易版本的很简单，完整版封装通常咱们都使用lodash封装好的。
复制代码

• 请介绍一下Eventloop(事件循环)

搞懂 Event Loop，是理解 Vue 对 DOM 操做优化的第一步。

Micro-Task 与 Macro-Task
事件循环中的异步队列有两种：macro（宏任务）队列和 micro（微任务）队列。

常见的 macro-task 好比： 
    setTimeout、setInterval、 setImmediate、script（总体代码）、 I/O 操做、UI 渲染等。
常见的 micro-task 好比: 
    process.nextTick、Promise、MutationObserver 等。
    
你们也知道了当咱们执行 JS 代码的时候其实就是往执行栈中放入函数，当遇到异步的代码时，会被挂起并在须要执行的时候，
加入到 Task（有多种 Task） 队列中。
一旦执行栈为空，Event Loop 就会从 Task 队列中拿出须要执行的代码并放入执行栈中执行，
因此本质上来讲 JS 中的异步仍是同步行为。

因此 Event Loop 执行顺序以下所示：

首先执行同步代码，这属于宏任务
当执行完全部同步代码后，执行栈为空，查询是否有异步代码须要执行
执行全部微任务
当执行完全部微任务后，若有必要会渲染页面
而后开始下一轮 Event Loop，执行宏任务中的异步代码，也就是 setTimeout 中的回调函数

这里不少人会有个误区，认为微任务快于宏任务，实际上是错误的。
由于宏任务中包括了 script ，浏览器会先执行一个宏任务，接下来有异步代码的话才会先执行微任务。
复制代码

• 请用一个例子来形象的描述原型链

哈，这个问题我在沸点有发过一个形象的比喻，给面试官逗笑了。

每一个门派都有一个祖师爷。

学徒在山上学艺，学成下山后谨记师门教导，施展一身武艺。

恰逢一日对敌，面对敌人的怪异武功，师门好像不曾教过破解之法，便高喊一声祖师爷救我，

刹那间一道白光降于头顶，祖师爷灵魂附体，一套精绝凌厉的拳法杀得敌人措手不及。

但敌人也极是难缠，恐怕非要那门传说中从天而降的掌法才能制敌。

你心中暗自着急，催促着祖师爷赶快发招，这时只听身内传来了祖师的声音：

“MD这破掌法当年偷懒没学，我去把我师祖也叫来问问...”

每一个门派(FunctionX)都有一个祖师爷(prototype)。

学徒(object)在山上学艺(= new FunctionX)，学成下山后谨记师门教导，

施展一身武艺(http://object.xxxobject.xxx)。

恰逢一日对敌，面对敌人的怪异武功，师门好像不曾教过破解之法(object对象没有yyy方法)，

便高喊一声祖师爷救我，刹那间一道白光降于头顶，祖师爷(__proto__)灵魂附体，

一套精绝凌厉的拳法杀得敌人措手不及(继续寻找原型中是否有yyy方法)。

但敌人也极是难缠，恐怕非要那门传说中从天而降的掌法才能制敌。你心中暗自着急，

催促着祖师爷赶快发招，这时只听身内传来了祖师的声音：

“MD这破掌法当年偷懒没学，我去把我师祖也叫来问问...”（若是原型中没有yyy方法，则继续查找原型的原型，是谓原型链）
复制代码

• 请介绍一下回流（Reflow）与重绘（Repaint）

回流：当咱们对 DOM 的修改引起了 DOM 几何尺寸的变化（好比修改元素的宽、高或隐藏元素等）时，
浏览器须要从新计算元素的几何属性（其余元素的几何属性和位置也会所以受到影响），
而后再将计算的结果绘制出来。这个过程就是回流（也叫重排）。

重绘：当咱们对 DOM 的修改致使了样式的变化、却并未影响其几何属性（好比修改了颜色或背景色）时，
浏览器不需从新计算元素的几何属性、直接为该元素绘制新的样式（跳过了上图所示的回流环节）。这个过程叫作重绘。

由此咱们能够看出，重绘不必定致使回流，回流必定会致使重绘。
硬要比较的话，回流比重绘作的事情更多，带来的开销也更大。但这两个说到底都是吃性能的，
因此都不是什么善茬。咱们在开发中，要从代码层面出发，尽量把回流和重绘的次数最小化。
复制代码

尾声

至此2020年我所面试的公司大部分面试题都包含了以上内容，至于一些代码图解之类的问题我就没有写上去，太简单了，相信你们都会。后续一些细枝末节的地方我会补充。

最后但愿我所总结的面试内容可以对你在2020年的面试中有所帮助。

❤️ 看完帮个忙

若是你以为这篇内容对你挺有启发，我想邀请你帮我个小忙：

1.点赞，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓 -_-）

2.关注公众号「番茄学前端」，我会定时更新和发布前端相关信息和项目案例经验供你参考。