记大四以来的前端面试

前言

大三下学期因为眼睛患了过敏性结膜炎，只好在家养病，错过了宝贵的实习时间。大四到校就开始了紧张的秋招。拿到的第一个offer是一家厦门的公司，当时跟技术小哥谈的很愉快，后来因为厦门比较远，而且公司的业务我不太感兴趣，所以没有去。之后又面了很多家公司，一直持续到来年四月，因为技术太菜，投的大公司都进了人才库（笑，最后进了一家还不错的小公司，公司前后端分离，用react技术栈。在此纪录一下大四以来的前端面试。

面试准备

1. 准备简历。参照了不少优秀的简历后（主要是知乎，和用搜索引擎搜索到的），写好了自己的简历。
2. 刷面经。主要是牛客网，牛客网秋招和春招都有面经分享活动，很多拿到大厂offer的大牛会在上面分享面试经验。

技术面

1. 自我介绍

先是个人的基本信息，xx大学xx专业大四学生，之后说了自己擅长的方面，用xx技术写过某某项目，在xx公司实习，实习期间写过xx，最后讲了自己的兴趣和职业规划。

面试官一般会根据自我介绍问问题，自我介绍时说了自己用vue写过某某项目，然后就被问了一堆vue相关的题...

2. 说一下vue的双向数据绑定

基本原理是发布订阅模式和Object.defineProperty()劫持各个属性的setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调。因为有看过这方面的博客，对照博客写过一个简易版的vue，所以简单说了下具体实现过程

3. 说下你对vue生命周期的理解

vue的生命周期就是一个vue实例从创建到被销毁的过程。说了一遍vue官方文档那张生命周期的图。

4. 怎么写一个vue组件

主要是三个部分，模板、样式和脚本。讲了各个部分需要考虑什么，子父组件的通信、根据具体的功能使用相应指令，顺便举了个例子、样式style标签可以使用css一些预处理器的语法，通过lang属性定义等。注册组件可以全局注册也可以局部注册。写单文件组件的话，需要安vue-loader，在webpack配置；用jsx的话模板写在render函数里，css文件直接import引入，jsx文件用babel-loader处理，还需要安几个babel的插件来支持，忘了那几个插件具体叫什么...

5. 用过scss？在vue组件中怎么用

style标签中lang="scss"，安node-sass和sass-loader，webpack中做相应的配置。node-sass安装比较坑，因为墙的原因，用国内网络直接npm install安不上，一般是给命令行设代理，或者直接用淘宝的cnpm来安。之后在vue单文件组件的style标签，lang设为scss，把处理scss文件的loader加到配置里。

6. scss怎么写一个函数

@mixin或@function，写法和js的普通函数一样，@mixin加函数名，如果有参数，可以写参数，参数可以定义默认值，也可以使用rest参数，之后大括号，内部是函数语句，和普通css写法一样，只是可以使用scss内部控制命令，内置函数，变量等等，用@include来调用。@function定义的函数和普通js函数一样，可以用@return返回值，和普通js函数调用方法一样，调用后返回的就是@function内部用@return返回的值。

7. webapck打包出来的文件看过吗?

没看过...

8. 你怎么理解模块化？

前端不断发展，需要在前端处理的逻辑也越来越多，js文件越来越庞大，这时候为了更好的维护和复用js代码，需要组织js文件，根据特定功能将js文件进行划分，这就是模块化。模块化需要遵守统一的规范，服务端node.js用的是CommonJS，客户端有基于require.js的AMD规范，基于sea.js的CMD规范，也可以用gulp、webpack等的打包工具来实现模块化，es6有原生的模块化支持，但现在的浏览器还不支持。

9. 用过require.js，原理知道吗？

没有仔细了解过...记得是动态创建script标签去请求脚本，通过监听script的onload事件，来确定加载顺序...

10. 讲一下js的原型

每一个js对象都有[[prototype]]内部属性，这个属性对应的就是该对象的原型，在一些浏览器原型对象可以通过__proto__访问，es6可以通过Object.getPrototypeOf()来访问，原型链的终点是null，之前是Object.prototype

11. 介绍一下闭包？

