为了账号安全,请及时绑定邮箱和手机立即绑定

这里有一份 JavaScript 高级面试题,请来回答

2018.03.05 08:59 7549浏览
前言

金三银四

三月份和四月份,一年一度的跳槽旺季又开始了。很多自我的升级都必须通过跳槽来解决,例如想增加薪酬、想换个好一些的平台和环境、想进一线互联网公司、想去创业公司当 CTO 等等。作为前端工程师的你,是否有跳槽的想法?且是否已准备好了?

前端工程师的技术面试分为好多方面,除了本节要讲的 JavaScript 之外,还有 CSS HTML ,以及所有的技术岗位都会考察的工作经验、软技能等。内容这么多,一篇文章肯定盛不下,本文先关注最主要的部分 —— JavaScript 常考的面试题。


什么是“高级”

先不急进入主题,再缩小一下范围 —— 本文只会关注一些 高级 的 JavaScript 面试题。原因就是目前是有工作经验的同学跳槽的旺季,而这部分同学一般基础知识都过关,缺一些高级知识。

那么什么是“高级”?简单说来,就是面试官希望你在具有基础知识、能满足基本开发任务的情况下,还需要具备:了解语言的原理、了解框架的实现、了解环境的变化 —— 有了这些高级知识,你就可以更高效、稳定的编码,你就更靠谱。

现在竞争这么激烈,你不拿出点和别人不一样的真本领,怎么脱颖而出?


题目

下面进入正题,先把题目列一下,根据题目先自己考虑如何回答。注意,这些题目都是分布在不同的知识区域、很具有代表性的题目,并不是瞎拼的。

  • 自己开发的框架或者库,如何使用原型?
  • 目前 JS 对于异步的解决方案有哪些?
  • 常用的 ES6 的语法有哪些?
  • vue 如何解析模板?
  • React 的 setState 为何是异步渲染?
  • hybrid 和 h5 有何区别?

下面会单独针对每个题目做分析,文章内容有限,无法分析到细节,不过我会给出提示和回答的方法。如果你还不是很清楚,可以去参考其他的资料,都是大众的知识点,资料很多,只要你愿意去查。


问题1:自己开发的框架或者库,如何使用原型?

对于 JavaScript 原型的考察,应该算是基础知识的一部分。但是,基础知识考察的只是原型的理论,而高级知识考察的是原型的实际使用。我们使用的绝大部分第三方框架或者库,源码中都有原型的使用。如果你不能熟练使用原型,你能自己写框架或者库?—— 大家应该明白我的意思了吧。

所以,这里要考察的是原型如何在实际的框架和库中去使用。对于这个问题,如果你没有亲自写过框架和库,且对原型不是很熟悉,那么我建议你看一下 jQuery zepto 中是如何使用原型的。这也算是站在巨人的肩膀上吧,毕竟都是如此优秀的库。

jQuery 的资料自己上网去找找吧,给大家推荐一个免费的讲解 zepto 原型的视频资料 《zepto设计和源码分析》


问题2:目前 JS 对于异步的解决方案有哪些?

异步是 JS 永恒的话题,自动 web 2.0 有了 Ajax 开始,到现在 nodejs 盛行,人们就一直没有停止对异步的讨论。大家有没有考虑过为何异步这么受欢迎?—— 因为异步和业务场景的结合实在太紧密了。在复杂的业务场景中,你要能一眼就识别出来哪些是异步,而且要找到最佳的解决方案,否则这里就是一个坑。

这里没有问“JS 中有哪些场景是异步”,因为这个问题如果只回答“图片加载、ajax”等没有什么意义,异步是要结合实际业务说的。因此这里提问异步的解决方案,我列一下,你来看看自己是否都全部了解。

  • deferred (jQuery 或者 zepto 中)—— 注意,这块很多同学不知道,可以多去查查相关资料,因为 jQuery 和 zepto 目前还有很多、很多、很多项目在用!!!
  • Promise(ES6 或者第三方库,如 q.js bluebird.js),不仅要知道怎么用,还要熟悉 Promise 的标准
  • Generator(从 koa 升级 2.x 之后已经不再常用)
  • async/await (ES7 草案)

能说出以上几点,这个问题基本满分。你有哪部分还没了解清楚,赶快去查一下。


问题3:常用的 ES6 的语法有哪些?

不了解 ES6 的同学可以先去看看 《ECMAScript 6 入门》 教程。

虽然目前浏览器对 ES6 兼容性不好,但是 ES6 已经在开发环境很普及了,因此要考察 ES6 的语法。那这个也算是高级知识吗?—— 算!因为 ES6 刚刚普及没多久,总有一些人躺在舒适区、不思进取、不学习新内容,通过 ES6 的考察把他们给刷掉。

看 ES6 的书籍或者博客,内容还是挺多的,但是日常实际使用的功能并没有那么多。这里我列举几个常用的,你对照着去考察自己是否掌握全面

  • Module
  • Class
  • Promise
  • 箭头函数
  • 搭建 ES6 编译环境

