初级前端面试小记

2018 年初连续面试了十多家初级前端岗位，每次面试结束之后都会习惯性地记下来被问到的问题。最后归纳总结了一些题目和自己的经验，公布出来希望对入门新手有一点帮助。因为个人水平有限，所以遇到的都是一些很初级的问题，公开发表权当抛砖引玉。

首先讲讲面试流程。对于没有内推的人来说，大部分公司的流程是首先自主投递简历，通过初筛之后，有的公司会进行一轮电话面试，OK 的话会邀请去公司做三轮 onsite 面试，一轮考察技术基础，二轮boss面，前两轮聊的不错的话就可以和HR聊了。

怎么拿面试？

如果有内推的话肯定是最好的，有人作背书至少可以拿到一个直接 onsite 的机会。当然，我也知道刚毕业的学生或者需要换一个新的工作环境的小伙伴们可能没有那么容易找到内推机会。我也体会过疯狂投简历但是一次面试都拿不到的感受，所以需要内推的小伙伴可以拉到文章最后看看我们的简介，直接私信发给我你的简历，我来帮你内推。

没有的话就网上自己投递，我在拉勾上投了大约一百份简历，大约每6，7次投递会拿到一个面试，效率也算很高了。

另一个拿面试的办法是在互联网上公开自己的简历，让HR或者猎头来找你。即使是缺乏工作经历的菜鸟，也是有HR／猎头主动联系的，所以一定要好好写你的简历！最好保证自己的简历在主流的互联网招聘平台上都能够被搜索到，我在几个平台上都收到过HR主动发的面试邀请。

简历的重点是什么？

面试官看简历的时候一般会聊三个部分，第一是工作经历，第二是做过的项目，第三是精通／熟悉的技术。对于前两个部分最好是先自己总结好，面对任何人都能够很自然地说出来，不然现场边想边说很难表达好自己。对于初学者来说，项目经历这一栏一般会写模仿过的网站。但最好有一个自己模仿过的组件，面试中被问到的几率很高。而第三部分，自己简历上写的精通技术，一定要在面试前系统地复习一遍，如果自己写了精通，但是被人问到发现不会就尴尬了。

其他注意事项

首先，一定记得自己打印好简历随身带上！个人经验是，大约每3，4次面试会就有1次面试官是没有准备简历的，所以随身带简历还是很有必要的。另外如果你英语水平还过得去的话，英语简历请务必准备，同时也准备好一套英文的自我介绍。这么多次面试中，我三次被人要求作英文自我介绍，两次拿出了英文简历，虽然比例并不高，但总是有备无患。

自己做过的项目要好好总结，最好要做到能现场在白纸上把源码写出来的程度。面试官很喜欢考察这方面的深度，这个方面很能体现出一个人的思考深度。如果只是简单地引用了第三方的库的话，连续问几个 follow up 问题就会漏出马脚。所以对于自己做过的项目，先试着自己总结一下，看自己理解的深度是否足够。

每次面试结束，立即记下所有的问题，当天回去查资料找到最好的答案，多作总结。初级岗位问来问去也就那么些东西，头一天被问到的问题完全有可能第二天又被问到，其次这也是一个自我学习的好机会。当然面试多了，遇到一些奇葩公司属于正常现象，要习惯于被人拒，也要学会拒绝。

面试题归纳

JavaScript

Event loop 是什么？这个问题问完了一般会补充下面几个问题。
下面代码的打印结果是什么？

setTimeout(function(){console.log(1)}, 0);

new Promise(function executor(resolve, reject){
  reject(false);
  for(var i=0; i<10000; i++){
    i === 9999 && resolve(true);
  }
  console.log(2);
}).then(function(){
    console.log(3);
  }, function(){
  console.log(4)});
console.log(5);

// 类似的题目还有很多，要能讲出为什么是这个顺序

setTimeout(cb,0), callback 一定会在0秒之后执行吗？
Promise 是什么？
Promise 的 resolve 和 reject callback 会进入 event queue 吗？
闭包是什么？
闭包的好处和坏处是什么？
下列代码的打印结果是什么？

(function(){
  var i = 3;
  while(i--){
    setTimeout(function(){
      console.log(i);
    }, 0);
  }
})();

如何用 prototype chain 实现继承？一般会让写个例子。
如何 deep copy？
JS 作用域？
作用域 follow-up，问输出结果

var a = 1;
var obj = {
  a: 0,
  compute: function(){
    return this.a + a; 
  }
}

obj.compute();
var f = obj.compute;
f();

f.call({a: 2});

Object.defineProperty() 了解吗？
Iterator 是什么？
This 是啥？
如何改变 this？
串行 AJAX？
并行 AJAX？
Hoisting 例题