js中闭包是指可以访问另一个函数作用域变量的函数，一般是定义在外层函数中的内层函数。原理和js的变量解析机制有关，js解析变量会沿着作用域链层层向上查找。每次调用一个函数时会创建相应的执行上下文，和作用链，作用链会赋值给内部属性[[scope]]，这样内层函数就可以拿到外层函数作用域的变量，即使外层函数的执行上下文已经被销毁，比如调用外层函数，返回内层函数，也可以通过内层函数拿到外层函数作用域的变量。

12. js继承怎么实现？优缺点？

高程上介绍的很详细，构造函数式，类式，组合式，寄生组合式，es6可以直接extends

13. arguments和数组有什么区别？怎么把arguments变成数组？

argument是对象，是Object的实例，不能调用数组的方法。转数组可以[].slice.call(arguments)，es6直接Array.from(arguments)或通过数组扩展运算符[...arguments]

14. call，apply，bind区别？

都定义在Function.prototype上，第一个参数是调用的函数内部this指向的对象，第二个及之后是要传入的函数参数，call和bind以值的形式传入，apply以数组的形式传入，call和apply返回调用函数的返回值，bind返回一个绑定函数。通过调用符()调用时，绑定函数内部this值指向调用bind的第一个参数，前几个参数绑定了调用bind时传入的第二个及之后的参数；通过new调用时，会忽略bind绑定的this值，将原函数当成构造器，参数有效。

15. 实现一个bind方法

MDN文档上有bind的Polyfill，注意考虑new绑定函数的情况

16. new一个对象的过程

创建一个空对象，this指向这个空对象，继承构造函数的原型，执行构造函数中的代码，返回this

17. es6有哪些新特性

let，const，原生的模块化支持，结构赋值、异步的解决方法promise、generator、async函数等，一些语法糖，比如箭头函数，class，对象方法属性的简写等

18. 讲一下let和const

let用来定义变量，const定义常量，块级作用域、暂时性死区、相同作用域不能重复定义、全局定义不会挂在window上，此外let作循环变量，每次循环都是一个新的变量，const必须在声明时赋值，之后给const定义的变量重新赋值会报错。

19. promise怎么理解？

让异步操作逻辑更加清晰，解决了异步操的作回调嵌套问题。promise对象有三种状态，pending、fulfilled和rejected，promise对象内部保存一个需要执行一段时间的异步操作，当异步操作执行结束后可以调用resolve或reject方法，来改变promise对象的状态，状态一旦改变就不能再变。new 一个promise后可以通过then方法，指定resolved和rejected时的回调函数。

20. 箭头函数和普通函数区别

不能用作generator函数，内部this是定义时所在环境的this，不能通过new调用，内部没有arguments对象

21. 讲讲ajax

与服务器通信的一种手段，主要用于异步通信，无需刷新页面就可以拿到服务端的数据，或向服务端发送数据，通过xhr对象实现。

22. 如何跨域？

ajax跨域，jsonp、CORS，不同域页面的通信，document.domain和HTML5的postMessage

23. jsonp原理？

原理是script元素的src属性不受同源策略限制。和服务端约好函数名，请求文件的时候，服务端返回一段 JavaScript。这段 JavaScript是调用函数的语句， 调用了约好的函数，并且将数据当做参数传入。函数在前端定义，处理完数据之后，remove掉script元素。

24. 了解哪些排序算法

没有学过算法，自己也没有看过相关的知识...大一时候学过冒泡和选择排序，还知道有堆排序、快排和归并排序

25. 数组去重手写

es5实现

function unique(arr){
  var newArr = [];
  for(var i in arr) {
    if(newArr.indexOf(arr[i]) == -1) {
      newArr.push(arr[i])
    }
  }
  return newArr;
 }

es6

function unique(arr) {
    return [...new Set(arr)]
}

26. 手写二分查找

当时没写出来...以前根本没看过，后来网上查了下，原理很简单。有序数组，先比较中间元素，如果等于中间元素，则返回中间元素的索引，如果比中间元素大或小，则从右边区间或左边区间查找，和开始一样再比较中间元素，以此类推。

27. rem和em区别

rem是基于根元素font-size进行计算，em稍微复杂，元素font-size属性是相对于父元素font-size计算，其他属性相对于本元素font-size计算。

28. 说一下position定位

