前端开发面试快速复盘，不标准的面试经验分享
壹 ❀ 引
离职前唯唯诺诺害怕没面试机会，担心找不到工作，只是没想到离职后，简历没投递，被各猎头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的基本用法都介绍了一遍，返回什么，是否修改原数组。
面：对象API有了解吗？
这里我首先想到的就是常用的keys方法，用于遍历对象可枚举属性；create用于创建指定原型的新对象；getPrototypeOf用于获取对象原型；definedProperty用于自定义对象是否可枚举，是否可写等属性。assign用于复制多个源对象属性到目标对象等；其它一时半会也没想起来，大家执行查阅文档。
面：能说下你理解的作用域和作用域链吗？
作用域是变量和函数的作用域范围与生命周期，当在当前作用域查找某变量时，如果没找到就会去上层作用域找，此行为可以一直找到全局对象window（非严格模式），而这个查找过程也就是所谓的作用域链。
说完后，我说要不把原型和原型链也一起介绍了吧，面试官笑起来了，说可以啊。
面：介绍下原型和原型链？
这里我从万物接对象，引出了包装对象，说到函数是一等公民，说到原型链的顶端null，然后反向倒推，介绍了比较特殊的构造器Function，因为这个家伙的原型是一个匿名函数而不是一个普通对象。关于原型可以阅读博主这两篇文章，能把第二篇文章的图理解透，基本没问题。
JS 疫情宅在家，学习不能停，七千字长文助你彻底弄懂原型与原型链
JS 究竟是先有鸡还是有蛋，Object与Function究竟谁出现的更早
面：能说说你对于闭包的理解吗？
闭包说到底，就是能使用外层函数作用域自由变量的函数，注意，它其实就是一个自带了执行环境的函数，所以即便外层函数销毁，由于闭包的依赖，自由变量也一直无法被释放，这也容易导致内存泄漏，所以使用闭包一定在不需要的时候手动释放自由变量，紧接着我说了下闭包的用途，比如节流防抖，模拟私有属性，工厂函数等等，可以阅读博主这篇文章：
一篇文章看懂JS闭包，都要2020年了，你怎么能还不懂闭包？
面：能说说深浅拷贝的区别与实现吗？
深拷贝其实是针对引用对象类型来说的，要介绍深浅拷贝，得站在基本类型数据与引用类型数据存储区别上去理解。事实上基本类型，比如数字，字符串，JavaScript都没提供可以修改它们的方法，正因为不可变性，基本类型数据存放在栈中。
而对象就不一样了，比如数组可以增加元素，对象也可以添加属性，删除属性。对象大小不确定，所以我们声明一个对象，对象的key因为是基本类型（不考虑map结构的情况），所以key会存在栈中，而值是对象，所以放在堆中。这就导致了一个问题，当我们拷贝一个对象时，其实拷贝的是指向堆中value的指针，这也导致其中一方修改了对象值，会影响另一个对象。
而对于对象的深拷贝实现，乞丐版，JSON的两个方法，缺点是不能拷贝函数，undefined等。好一点可以递归层层遍历拷贝，或者有其它三方拷贝。
面：ES6了解吗？说说let const var区别？
这个就简单了，var有遍历提升，let和const不能反复声明，存在暂时性死域，块级作用域等等。唯一需要强调的一点是，当const声明一个变量的值是对象时，这个对象其实是可修改的，不能改的是对象的引用地址。这里大家自行组织语言。
面：说说你对箭头函数的理解
箭头函数一般用于回调，需要注意的就是箭头函数没有自己的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，问我具体怎么做，但是细节我忘记了...可以阅读这篇文章：
面：你刚说到了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请求头包含哪些东西？
我大致说了可接受响应内容类型Accept，接受的响应语言Accept-Language，资源认证Authorization，是否缓存Cache-control。没怎么复习，大家自行百度。
面：能说下ajax吗？
因为太久没用原生ajax了，我印象也有点模糊，大致说了创建xml对象，然后判断state状态，之后就是对应请求接口，做后续处理，这个大家自己查查资料。
面：flex了解吗？说说常用属性？
这里我分别对于容器属性，项目属性，几个常用的说了说，具体可阅读这篇文章：
面：我看你项目有组件封装经验？说说一个组件需求给你，你是怎么从零到有完成它的？
这里我就说了第一步大致确认需求，画流程图，以流程图再次核实需求，若有与外界存在数据交互，确认数据结构以及对外API，这些基本工作做好，流程图没问题那就是写代码的事情了。
面：那你挑一个你觉得满意的组件，讲讲你怎么做的。
这里挑了之前做的地址管理组件，包括配置，支持两种布局模式，以及做了本地数据更新处理，地址选择判断，参考了京东淘宝的模式，同时用笔画了一个简易的流程图。
面：我看你项目用到了BEM规范，说说BEM代表什么意思，怎么连接？
B代表block，也就是块，E代表元素，M代表同意元素的不同状态。连接是这样block-name__element-name--modifier-name。要用这个也是为了复用组件，确保组件样式不会与外界样式冲突，所以对于组件样式采用了BEM规范。
面：发布工具有了解吗？
由于我上家公司用的百度的fis3，所以我简单说了下fis3，做了less编译，css浏览器兼容前缀添加，文件合并等相关功能。
面：看你有写博客，访问量多少，产出呢？最近一篇博客是什么时候写的？
访问不知道，没开这个功能，粉丝目前两百多个，产出一个月最少八篇，精品文章一篇可能需要一周闲余时间。最近一篇博客就是昨天写的。
你刚说了你在刷leetcode，最近做的一道题是什么，又把笔给我了，说说你的思路。
这个就如实回答了，因为也是刚做不久，就用笔在纸上大致写了下实现思路。
后端语言有了解吗？
目前没有，等vue实战了下一步就是学习node。
那么到这里，整个面试基本就结束， 问我有啥问题。我就问了下公司的技术选择，未来可能涉及的项目类型，是否有移动端，因为我非常渴求快速向vue，react转型，然后就是聊了下新职待遇，福利啥的。我最后问了下对于我的面试评价，面试官笑了笑，说等通知。我也笑了，说那肯定挂了，他说那倒未必。然后送我离开公司。
面完后我心里是给自己打了70分，本人口头表达能力还可以，可能问题也不难，总体回答还行，结果刚上地铁不就，HR电话就过来了，说技术面通过了，明天综合面试，聊聊职业规划啥的，基本就宣布可以入职了
肆 ❀ 总
怎么说呢，这两场面试下来，大致可以确定的是自己JavaScript基础还可以，我之前一直没自信，感觉这也学的不扎实，那也学的不好，这里得顾，那里也得顾，急起来了导致我vue学习非常缓慢。经过这两轮面试，至少js部门我可以先放放，可以专心学习http与vue了，当然算法部分还得加强，不然问到算法稍微难一点我估计也悬。
由于之前的面试都是猎头找的我，比较被动，后面还是主动挑一些自己感兴趣的公司投递看看，我也跟负责腾讯网易的HR交流，今年大厂简历卡的比较死，难度很高，深感自己没戏，但愿后面能找到一家还算心仪的公司，两年后一定挑战大厂，那么本文就到这里了。
