关于领导让我面试他人，我预备了那些面试题

前端领导一天对我说你预备下面试题，然后我会筛选些简历给到你，你到时分担任一面。然后大致跟领导聊了下需求那样得，有没有什么具体要求。

大致便是要求能干活，不管是表格、echarts等能立刻上手，别是刚培训班出来得就行。

或许也是上个同事来了一个礼拜也没写出来什么太多东西。然后领导最终跟咱们说他每天我看到再微信谈天, 让写个表格都能墨迹半天写不出来。原本再一周得时分都能看出大致水平了，可是领导觉得都招进来了好好学，每天积极学习也是愿意培养得。最终领导跟咱们说他既然不愿意学，每天便是按时下班等状况吧就让人走了总共算是待了两个礼拜，工资也正常发放了。

我也是去看了好多面试得一些经验，期望能招到适宜得同事，一荣俱荣，我也是想我招聘进来得同事能契合岗位要求，不然便是面试官得问题了。记得有一篇文章中说，你跟面试者身份是同等得，不过是你单位需求招聘。刚好我求职罢了，不要趾高气扬得去问一些你不知道在哪里看到得新名词去为难人。

以下便是我预备得一些面试题，我觉得能答得七七八八根本满意干活要求了，然后或许答复得好的我也会根据原问题扩展下。答复不上来也不要紧，能答复上来更好了。

Css

  1. 常用的伪类有哪些？

或许有些人会一时没想起来，哪有问这么简略得哈哈。我也会稍微提示下:not、:hover…我或许更期望面试者能说点其他得比方first-child、last-child、nth-child、before、after等等。

  1. css 说下弹性盒子；

这个也是工作中必须会的，我或许期望你能说的多点，当然不常用的那些对子盒子的一些特点在外。例如：

  • flex-direction 是更改方向的能够。
  • flex-wrap 是能够设置是否答应换行。
  • justify-content x轴的对齐办法。
  • align-items yz轴的对齐办法。
  1. 说下localstoage/ sessionStroge差异;

能够从巨细啊、特性别离说下。

  1. 铲除浮动的办法有哪些 别离说下

能够简略说下比方overflow: hidden;等。

  1. 说下重排和重绘 什么场景下会产生重排和重绘

期望面试者能了解dom是怎样样的刷新烘托机制，什么样下就产生重绘（color、background等）、什么样下会产生重排（更改宽高级）。

  1. 完成垂直居中的办法有哪些

期望面试者能说出两种就很好了，这两种也是经常会用到的，像还有个display：table;...这个我确实也没咋用到。只要能说出:

  1. display: flex; justify-content: center; align-items: center;;
  2. 子元素position: relative;left: 50%;top: 50%; transform: translate(-50%, -50%);

Js

由于咱们或许是重前端多一点所以对数据转化会要求多点。所以我预备了一些数据处理的面试题如下：

1、请运用forEach、map、filter、some、every等相关api对1,2,3...,10这些数据进行处理：

  1. 请用相关api计算出1-10的累加。（期望得到一个Number: [1,2,3…]）
  2. 请用相关api过滤出1-10大于5的值。（期望得到一个Array: [1,2,3…]）
  3. 请用相关api得到一个都是乘以*2的新数组（期望得到一个Array: [2,4,6…]）
  4. 请用相关api查找出1-10中是否有数值11（期望得到一个Boolean: true、false）。
  5. 请用相关api判断1-10中是否都大于5。（期望得到一个Boolean: true、false）
  6. 请用相关api判断1-10中是否存在大于9数值的（期望得到一个Boolean: true、false）。

假设答复的很好，我还会多问问面试者假设不运用这些数组api函数的话，你能用for循环相同得到相关成果嘛。假设你能说的很好，我会再让面试者自己封装一个forEach、map、filter、some、every那可就太棒了。

2、说下防抖、节省的场景以及怎样完成这些。

能说出防抖和节省的用途和场景，假设你能说对应用场景，完成都是运用lodash等或者找的办法运用的也能接收。可是仍是期望能写出来一个自己如何完成防抖和节省的。

3、说下let/count差异

