关于领导让我面试别人，我准备了那些面试题

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

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

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

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

以下就是我准备得一些面试题，我觉得能答得七七八八基本满足干活要求了，然后可能回答得好的我也会基于原问题扩展下。回答不上来也没关系，能回答上来更好了。

Css

常用的伪类有哪些？

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

css 说下弹性盒子；

这个也是工作中必须会的，我可能希望你能说的多点，当然不常用的那些对子盒子的一些属性除外。例如：

flex-direction 是更改方向的可以。
flex-wrap 是可以设置是否允许换行。
justify-content x轴的对齐方式。
align-items yz轴的对齐方式。

说下localstoage/ sessionStroge区别;

可以从大小啊、特性分别说下。

清除浮动的方法有哪些分别说下

可以简单说下比如overflow: hidden;等。

说下重排和重绘什么场景下会发生重排和重绘

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

实现垂直居中的方法有哪些

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

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

Js

由于我们可能是重前端多一点所以对数据转换会要求多点。所以我准备了一些数据处理的面试题如下：

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

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

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

2、说下防抖、节流的场景以及怎么实现这些。

能说出防抖和节流的用处和场景，假如你能说对应用场景，实现都是使用lodash等或者找的方法使用的也能接收。但是还是希望能写出来一个自己如何实现防抖和节流的。

3、说下let/count区别

可以说下两者区别：常量不允许修改等。

let a = 1; let b = a; b = 2;(这个时候a、b分别是什么值？)（加分项：说下原因）
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}]}

js 复制代码

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基础那么好，也就看下文档就能上手了。

vue 组件间传值实现通信的方式有哪些？
有使用过vueBus嘛（加分项: 说下发布订阅者模式）
有用过watch嘛？ watch 的deep 和 immediate都是干嘛的有啥作用（加分项怎么实现一个watch）
v-show 与 v-if 有什么区别？
说下vue的生命周期？
说下vuex的个人理解
说下nextTick使用场景

其实这里更希望你能说出获取dom等基本就符合问题了。但是如果能答出来nextTick是怎么设计的那可太棒了

说下路由hash、history的区别

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

加分项

一般达到这里已经满足我们得招聘要求了，这个时候我可能会多问一些完事把整体情况汇报给领导，由领导下决定选择谁入职

使用过canvas嘛（都用canvas再场景下实现了什么功能）
使用echarts都画过那些图表（解决过什么困难）
都用webpack做过什么？
vue中假如请求api不以api/v1统一规范开头了怎么实现接口转发？

结语

面试前还是要多准备准备，以上就是我面试新同事准备得一些面试题，其实好多同学都卡再了js,js基础不够扎实。相比与学习框架api，语法，我更会花更多时间再js上面。然后再去了解框架好的设计以及API得实现。