记大四以来的前端面试

前言

大三下学期由于眼睛患了过敏性结膜炎，只好在家养病，错过了宝贵的实习时间。大四到校就开始了紧张的秋招。拿到的第一个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批评了...若是想作技术的话，仍是要有去大公司工做的想法。

怎么看待加班？

为了赶项目进度能够接受（进去公司后问同事，同事说咱们公司加班很少...）

你有什么想问个人？

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