var num = 0;

function f(){
  var num = num + 1;
}

f(); // output?

if(!flag){console.log('hello')};, flag为哪些可能值时会打印hello？
- null
- undefined
- 0
- false
- []
- {}
- ""
0 || "123" 结果是什么
JS 有哪些基础类型
string.substring() vs string.slice()?
基础类型 string 为什么可以调用 method？
string 有哪些方法？
Array.slice() vs Array.splice()?
Array.pop, push, shift, unshift
函数节流是什么？
如何生成 0 到 n 之间不重复的随机整数
ES6 都有啥新东西？
Node.js 为什么可以跑在后端？
如何判断一个变量的数据类型？
Map, Set 了解吗？
如何自己实现 setInterval 函数？
有一个数组，里面装的都是单词，如何将他们排序？
如何只用 NodeJS 原生 API 创建 server ？
NodeJS middleware 写过吗?
Fork, clone 和 exec 有什么不同?

CSS

clear float / BFC
Relative and absolute position
盒模型是啥
从里到外排序, height, paddding, border, margin 属性
排序下列 selector: !important, inline style, id, class, attribute, tag
CSS selector 性能排序: id, class, tag, attribute
水平居中？垂直居中？
Bootstrap 有哪些优势？
span 有宽高吗？

DOM Manipulation

如何发出 AJAX request？
什么是跨域？
事件冒泡是什么？
事件委托是什么？
你自己工作中使用过事件委托吗？
如何从一个 node 访问所有 dom node?
如何找出一个 document 里面最常出现的 class ？
如何改变一个 dom element 宽度？
如何删除一个 dom element？

React Framework

Component lify cycle
Redux 是干嘛的？
MVVM 是什么？
Is React MVVM?
HOC 自己写过组件吗
自己写过哪些通用组件？
shouldComponentUpdate 怎么用?
controlled vs uncontrolled component?
读过 React or redux 源码吗？
RxJS?
SSR？
React 对比其他框架／ React 好处？
自己封装过组件吗？
自己写过 HOC 吗？
当 props 里调用的 Object 某一 value 发生改变，会出发rerender吗？

Tools

webpack 有啥缺点？
webpack 你常用的loader？
自己写过 webpack loader吗？
webpack loader 和 plugin 区别？
gulp, grunt 会吗
抓包用过吗？
Chrome devTools 会用吗？

Algorithms & Data Structures

DP?
bubble sort
selection sort
merge sort
quick sort
如何去除一个数组里面所有重复的元素？
找出一个排好序的数组中头3个最小元素。例如：[1,2,2,3,3,3,4,5],返回[1,2,3]
找到3个最常用tag in a document
Implement strStr(), 参见leetcode
如何找到一个 string a 里面所有的 substring b？
Binary Tree Paths (见leetcode）
Implement trie (leetcode 208)
36 车， 6车道，无计时器，如何找出6个最快的。

System Design

如何设计一个app，绘制UML图，连接实现两个框功能？

Java

StringBuffer VS StringBuilder
Abstraction, inheritance and polymorphism
override vs overload
interface vs abstraction class?
multi-threading
class loader

DB

哪些语句可以被 index 优化？
优先顺序？[select][from][where][order by][group][having][limit]
如何选出满足 xxx 条件的第二个 record？

OS

你知道哪些锁？
signal 是干啥的？
read write lock? Mutex lock?

Misc

函数式编程是什么？你如何运用在工作中的？
Hash知道吗？如何解决 collision？
observer pattern 知道吗？写个例子。
如何知道当前进程 id？
如何找出3天前修改的文件？
频繁查找一个大数组里面的obejct, 例如: [{}, {}...],如何提高效率？
一根不规则的绳子可以烧1个小时，你如何用它计时15分钟？
小张是卖鞋的老板，一双鞋进货20元，卖30元。客人给了50元，可小张没零钱，所以把那50元拿去向邻居换五张10元的，找回20元给客人。后来邻居发现50元是假钞，小张不得不赔邻居50元。问小张共亏了多少钱？

Behaviroal

自我介绍（中／英）
你是如何理解前端的／好前端的特质／好前端需要哪些技能？
为什么选择前端方向？
为什么离职？
工作中遇到的困难，怎么克服的？
你是如何学习新知识的？另一个问法，请给我介绍一个学习途径。
业余时间喜欢干什么
同事加班，你工作完成了，你怎么办？
在目前工作量大，已经需要加班的情况下，还要不要做全面的测试？
最喜欢哪门课？
你的性格是怎么样的？在团队中是什么角色？
期望薪资是多少，为什么？