前端开发面试快速复盘，不标准的面试经验分享

壹 ❀ 引

离职前惟惟诺诺惧怕没面试机会，担忧找不到工做，只是没想到离职后，简历没投递，被各猎头HR电话给打爆了（外包居多）。由于目前还未系统复习，也以为本身缺乏面试经验，抱着白给的经验不要白不要的态度，上周五，本周一面了2家，大体复盘面试问到的问题，注意，本篇文章不是专业的面试题答案分享，因此一些问题仍是须要你们自行考证，那么本文开始。

贰 ❀ 平安某外包

前面说了，大量面试中基本属平安，华为，oppo，vivo这四家外包居多，出于面试积累，无论是否是外包面一面也没有坏处，因此分别预定了华为和平安的两个外包。

在面平安以前有个小插曲，我以前其实有跟他们HR沟通，若是面试请提早通知我，结果八点多我还在外面跑步，防不胜防华为的电话过来了，一身汗思绪也没办法沉下来？简单聊了两句，我获得的反馈是对方是但愿招过去的人能马上上手项目，对于我这种目前还在学习vue的人明显不适合了，因此我直接放弃了，因此这个面试也不具有任何参考价值。

等到晚上十点，接到了平安外包的一面电话（二面由平安把关），虽然没怎么复习，内心也以为没底，仍是说那就简单聊聊吧。

因为我直说了vue没有实战项目经验，因此面试官就以JavaScript基础相关问题为主，大体对话以下：

面：先作个自我介绍吧？

关于自我介绍，我其实预先打了草稿，主要是描述了三年里，我在两家公司扮演的角色，使用了哪些技术栈，作出了怎样的贡献，由于作简历都有工做经历这个模块，你们能够将经历作个汇总，这样方便面试官对于自身状况有个初步了解。个人大体模板就是，你好，我叫XX，目前已有三年开发经验，个人工做经历大体可分为两段。前一年我在XX公司负责XX项目，使用的技术栈包括XXX，在项目开发中我负责了XX......你们能够作个简单参考。

面：由于你对于vue暂无开发经验，我先问你一些JavaScript知识，能聊聊浏览器缓存吗？有何区别？

问的就是localStorage和sessionStorage的区别，我简单从使用和区别方面说了下，网站关于这个知识点介绍就不少了，这里不作赘述。

面：能说说经常使用的数组API吗？

我基本把push、pop、unshift、shift、splice、slice、map、reduce、concat、filter、some、forEach、find、findIndex等API的基本用法都介绍了一遍，返回什么，是否修改原数组。

面：ES6新增的数组API有了解吗？

这里我首先想到的就是经常使用的keys方法，用于遍历对象可枚举属性；create用于建立指定原型的新对象；getPrototypeOf用于获取对象原型；definedProperty用于自定义对象是否可枚举，是否可写等属性。assign用于复制多个源对象属性到目标对象等；其它一时半会也没想起来，你们执行查阅文档。

面：能说下你理解的做用域和做用域链吗？

做用域是变量和函数的做用域范围与生命周期，当在当前做用域查找某变量时，若是没找到就会去上层做用域找，此行为能够一直找到全局对象window（非严格模式），而这个查找过程也就是所谓的做用域链。

说完后，我说要不把原型和原型链也一块儿介绍了吧，面试官笑起来了，说能够啊。

面：介绍下原型和原型链？

这里我从万物接对象，引出了包装对象，说到函数是一等公民，说到做用域链的顶端null，而后反向倒推，介绍了比较特殊的构造器Function，由于这个家伙的原型是一个匿名函数而不是一个普通对象。关于原型能够阅读博主这两篇文章，能把第二篇文章的图理解透，基本没问题。

JS 疫情宅在家，学习不能停，七千字长文助你完全弄懂原型与原型链

JS 到底是先有鸡仍是有蛋，Object与Function究竟谁出现的更早

面：能说说你对于闭包的理解吗？

闭包说到底，就是能使用外层函数做用域自由变量的函数，注意，它其实就是一个自带了执行环境的函数，因此即使外层函数销毁，因为闭包的依赖，自由变量也一直没法被释放，这也容易致使内存泄漏，因此使用闭包必定在不须要的时候手动释放自由变量，紧接着我说了下闭包的用途，好比节流防抖，模拟私有属性，工厂函数等等，能够阅读博主这篇文章：

一篇文章看懂JS闭包，都要2020年了，你怎么能还不懂闭包？

面：能说说深浅拷贝的区别与实现吗？

深拷贝实际上是针对引用对象类型来讲的，要介绍深浅拷贝，得站在基本类型数据与引用类型数据存储区别上去理解。事实上基本类型，好比数字，字符串，JavaScript都没提供能够修改它们的方法，正由于不可变性，基本类型数据存放在栈中。