能够说下两者差异：常量不答应修改等。

  1. let a = 1; let b = a; b = 2;(这个时分a、b别离是什么值？)（加分项：说下原因）
  2. let a = {name: 1}; let b = a; b.name = 3; (这个时分a、b别离是什么值？)（说下原因）

其实是期望面试者对堆、栈有必定的了解。

4、事情履行机制
setTimeout(() => { console.log(2)}, 0); const fn = new Promise(res => { console.log(3); res('success')}); console.log(1); fn.then(res => console.log(4)) 以上代码会输出什么 履行顺序是啥样的（加分项： 说出理由）

其实是期望面试者对宏使命、微使命有必定的了解，了解代码的履行机制。

5、说下箭头函数和普通函数的差异：

说完会持续问下bind\apply\call 用法以及才能 （加分项：怎样完成一个bind、apply、call）

这儿其实是期望面试者能对this能有必定的了解。

6、说下对浅克隆/深克隆的了解 以及完成一个深克隆函数
这个问题或许会根据问题3答复状况问答。

7、说下怎样合并一个数组、对象。

{...obj1, ...obj2}、Object.assign。 数组能够运用concat,假设答复的好我会再问下如何运用for满意。

8、说下字符串常用的特点api

说完后会再追问下substr、substring的差异

9、说下数组的splice 和 slice的差异

10、const obj = {a: {b: {c: 123 } } }; 期望你写一个get函数如lodash.get(obj, 'a.b.c', '-')相同的函数，便是能够通过传入a.b.c获取到值得一个函数。

11、const originArray = [{name: '小明', a: 1}, {name: '小明', b: 1}, {name: '小红', a: 1}]期望你对上面数据groupByname，得到{小明: [{name: '小明', a: 1}, {name: '小明', b: 1}], 小红：[{name: '小红', a: 1}]}

const originArray = [{name: '小明', a: 1}, {name: '小明', b: 1}, {name: '小红', a: 1}]
/** 调用groupBy(originArray, 'name')得到：
 * {
 *  小明: [{name: '小明', a: 1}, {name: '小明', b: 1}], 
 *  小红：[{name: '小红', a: 1}]
 * }
/

假设JS答复的很好，根本已经能满意咱们的招聘要求了。我后边也会对vue简略问问，定心哈哈 对源码没啥要求，咱们要求是能干活就能够。

VUE

由于咱们单位运用的是vue，我也会象征性的问一些用法相关的，假设你的js答复很好没有运用过vue，一直再运用react等结构，这个我就不会再问了，当然不影响咱们的面试成果的，相信你js基础那么好，也就看下文档就能上手了。

  1. vue 组件间传值完成通讯的办法有哪些？
  2. 有运用过vueBus嘛（加分项: 说下发布订阅者模式）
  3. 有用过watch嘛？ watch 的deep 和 immediate都是干嘛的 有啥作用 （加分项怎样完成一个watch）
  4. v-show 与 v-if 有什么差异？
  5. 说下vue的生命周期？
  6. 说下vuex的个人了解
  7. 说下nextTick运用场景

其实这儿更期望你能说出获取dom等根本就契合问题了。可是假设能答出来nextTick是怎样规划的那可太棒了

  1. 说下路由hash、history的差异

这儿面其实不只是想听到带不带#号，还期望你能说出两者会不会带着路由去恳求html,然后你们是怎样处理history下404界面的。

加分项

一般达到这儿已经满意咱们得招聘要求了，这个时分我或许会多问一些完事把全体状况汇报给领导，由领导下决议选择谁入职

  1. 运用过canvas嘛（都用canvas再场景下完成了什么功能）
  2. 运用echarts都画过那些图表（解决过什么困难）
  3. 都用webpack做过什么？
  4. vue中假设恳求api不以api/v1一致规范最初了 怎样完成接口转发？

结语

面试前仍是要多预备预备，以上便是我面试新同事预备得一些面试题，其实好多同学都卡再了js,js基础不行厚实。 比较与学习结构api，语法，我更会花更多时间再js上面。 然后再去了解结构好的规划以及API得完成。