附:最后一项“编辑环境”大家一般都使用 webpack ,但是你知道 rollup 吗? React vue 都在使用 rollup ,你如果不知道的话,面试就要丢分了。


问题4:vue 如何解析模板?

不了解 vue 的同学可以先去 vue 官网 看一下相关文档。

作为前端从业者你应该很清楚,现在不知道 vue React 别说是跳槽,校招都不一定能通过,因此了解、使用过 vue React 这已经是基础知识的行列了。这块的高级知识应该升级到对 vue React 的实现是否了解(不用精通各个细节,了解过程即可)?—— 例如本题目,是否了解 vue 如何解析模板?

你可能还会疑问:干嘛要问框架的实现,工作中也用不到啊?我会使用框架不就完了吗? —— 我可以通过一个大家都亲身经历的例子来说服你。

  • 例如,大学招生时都想要智商高、学习能力好的学生,怎么办?—— 高考。除了高考,还有其他更公平的方式吗?
  • 同理,企业想要招聘编程能力强、总结能力好、热爱且持续学习的员工,怎么办?—— 考察框架原理是一个重要而且简单有效的途径。除此之外,大家想想还有什么其他简单高效的手段?

先摆正思想,然后再看这个题目:是否了解 vue 如何解析模板?简单来说,模板解析分位三步

  • 模板就是一段字符串,非结构化的数据,没法分析。因此,第一步是将非结构化的模板字符串,转变成结构化的 JS 对象,抽象语法树,即 AST 。其实就是一个 JS 对象,这样就结构化了。
  • 第二步,将 AST 转换成一个 render 函数,步骤是先转换为一段函数体的字符串,然后再用new Function(...)生成函数。
  • 第三部,渲染时执行 render 函数,返回虚拟 DOM 对象,然后执行虚拟 DOM 的patch方法,渲染成真正的 html 。

以上过程的细节是非常复杂的,要全部写出来都够出半本书了,因此你也没必要啥细节都知道。面试官如果问到你这个问题,只回答这三步过程即可,不用说的太细,否则太啰嗦太耗费时间。


问题5:React 的 setState 为何是异步渲染?

不了解 React 的同学可以先去 React 官网 看一下文档。虽然目前 vue 比较火,但是 React 也绝对不能放过,国内来看,两者还是各有很多用户群体。

这个问题其实很简单,只是很多同学没有考虑到。答案就是:为了防止一次性执行多次setState而带来的渲染性能问题。即,你如果连续不断执行 100 次setState的话,那么 React 是否有必要渲染 100 次?—— 肯定没必要。第一,浏览器会卡死;第二,用户只需要看到最后的结果即可,不用关心前 99 次的过程。

至于为何好多人考虑不到,我也常常思考这种原因。在我看来,如果你长时间不去主动的看博客、看编程方面的新闻、关注新框架,你就会出现这种思想滞后的问题,即“跟不上节奏”。因此,作为相关从业者,大家还是应该多看,然后多想,多问几个为什么。


问题6:hybrid 和 h5 有何区别?

你每天用微信、支付宝、头条等各种 app 看过的信息,有多少是用前端代码(JS CSS HTML)写出来的界面?你知道吗?—— 至少会占到 50% 以上,是否没想象到?

前端代码(JS CSS HTML)参与到 app 中进行混合开发,是目前 app 开发很常见的方式,其中 hybrid 就是应用最广泛的一种解决方案。很多同学没做过 hybrid 开发,但是没做过不是你不会用且不去学习的理由

本题目是面试官考察 hybrid 经常问的一道题,最主要的区别在于:

  • hybrid 是通过file协议加载的本地文件,h5 是通过http协议加载的网络文件,前者速度快。
  • hybrid 是通过为不同版本打包进行更新,而 h5 没有版本的概念,每次都获取服务端的最新版。
  • hybrid 更加依赖于客户端的能力,因此会更多的和客户端通讯,而 h5 基本用不到和客户端通讯。

说出这几个区别,该问题基本 OK 。其中的重点是 hybrid 包版本更新的流程,以及 JS 和客户端通讯的原理。这两者详细讲来的话,内容都很多,因此这里不详细展开了。


关于 nodejs

还有不少同学以为 nodejs 就是 JS 知识体系的一部分,和原型、闭包、vue、React 一样 —— 真的不是!不是!不是!

nodejs 是 server 端的开发技术,并不是前端的,它和前端唯一的交集就是使用了 JS 作为开发语言。而想成为一个合格的 server 端工程师,是只熟悉一门语言的语法就够了的吗?—— 你完全可以花两周轻松熟悉完 php 的语法,但是到时候你就是一名合格的 server 端工程师了吗?

因此,nodejs 不适合在这里讲,多说无益。nodejs 应该另外专门写一篇文章,在那里独霸一方,而不是在这里寄居。


总结

如果一开始拿到题目你已经了解答案,那你很优秀。如果经过本文的分析,你能感觉到这些问题的重要性且开始补习,那再过一段时间你将看到自己的进步。如果经过本文的分析,你对这些问题还是云里雾里,那建议还是多从基础知识抓起,先别急于求成。

各位,加油!共勉!

点击查看更多内容
52人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消