而对象就不同了，好比数组能够增长元素，对象也能够添加属性，删除属性。对象大小不肯定，因此咱们声明一个对象，对象的key由于是基本类型（不考虑map结构的状况），因此key会存在栈中，而值是对象，因此放在堆中。这就致使了一个问题，当咱们拷贝一个对象时，其实拷贝的是指向堆中value的指针，这也致使其中一方修改了对象值，会影响另外一个对象。

而对于对象的深拷贝实现，乞丐版，JSON的两个方法，缺点是不能拷贝函数，undefined等。好一点能够递归层层遍历拷贝，或者有其它三方拷贝。

【JS】深拷贝与浅拷贝的区别，实现深拷贝的几种方法

面：ES6了解吗？说说let const var区别？

这个就简单了，var有遍历提高，let和const不能反复声明，存在暂时性死域，块级做用域等等。惟一须要强调的一点是，当const声明一个变量的值是对象时，这个对象实际上是可修改的，不能改的是对象的引用地址。这里你们自行组织语言。

es6入门1-- let与var的区别详解

面：说说你对箭头函数的理解

箭头函数通常用于回调，须要注意的就是箭头函数没有本身的this，它的this更像是一个变量，由外层做用域的this来决定，别人指向谁它就指向谁。咱们不能直接修改箭头函数this指向，但能够经过修改外层this达到间接修改this的目的。也正是由于这个特性，箭头函数不能用于作构造函数。

面：你前面说目前正在学习vue，那我问点简单的，说说经常使用的指令

绑定属性v-bind；遍历v-for；控制显示隐藏v-if与v-show，顺带说了下二者的区别；绑定事件v-on；双向绑定v-model等等。

面：你刚说到v-if与v-for，那你知道二者的优先级吗？

v-for优先级更高，官方文档特别说明不要将这二者一块儿使用。

一面大体聊到这里了，总结反馈来讲，以为我JavaScript基础很是扎实。虽然vue不熟练，可是仍是想给我二面机会，因此就等二面了。结果，二面在周六！没听错，周六！因此我把二面推掉了...

叁 ❀ 某上市公司

到了本周一，我面了第二家公司，没有远程面试，而是直接带简历公司本部面试。面试过程就是直接拿着个人简历聊，随机提问，我来回答，前先后后聊了一个多小时，大体总结了下，问了二十多个问题，比较考验人的随机应变吧，且听我慢慢道来。

面：先作个自我介绍吧。

参照上方面试自我介绍思路。

面：我看你作的项目还挺多的，你以为哪一个项目最有亮点？你作了什么？

这里我就挑了上家公司一个由我全权负责的项目，主要说了项目重构作的一些优化，这个因人而异吧，你们根据本身项目来，主要突出本身作的贡献。

面：基本数据类型有哪些？

Undefined，Null，String，Number，Boolean，Symbol。说完以后我补充了一下引用数据类型，以及二者存放的位置区别，参照第一家面试回答。

面：既然你说到了引用对象，说下深拷贝，怎么实现深拷贝？

参照第一家面试回答

面：我如今给你一个数组，数组元素都是基本类型，不用JSON，不许用for遍历，你怎么快速拷贝一份数组？

用ES6的拓展运算符，数组concat都是能够的，由于你说了元素都是基本类型，那就能够用这两种作到。

面：能说说原型和原型链吗？

参照第一家面试回答，只不过这里我找面试官借了笔，直接在简历背面把原型链的图给他画出来了，看神情他比较满意....

面：能聊聊this指向吗？

这里我从默认绑定，隐式this绑定，显示this绑定（顺带介绍了call,apply与bind的区别），箭头函数this绑定以及new 构造函数this绑定五个方面介绍了。具体能够看博主这篇文章：

js 五种绑定完全弄懂this，默认绑定、隐式绑定、显式绑定、new绑定、箭头函数绑定详解

面：那我如今调用一个函数，同时用了call与对象调用，this指向谁？

obj.fn.call(ob2);

五种绑定优先级为，显式绑定 > 隐式绑定 > 默认绑定，new绑定 > 隐式绑定 > 默认绑定。由于咱们不可能new一个函数的同时还用显示绑定，因此显示绑定与new没有可比性。

面：数组经常使用API有哪些？

参照第一家公司的回答。

面：你刚说到了forEach，那你能说说用它的时候有哪些你以为要注意的吗？

这里我直说了forEach的item其实具体代替了某个值，它不是一个变量，因此咱们有时候惯性思惟，会写出以下代码，这样实际上是无效的。

let arr = [1,1,1];
// 将全部元素都改成2
arr.forEach(item=> { item = 2 });

//正确来写其实仍是得经过数组访问
arr.forEach((item,index,arr)=> { arr[index] = 2});

另外说了forEach不支持return，也就是没法中途跳出循环。

面：那我如今使用forEach，想中途跳出循环怎么作？

我说可使用try...catch，问我具体怎么作，可是细节我忘记了...能够阅读这篇文章：

js forEach跳出循环

