领导让我面试别人，我准备了那些面试题
关于领导让我面试别人，我准备了那些面试题
前端领导一天对我说你准备下面试题，然后我会筛选些简历给到你，你到时候负责一面。然后大致跟领导聊了下需要那样得，有没有什么具体要求。
大致就是要求能干活，不管是表格、echarts等能立刻上手，别是刚培训班出来得就行。
可能也是上个同事来了一个礼拜也没写出来什么太多东西。然后领导最后跟我们说他每天我看到再微信聊天, 让写个表格都能墨迹半天写不出来。本来再一周得时候都能看出大致水平了，但是领导觉得都招进来了好好学，每天积极学习也是愿意培养得。最后领导跟我们说他既然不愿意学，每天就是按时下班等情况吧就让人走了总共算是待了两个礼拜，工资也正常发放了。
我也是去看了好多面试得一些经验，希望能招到合适得同事，一荣俱荣，我也是想我招聘进来得同事能符合岗位要求，不然就是面试官得问题了。记得有一篇文章中说，你跟面试者身份是同等得，不过是你单位需要招聘。刚好我求职而已，不要趾高气扬得去问一些你不知道在哪里看到得新名词去为难人。
以下就是我准备得一些面试题，我觉得能答得七七八八基本满足干活要求了，然后可能回答得好的我也会基于原问题扩展下。回答不上来也没关系，能回答上来更好了。
Css
- 常用的伪类有哪些？
可能有些人会一时没想起来，哪有问这么简单得哈哈。我也会稍微提示下
:not、:hover...我可能更希望面试者能说点其他得比如first-child、last-child、nth-child、before、after等等。
- css 说下弹性盒子；
这个也是工作中必须会的，我可能希望你能说的多点，当然不常用的那些对子盒子的一些属性除外。例如：
flex-direction是更改方向的可以。flex-wrap是可以设置是否允许换行。justify-contentx轴的对齐方式。align-itemsyz轴的对齐方式。
- 说下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}]}
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得实现。
来源：juejin.cn/post/7262349502920540217
