2020年年初前端面试题

前言

跳槽是早就计划好的，虽然因为疫情的原因耽搁了一个月，但实在是不想就这么混吃等死了，最终还是选择离职。前两周基本都是在试水的态度参加面试的，所以面得都不怎么样。在此，我必须真诚的给各位一个忠告，千万不要有这种心理，因为我的这种心理导致前期错过了一些还不错的公司T_T。

我面试的是前端开发，前期准备工作就是大概复习了一下vue、js、es6。然后就开始面试了，讲真的第一次面完试的感觉就是：“前端的面试都这么难了吗？是要上天吗？我一个小小的前端，问我算法是不是过分了？”。前端的东西挺多的，前面半个多月的面试里，基本上没有问到过重复的题。这也是造成我试水心理的一个原因。想着多面一些，大部分面试题都知道了，再针对性复习，后期面试应该会发挥得更好一些。然而。。。

不瞎扯了，贴出我这一个月里遇到的面试题吧（部分答案贴出）。

框架

我们公司用的是vue和小程序，所以面试官问的基本都是这两个框架的。如果没用过的框架，面试官问有没有用过，最好直接说没有用过会比较好。不要在这种事情上撒谎，除非你真的特别厉害，没用过的框架的一些原理都很清楚。

vue

1. 说说vue的双向数据绑定实现原理（其实今年已经很少问到这个了，但是有些公司的面试官还是会问到）

   通过Object.definerProperty来劫持各个数据的属性的setter和getter，在数据变化时，发布消息给依赖收集器，通知观察者去执行回调函数，达到视图更新的效果。（但是使用Object.definerProperty实现监听时是有一些痛点的，比如，①无法监测数组下标变化，导致数组删除或者插入元素时，数组的变化无法实时响应；②只能对对象的属性进行监测，当对象深度比较深时，只能遍历每个属性来实现监听。vue3.0采用的Proxy，就完全避开了Object.definerProperty方法的这些痛点）

2. vue如何在组件之间进行传值

   props、emit、vuex、路由传参、通过本地存储传参、vue-bus(事件巴士)、 $refs、 $children、$parent

3. vuex和vue的双向数据绑定有什么冲突

   在严格模式下vuex中的state对象中的属性是不能随意更改的，但是在表单处理时使用v-model时用户可以随意更改数据，如果vuex中的state中的属性直接绑在v-model中时会抛出一个错误。解决办法

4. vue-router中的history模式和hash模式的区别

5. 说一下vue的生命周期（回答的时候，顺便说一下哪个钩子函数实现了什么功能）

   beforeCreate:初始化事件，进行数据观测。

   created:data数据进行绑定。

   beforeMount：虚拟DOM替换真实DOM。

   mounted:将DOM元素挂载到页面。

   beforeUpdate: data数据更新之前。

   updated: data数据更新完成之后。

   beforeDestroy:在实例销毁之前调用，所有实例仍可以调用。

   destroyed:在实例销毁之后调用，所有实例被销毁。

6. 路由懒加载的作用

   懒加载即在需要的时候才进行加载，随用随载。在单页面应用中，如果没有应用懒加载，webpack打包后的文件会非常大，导致第一次进入首页时，加载时间过长，不利于用户体验。而运用懒加载可以将页面进行划分，需要的时候才加载页面，可以有效的分担首页所承受的加载压力，有效减少了加载用时。

7. 自定义指令

8. 混入（Mixin）

9. 父子组件生命周期的执行顺序

10. 如何阻止组件间的样式相互干扰

    给style标签添加scoped属性

11. 对虚拟dom的了解，说说实现原理

12. 有用过axios吗？axios是如何设置拦截器的？

13. vue中如何监听数组的变化？

    Object.definerProperty是无法对数组和对象进行劫持监听的，所以vue3.0以下（不包括3.0）版本，对数组的监听是直接重写了push、shift……等Array常用的数组操作。

14. 谈谈keep-alive

15. vue-router路由钩子

16. vue和react的区别

微信小程序

1. 说说微信小程序的生命周期
2. 微信小程序的实现原理
3. 微信小程序的自定义组件
4. 你在微信小程序中遇到什么坑，最后是怎么解决的？
5. 微信小程序是否有可以跳转其他程序的方法

