2020年年初前端面试题

8,039 阅读8分钟

前言

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

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

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

框架

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

vue

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

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

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

    propsemitvuex、路由传参、通过本地存储传参、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年上半年面试的话,按照以上给出的面试题的方向准备准备,应该是不会有太大问题的。最后祝各位都能找到心仪的工作。