本人是在2020年1月份的时候开始准备面试的，春节过后开始在boss上投递简历，总共面试了十几家公司，面试都是电话+视频面试，面试结果如下：
- 掌门1对1(过)
- 爱贝集团(过)
- 再惠(过)
- 拓链(过)
- 2345(过)
- 今日头条一面挂
- xTransfer(总监面挂)
- 菜鸟网络(第四面总监+hr面挂）
- 携程(三面技术面过，最后的线上评测挂，需要做一些图表评测的。。。无力吐槽)
- 口碑(过)
- 360(过)
现在已经入职了360云安全事业部，希望我的经历与感悟能够帮到大家。
转行经历
14年大学(东北大学秦皇岛分校)本科毕业后直接校招去了一家半国企单位做嵌入式开发(硬件方向)。因为公司的制度，加上内部繁琐的流程，其实在头一年就已经有了离职的想法，但公司做的产品比较小众，跳槽难，也没有勇气转行，就这样蹉跎了3年，现在回想起来，真的后悔。一直到17年8月份，买了Udacity的课程开始自学前端，10月份辞职回家，一边休息一边兼职udacity学城的前端助教，12月份到上海开始找工作，18年1月份开始第一份前端工作，薪资7.2k。
因为一开始没有工作经验，在boss上投递了四五十分简历，最后也只收到了几家公司的面试通知，比较幸运的是最后拿到了两家公司的offer，都是小公司，一家给的9k,另一家给的7.2k。这两份offer说起来还挺有意思的，给9k的这家，是做农田数据检测的，知道之前我是做嵌入式开发的，想着后面可以让我帮忙设计一下传感器的电路设计，所以给我发了offer；而7.2k这家，是我在做udacity前端助教一个学员内推的，交大的一个老师简单面试了下就让我过了。最后选了7.2k的这家，原因是这家公司在面试的时候就跟我说了，他们这基本不加班，典型的965工作制，而对当时的我来说最缺的就是时间了。
公司在交大的闵行校区，我在学校对面租了房子，走路也就十几分钟的路程，几乎又过上了大学的生活，工作在软件大楼，吃饭在学校食堂，下班后就开始学习从慕课上买的黄轶老师的vue课程，学完后又开始学koa，最后用vue+koa搭了一个简单的cms管理系统。因为在做这个项目的过程中学到了很多，想着把搭建过程记录一下，又去网上找好用的博客工具，最后相中了vuepress。
我把搭建好的博客链接丢到了蜗牛老师到一个小程序群里，然后认识了一飞同学。他当时正准备帮七月老师做一个文档工具，也打算用vuepress，因为他马上要结婚了，所以想找人先把这个工具给做起来。当时找我，我觉得自己hold不住，最后在他的劝说下，觉得这也算是个机会，硬着头皮答应下来了，正好那段时间也没什么事，就一门心思扑在这上面了。刚开始的时候磕磕碰碰，怎么引入icon图标、怎么修改code主题、怎么调整页面结构都是一头雾水，也没别的办法，就是反复看源码，把结构、运行原理看个大概，又去github上扒拉issue，然后就开始在上面进行魔改了，后面进展还算比较顺利，做了一个多月，把第一版给做出来了。这个东西做完，七月对我俩还是比较满意的，然后又问我们有没有兴趣做开源项目，后来我们就成了lin-cms-vue最早的两个前端开发者了。
现在回头想想，我可能算是比较幸运的吧，入行半年多，就有机会做开源项目，这个项目也在我后面的面试过程中，给我加分了很多；但这也是我自己主动抓住了这次机会，不是吗？如果当时选了那份比较忙的工作，我就没有那么多时间去学、去写博客，如果当时我退缩了觉得自己做不好，也就没有后来的事情了。
准备面试
基础知识我主要是通过掘金出的《前端面试之道》这本小册来准备的，虽然小册有的内容讲的不深不全，但是整个前端的知识体系还是比较全面的，从js的es5、es6、浏览器的渲染、缓存机制、安全、性能优化、vue\react框架、http、数据结构、常见算法等都有涉及到，我就是按照小册的所列出来的内容来构建自己的前端体系的，来来回回看了有两三遍吧；另外小测的评论区小伙伴也列出了很多很好的文章，可以很好的拓展自己的知识深度；然后我还买了饥人谷的js专精课程，看了不少饿了么团队在知乎上发表的文章，质量都很不错；也在掘金上刷过别人的面经，查漏补缺自己的知识点，总的下来花了一个多月的时间。
准备算法的时候，正好当时慕课搞活动，我就花了1块钱买了《算法与数据结构-综合提升C++版》,每天大概花一个半小时，把基本排序、高级排序、堆和树这几章内容给看完了，后面用js实现了一遍，因为当时我也去看过别人的阿里面经，算法题一般都不会太难，所以算法这块我就这么准备了。
除了这些，还需要准备项目。因为待的是小公司，业务也相对简单，公司的项目拿不出手，没办法只能自己造了。我在19年的时候跳槽到了另一家小公司，在这一年里自己学了react、rn、flutter、ts，下半年的时候，开始准备项目。花了两个多月的时间，用react hooks + ts造了一个UI组件库，大概造了十几个组件；用egg + react仿造慕课的《从0到1 实战朋友圈移动Web App开发》写了一个高仿的webApp；还有之前用vue写的cms管理系统以及开源项目lin-cms-vue，最后简历上大概准备了四五个项目。
因为不想再去小公司了，所以简历投递的以中大型公司为主，前期面的掌门、爱贝、拓链等比较顺利，问的问题都比较常见，只有掌门涉及到了一道迷宫的算法题，我的回答面试官不是很满意不过最后还是让我过了。前期拿到几个offer之后，心理也更有底了，就想着开始试试大厂。下面就重点说说我面试阿里的经过。
头几次面试，跟面试官交流的时候会有点紧张，语言的组织也有点乱，这些情况，随着面试次数增多，在后面都慢慢的改善过来了；并且有些知识点理解不到位也在面试过程中暴露出来了，所以面试的时候，自己不会答或者觉得没答好都题，要记下来，过后再把它研究透。
菜鸟一面
第一面主要是考察基础知识，这里提一句，菜鸟面试官并没有事先跟我约好面试时间，当时接到电话是下午2点多，问我有没有时间，简单的自我介绍后，就开始进入问答环节。面试时长1小时。
- js基础类型有哪些(没错，就是这么基础)
- js数组去重的方法有哪些
- set和weakSet的区别
- es6用过哪些新特性
- http状态码(301,302,304,401,403,405)
- http1与http1.1的区别，用过HTTPS嘛，为什么说它更安全，用的什么加密方式
- 浏览器缓存(强缓存、协商缓存)
- 为什么握手需要3次？挥手需要4次
- 如何解决跨域问题？
- 跨域可以携带cookie嘛？如果可以，前后端需要怎么设置(面试官有看到我简历上写着会node,所以问了一些后端方面的知识)
- 说说vue和react的区别
- react的context功能用vue怎么实现(inject,provide)
- vue的具名插槽功能用react怎么实现
- hooks解决了什么问题
- 说说用TS有什么好处，interface和type的区别，never类型什么时候会用到
- 中间定宽，如何实现两边平分剩余的宽度，有几种实现方法
- 将数字12345678转化成：12,345,678
面试官基本就是看着你的简历问问题，你简历上写的任何东西都有可能被问到，像框架这一块，如果只会react或者vue都没问题，但是如果你两个都写，就有可能像我这样被交叉着问；如果时间不充裕，好好准备其中一种就够了。
菜鸟二面
还是电话面，这回是交叉面。面试时长40分钟。
- css的权重排序
- 如何实现script的延迟加载
- hashRouter和browserRouter原理和区别
- vue 实现按需加载的原理
- instanceof 实现原理
- 说说vue的双向绑定原理
- vue的diff算法和react的diff算法区别
- promise 限制并发数
- 什么是防抖，什么情况下会用到
- react是怎么优化的
- 两个有序数组如何拼成一个有序的数组
- 说说为什么转行
- 说说你做的比较好的一个项目(从需求分析，技术选型，碰到什么问题，怎么解决，有什么价值)这里我说到了开源项目，也说了后期可能会推出商业付费版，面试官还算满意吧
- 这个岗位base在杭州，你现在在上海，有问题嘛
- 有什么想问的
菜鸟三面
这回是视频面，是菜鸟的前端负责人。
- 自我介绍
- vue和react有什么不同
- vue通过数据劫持就能知道哪些数据发生了变化，为什么还需要diff算法?
- 现在公司的团队情况，产品情况，你在公司负责什么
- 你是如何提高开发效率的
- 说说你做的比较好的项目
- 市面上已经很不少cms的开源项目，你们这个项目别人的好在哪
- 平时怎么做性能优化的
- 是怎么学前端的
- 为什么想转行
- 为什么想来我们公司
- 随机出了几道题，有关于原型链、this指向的考题
第三面就面了半个多小时，面试官好像对我做的项目不是很有兴趣，就随便问了问，没有问太基础的问题，当时面完，感觉可能挂了。大概过了一周，意外h收到了总监+hr面的通知。
菜鸟四面
这回是两个面试官，菜鸟的总监和hr。
面试刚开始就发生了一件比较尴尬的事情。先自我介绍，这时候总监才开始看我的简历，当知道我只有2年前端经验的时候，总监有点惊讶，问了句："你不是一直做前端开发的啊"，当时听到这句话就有点慌了，感觉要跪。后面面试过程中，心态就有点变了.
- 你们的权限系统是怎么设计的
- 用户信息和路由信息的数据结构是什么设计的
- 为什么做这个UI库，市面上不是已经有很多好用的UI库了
- 平时业务方面的组件是怎么封装的
- 为什么转行
- 怎么学的前端
- 你转行前的学的哪些东西，是在前端领域可以用的到的
这一面面了不到半个小时，几个转行相关的问题是hr问的。前面心态有点受影响，在讲项目的时候，出现了几次短路，没有前几面表现的好；面试官面完后问我有没有什么想问的，我就问了面试官对于工作经验的看法，面试官说他们对应聘者的工作经验是有要求的，但是也会综合评估应聘者的水平和潜力。后面过了大概5天，就收到了面试没通过的邮件了，第一次面试阿里就这样跪了。
口碑一面
电话面，面试时间1小时
- 如何做首屏优化的
- react高级组件作用有哪些(这里举例了redux的例子)
- 接着问redux如何处理异步请求(这里我还跟面试官对比了vuex和redux的区别)
- 什么是闭包，平时怎么用的
- 同时发出A B C三个请求, 如果有一个请求超时，就取消这次请求，如何设计
- 知道DNS劫持吗？怎么防止DNS被劫持
- 浏览器输入URL后过程说一下
- 有做过性能监控吗，怎么做的
- react的生命周期说一下，16.3后新增加的两个生命周期是什么，什么情况下会触发这两个生命周期
- fiber解决了什么问题，用的什么数据结构来存储节点信息的
- 一个数组里，如何找出最大值，有几种办法，越多越好(遍历，排序，Math.max)
- 二分查找的时间复杂度是多少
- 说一下实现bind函数的思路
- 箭头函数的this，是在定义时确定的还是运行时确定的
口碑二面
面试时间2小时，半小时笔试+一个半小时视频面试
- 面试官一上来就跟我介绍了口碑的业务情况
- 用过webpack吗？怎么提高打包性能？
- webpack的loader和plugin是用来干嘛的
- 如何不用递归，实现二叉树的前序遍历
- 说说垃圾回收机制(这块之前没怎么了解过，然后我说了什么情况下可能会发生内存泄漏的情况)
- 最近三个月有看过什么书吗？说说你最近从书上学到了什么(这里我举了经济学方面到内容，顺便说了一下最近国家管制口罩价格到问题，从经济学角度来看，国家不应该过早干预口罩的价格，因为口罩的利润大，大家觉得有利可图，生产口罩的厂家就会变多，这样一来口罩的生产量就上来了，口罩的价格自然而然就会跌下去)
- 你之前公司比较轻松，那如果来阿里加班多了，你能适应吗？
- 用node怎么处理大文件读写问题
- 说说node的事件管理
- 从数组中找出三数之和为n
- 说下koa的洋葱圈模型，有什么好处，如果不调用next,会发生什么
- 当初为什么要做开源项目，他解决了什么问题
- 正则会吗，平时用正则来处理什么问题(这里直接跟面试官说不怎么用正则，平时可能用来匹配一些文件后缀，用到了才会去查，面试官好像不是很满意
笔试题
题目一：
请完成“空白处”代码，使得以下组件在选择时能够将合适的值打印出来
class Counter extends React.Component {
select(val) {
console.log('you have select' + val);
}
render() {
return (<ul>
{
['a','b','c'].map((item, index) => {
//return <li onClick={this.select(item)}>{item}</li>
})
}
</ul>)
}
}
题目二：
请实现find函数，使下列的代码调用正确。
约定：
title数据类型为String
userId为主键，数据类型为Number
var data = [
{userId: 8, title: 'title1'},
{userId: 11, title: 'other'},
{userId: 15, title: null},
{userId: 19, title: 'title2'}
];
var find = function(origin) { //补充find
let matchArr = []
find.where = function (_test) {
matchArr = origin.filter(v => _test.title.test(v.title))
return find
}
find.orderBy = function (key, order) {
if (order === 'desc') {
matchArr.sort((a,b) => b[key] - a[key])
} else {
matchArr.sort((a,b) => a[key] - b[key])
}
return matchArr
}
return find
}
//查找data中，符合条件的数据，并进行排序
var result = find(data).where({
"title": /\d$/
}).orderBy('userId', 'desc');
console.log(result); // [{ userId: 19, title: 'title2'}, { userId: 8, title: 'title1' }];
题目三：
下面是一个redux中间件，补充“空白处”代码，使得dispatch支持action为函数作为返回值
export default function() {
return ({ dispatch, getState }) => next => action => { //此处开始补充
if (typeof action === 'function') {
return action(dispatch, getState);
}
return next(action);
};
};
题目四：
为Function扩展一个方法bindX，可以实现如下功能
function add(num1, num2) {
return this.value + num1 + num2;
}
var data = {
value: 1
};
var addEx = add.bindX(data, 2);
addEx(3); // 6
Function.prototype.bindX = function (_this,num1) { //补充
const _context = this
return function (num2) {
return _context.call(_this, num1, num2)
}
}
题目五：
有一个数组，里面只存在 * 和 字母，比如 [‘*’, ‘d’, ‘c’, ‘*’, ‘e’, ‘*’, ‘a’, ‘*‘]。现在需要把这个数组中的所有星号移动到左边，所有的字母移动到右边，所有字母的顺序不能改变。
var arr = ['*', 'd', 'c', '*', 'e', '*', 'a', '*'];
function parse(arr){
let signArr = []
let alphaArr = []
for (let i = 0 ; i < arr.length; i++) {
if (arr[i] === '*') {
signArr.push(arr[i])
} else {
alphaArr.push(arr[i])
}
}
return [...signArr, ...alphaArr]
}
console.log(parse(arr));
笔试题不算很难，做完题面试官会根据你的答案来反问你，比如最后一题，问了我时间复杂度是多少，有没有别的方法，不需要借助外部的存储空间等等。
口碑三面
第三面是BOSS面，视频面了差不多2个小时
- 用CSS隐藏元素的方式有哪些
- display:none 和visiblity:hidden的区别
- 数组结构如何转换成树结构，说说思路
- 表单可以跨域吗
- 如果你的后台访问量，达到每秒超10万次，要怎么设计(这里要说到负载均衡方面的内容)
- 如果让你设计饿了么的外卖系统，你会怎么设计，有哪些需要考虑的(这里考的是对业务的理解，送外卖，就是想的要怎么能尽快把外卖送到客户手里，怎么调度配送员，需要考虑到一些路况信息、天气情况之类到)
- redux是如何把数据注入到react应用里的
- 你们平时是怎么提交代码，git flow了解吗？
- 前端测试是怎么做的
- 说说你的转行经历，这里BOSS原来也是转行做前端的，大学是学的化工，然后给我讲了一些他的学习经验，如何克服焦虑，前端知识体系更新太快怎么学习巴拉巴拉的，这块聊了有20多分钟。
在这一面，面试官多次提到了要对业务有深入的理解，用业务来推动技术的升级，而不能单单只从一个前端开发者的角度去看。
HR面
HR就问了为什么转行，介绍了一下过去做的东西，觉得自己对公司要哪些贡献，为什么离职。。。问了我的期望薪资，这里我把现在这家公司的薪资待遇，还有360给的薪资待遇跟HR说了下，我还比较耿直的说了阿里加班会比较多，所以希望待遇比360高点(这里因为现在自己这家公司的待遇不高，是避税的形式，然后我本身前端经验也不是很多，所以谈薪资的时候有点虚，没敢多要)。又过了2天，HR给我电话说过了，确定了薪资，级别是P6。
总的来说阿里的面试比注重基础，也比较看中你的知识广度，面试一般都是先从最基础的开始；算法会问，但是总体来说还是属于简单的，不是难为人的那种题；除了这些，阿里也比较看重的你的项目，特别是在后两面；如果你跟我一样，自己公司的业务项目相对简单，可能就需要自己造一些有挑战性的项目了，并且项目这东西在平时的工作中就要有意识的去准备，等到想跳槽了再准备，可能会来不及了。