position属性有五个值，默认值是static。相对定位relative是对于元素正常位置进行定位，偏移后原本的位置仍占据空间，不会影响其他元素的位置，未脱离文档流。绝对定位会脱离文档流，相对于已定位的祖先元素进行定位。固定定位和绝对定位相似，但是是相对于视口的。还有一个新增值sticky，是固定定位和相对定位的混合，必须指定top、right、bottom、left、四个阙值之一，适口滚动到阙值前是相对定位，之后是固定定位，兼容性不好

29. 怎么实现垂直居中

单行文本直接设height等于line-height、绝对定位top: 50%;再向上移自身宽度的一半，如果不定宽用transfrom: translateX(-50%)，flex布局、tabe-cell、还有一个比较hack的方法，子元素display: inline-block; vertical-align: middle;父元素的after伪元素，height: 100%，display: inline-block; vertical-align: middle; font-size: 0;

30. 如何清除浮动

主要是两种，一种是触发BFC，因为BFC内部元素和外部元素不会互相影响；一种是用clear属性，常用

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

31. 谈一下BFC?

全称块级格式化上下文，是一个独立的布局环境，它规定内部的块级盒子如何布局。BFC中的元素的布局是不受外界的影响，在一个BFC中，块盒与行盒都会垂直的沿着其父元素的边框排列。主要用于清除浮动和避免margin折叠。浮动元素，position非默认值或相对定位元素，display为table-cell或table-caption元素、overflow不为默认值元素都会触发BFC。

32. 平时用什么IDE

VScode，webStorm和sublime也用过，不介意尝试新的编辑器

非技术面

有一家公司是群面，给了一个问题让我们讨论，一共十个人，十个职业，只能活八个，让哪八个人活？

这家公司的一面，一面是hr面，只要讨论的时候活跃一些，没有标准答案，言之有理即可

你是怎么学习前端的？

书籍、视频、博客、自己练习。如果想学习某方面的知识，会去看知乎上推荐的书，也会看豆瓣上的评论，刚开始学js的时候看过高程、语言精粹、你不知道的js上册等等。视频主要是慕课网，跟着慕课网上的视频敲过很多demo。收藏了一些人的博客，比如阮一峰老师、张鑫旭老师，有相关的知识点不懂，直接在他们的博客上面查。自己练习的资源很多，慕课网上的一些小的项目，百度前端技术学院上的题目，github上的项目，都可以自己完善，扩展。

期望薪资

当时要的低了...所以期望薪资还是要高一点。高了的话，hr会说，我们公司能给的最高薪资是多少，问你能不能接受。

平时兴趣爱好

看书、看动漫、看电影、跑步

看过哪些书？最近在看什么动漫？

看书并没有喜欢看特定作者或特定类型的书，都是看一本书，对某些方面感兴趣又去看那些方面的书。比如看完《1984》后，因为《1984》有涉及一些哲学的内容，又去看了《苏菲的世界》《西方哲学简史》。对日本感兴趣，看了《菊与刀》(当时正值二战，作者态度很明显)；对美国感兴趣，看了林达的《历史的忧虑》。也有追一些热点，国内刘慈欣先生的《三体》和一本短中篇小说合集，二熊的两本书《最好的我们》和《你好，旧时光》都看过，总之看的很乱很杂。

动漫刚看完EVA...一直有追one piece的漫画，国内二叔的一人之下

有列计划的习惯吗？

有。记在哪里？手机上。方便给我看一下吗？看了之后hr说，你这并不是计划，没有截止日期...

平时压力大的时候怎么处理？

晚上的话会出去跑步，有时候压力太大学不进去，会睡觉或者看看动漫，如果不行就运动，运动对我很有效

未来的职业规划？

目前只是想精进前端技术，长远的还没想过

家离北京近，为什么来杭州？

北京压力太大，而且在北方呆久了，想来南方看看。

想不想去阿里之类的大公司？

没有想过（是真的没有想过...因为技术太渣，想去也进不去）然后被hr批评了...如果想做技术的话，还是要有去大公司工作的想法。

怎么看待加班？

为了赶项目进度可以接受（进去公司后问同事，同事说我们公司加班不多...）

你有什么想问我的？

前端部门技术栈，主要有哪些业务、实习期多久