JS

1. 节点的插入操作有哪些
2. 如何解决跨域（如果提到jsonp，一般面试官都会顺嘴问句：jsonp的实现原理）
3. typeOf和instanceOf的区别
4. 如何区别Object和Array
5. 深拷贝和浅拷贝的实现原理，以及为什么要深拷贝
6. 谈谈你对闭包的理解（谈到闭包的话，一般会顺势问到防抖和节流。有些面试官会直接问，有些面试官会说一个试用场景，让你回答用什么方法解决。）
7. 谈谈你对原型链的理解
8. 冒泡和捕获
9. 用js实现一个promise
10. 用js实现new方法
11. websoket的实现原理
12. 直播的推流原理
13. post请求和get请求的区别
14. localStorage、sessionStorage和cookier的区别
15. 简述ajax的过程
16. js数据类型有哪些？
17. 谈谈js原型

css

我的css水平基本在能完成需求，但不算擅长。所以问到我css我都会说对css不太擅长，所以面试官也没有问太多关于css的问题。

1. 给一个盒子水平垂直居中的方法
2. css中的布局有哪些

ES6

1. 箭头函数的作用是什么
2. promise的作用和实现原理
3. async和promise的区别
4. let，const和var的区别

   var存在变量声明提升，var在{}中是没有作用域的，var定义的变量名可以重复命名。而这些let和const都做了限制

5. map和forEach的区别

   map和forEach都能达到遍历数组的目的。不过map会返回一个新的和原来数组长度一样的数组，而forEech没有返回值

算法

个别公司会问到算法题，但大多公司都不会

1. 有16瓶水，其中一瓶有毒，小白鼠喝一滴有毒的水一小时后会死，要在一小时后马上找出来哪瓶水有毒，最少需要几只小白鼠？
2. 25匹马，找出最快的3匹，但是只有5个赛道，每次比赛只能得到5匹马的速度排序，那么最少需要多少次比赛？
3. 请用冒泡排序实现某数组的升序排序

其他

1. 做过哪些性能优化
2. 移动端自适应
3. http和https的区别（个别面试官会问到其中的原理）
4. 代码规范化是否有必要
5. 发布订阅者模式和观察者模式的区别
6. 请写出从“在浏览器输入域名”到“页面静态资源完全加载”的整个流程
7. 堆和栈的区别
8. webpack的优点（有些会问某个具体的配置，比如我就被问了sass解析成css要怎么配置的）
9. 你们公司项目开始到项目结束的流程
10. 对项目架构方面有了解吗？
11. HTML5的新特性都有哪些？

HR面试

对于我而已，感觉最难的不是技术面。而是HR面试，技术面试把知道的都说出来就行了，但是HR回答的时候都有点不知所措，感觉每一个问题都有坑，实话实说不行，说些漂亮话又不会T_T。比如离职原因就很头疼，其实大家都知道离职大多原因是钱没给到位。但是回答的时候总是要避免谈到钱。

1. 为什么要离职
2. 你的偶像是谁？为什么？
3. 你最有成就感的一件事儿是什么？
4. 你觉得你最失败的一件事儿是什么？
5. 当你心情不好的时候，你会怎么办？

结语

其实面试官的问题基本上会根据你的简历和自我介绍来提问，所以自我介绍的时候最好说一下自己擅长什么（自我介绍大概流程：跟面试官问好------>名字、毕业于哪一年、到目前为止有多少年的开发经验------->做过哪些项目、项目中用到了哪些技术栈------> 我个人比较擅长那些技术栈）。

有些面试官会问完一个问题就换另一个问题，但是有一些面试官会一直顺着你的回答一直问下去，直到你回答不出来为止。比如：说说你对MVVM模型的理解。Vue中是如何实现MVVM模型的。Object是如何实现对象的数据绑定的。。。。。。 不同的面试官的侧重点不一样，有些面试官很看重基础会问很多js的基础问题，有些面试官很看重框架会问很多框架实现原理的问题，而另一些比较看重项目架构。

如果各位看官有准备2020年上半年面试的话，按照以上给出的面试题的方向准备准备，应该是不会有太大问题的。最后祝各位都能找到心仪的工作。