面：你刚说到了sort，那我给你一个常数数组，怎么倒序排列？

我说用b-a不就行了，具体以下：

let arr = [2, 1, 4, 9];
arr.sort((a, b) => b - a);
console.log(arr);// [9,4,2,1]

面：你刚说到了reduce，我如今给你一个数组，你用reduce求和，让我在纸上写出来。

我直接写了以下代码：

let arr = [2, 1, 4, 9];
arr.reduce((acc, current) => acc + current);//16

面：我如今给你一个数组，要求返回全部为真的元素。

这里我理解的是隐式转换，在if判断中，空数组，空对象都会被转为真，因此个人想法是这样：

let arr = [0, 1, true, {}, false, [], undefined];
arr.filter((item) => item); //[1,true,{},[]]

面：这段代码输出什么？

[1.1, 2.2, '3'].map(parseInt);

输出1，NaN，NaN，具体缘由能够看博主这篇博客的第一题：

JS 20道概念虽老但也略有收获的JS基础题，快速作题，高效复习，不妨试试？

面：说说http1 1.1 2与https的区别？

因为我还没复习到这块，我就直说了，硬伤，没答上来。

面：强缓存和协商性缓存能说下吗？

这里也是没复习，只是简单介绍了二者的区别，具体能够查看博主这篇文章：

http缓存详解，http缓存推荐方案

面：http请求头包含哪些东西？

我大体说了可接受响应内容类型Accept，接受的响应语言Accept-Language，资源认证Authorization，是否缓存Cache-control。没怎么复习，你们自行百度。

面：能说下ajax吗？

由于过久没用原生ajax了，我印象也有点模糊，大体说了建立xml对象，而后判断state状态，以后就是对应请求接口，作后续处理，这个你们本身查查资料。

面：flex了解吗？说说经常使用属性？

这里我分别对于容器属性，项目属性，几个经常使用的说了说，具体可阅读这篇文章：

一篇文章弄懂flex布局

面：我看你项目有组件封装经验？说说一个组件需求给你，你是怎么从零到有完成它的？

这里我就说了第一步大体确认需求，画流程图，以流程图再次核实需求，如有与外界存在数据交互，确认数据结构以及对外API，这些基本工做作好，流程图没问题那就是写代码的事情了。

面：那你挑一个你以为满意的组件，讲讲你怎么作的。

这里挑了以前作的地址管理组件，包括配置，支持两种布局模式，以及作了本地数据更新处理，地址选择判断，参考了京东淘宝的模式，同时用笔画了一个简易的流程图。

面：我看你项目用到了BEM规范，说说BEM表明什么意思，怎么链接？

B表明block，也就是块，E表明元素，M表明赞成元素的不一样状态。链接是这样block-name__element-name--modifier-name。要用这个也是为了复用组件，确保组件样式不会与外界样式冲突，因此对于组件样式采用了BEM规范。

面：发布工具备了解吗？

因为我上家公司用的百度的fis3，因此我简单说了下fis3，作了less编译，css浏览器兼容前缀添加，文件合并等相关功能。

面：看你有写博客，访问量多少，产出呢？最近一篇博客是何时写的？

访问不知道，没开这个功能，粉丝目前两百多个，产出一个月最少八篇，精品文章一篇可能须要一周闲余时间。最近一篇博客就是昨天写的。

你刚说了你在刷leetcode，最近作的一道题是什么，又把笔给我了，说说你的思路。

这个就如实回答了，由于也是刚作不久，就说了下实现思路。

后端语言有了解吗？

目前没有，将来会学习node。

那么到这里，整个面试基本就结束， 问我有啥问题。我就问了下公司的技术选择，将来可能涉及的项目类型，是否有移动端，由于我很是渴求快速向vue，react转型，而后就是聊了下新职待遇，福利啥的。我最后问了下对于个人面试评价，面试官笑了笑，说等通知。我也笑了，说那确定挂了，他说那倒未必。而后送我离开公司。

面完后我内心是给本身打了70分，本人口头表达能力还能够，可能问题也不难，整体回答还行，结果刚上地铁不就，HR电话就过来了，说技术面经过了，明天综合面试，聊聊职业规划啥的，基本就宣布能够入职了

肆 ❀ 总

怎么说呢，这两场面试下来，大体能够肯定的是本身JavaScript基础还能够，我以前一直没自信，感受这也学的不扎实，那也学的很差，这里得顾，那里也得顾，急起来了致使我vue学习很是缓慢。通过这两轮面试，至少js部门我能够先放放，能够专心学习http与vue了，固然算法部分还得增强，否则问到算法稍微难一点我估计也悬。

因为以前的面试都是猎头找的我，比较被动，后面仍是主动挑一些本身感兴趣的公司投递看看，我也跟负责腾讯网易的HR交流，今年大厂简历卡的比较死，难度很高，深感本身没戏，希望后面能找到一家还算心仪的公司，两年后必定挑战大厂，那么本文就到这里了。