极客时间对于推广渠道会有返利优惠,比如山月在极客时间买了一门课,再把课程分享给好友购买,这时极客时间会向山月返利20元左右。
而我现在做了一个返利平台,你可以在上边通过山月的链接购买课程,此时极客时间会向我返利。为了共同学习,而你可以添加我的微信 (shanyue94),我将把极客时间给我的返利发一个红包全部返给你

# 如何面试前端工程师

面试前端一般分为着重基础的面试与着重项目的面试两次,我这里有两个问题是我在公司作为面试官面试候选人喜欢考察候选人的两道问题。

  1. 列举 Number、String、Array、Object、Promise 有哪些 API? (opens new window)
  2. 列举你们项目中使用了哪些依赖/第三方库? (opens new window)

这两个都是开放性问题,阶梯性并区间大,能对候选人水平做很好的区分。

共同点是由一个问题可以引申出更多的问题,而且由于候选人的技术深度和广度不同,往往会依据他们自身的能力,由候选人为主,往不同的面试方向发展。

如果一个候选人一个小时后还在侃侃而谈,那是他没错了,成功晋级下一关。

# 1. 列举 Number、String、Array、Object、Promise 有哪些 API?

先看第一个问题,其实熟读 MDN 即可。

如果候选人回答了一些 API,发问可能还会更加深入其计算机原理,引申出一大堆问题。当然,候选人如果没有提到该 API,发问方向有可能是完全不同的方向。

  • A: Number.isSafeInteger()
  • Q: 最大安全整数是多少?
  • Q: 原理是什么,为什么那个数是最大安全整数?
  • Q: 如果不是最大安全整数会出什么问题。
  • Q: 0.1 + 0.2 是什么问题
  • A: String.fromCharCode()
  • Q: 那 a 的 ASCII 码是多少呢?字符串间比较大小依据的什么呢

全部列举,无论换做谁,都无法一时全部记住。此时可做尽可能多地提醒,如:

  • Q: 如何把嵌套数组平铺展开,如 [1, [2, 3, [4, 5]]] 输出 [1, 2, 3, 4, 5]
  • A: 可以使用 str.flat()

接着问等等...

  • Q: 如何生成一个 100 项全为 0 的数组呢
  • Q: 如何把一个 Iterator 或者类数组转化为数组呢

经过提醒,候选人可以很容易记起该 API,如果记不住呢?

  • Q: 如何把嵌套数组平铺展开,如 [1, [2, 3, [4, 5]]] 输出 [1, 2, 3, 4, 5]
  • A: 可以递归遍历数组进行平铺
  • Q: 写一下代码
  • A: const flatten = list => list.reduce( (a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), [])
  • Q: 那指定层级,比如最多把嵌套 N 4的数组展开你买了常见的有?
  • A: ...

如果候选人提到 str.padEnd(),还可以调侃下前几年的 left-pad 事件,缓释下面试的紧张气氛。

  1. 考察候选人的语言基础,如静态方法和示例方法有什么区别,其实能够答上这道题的人也并不是很多
  2. 考察候选人的基础能力,如 Array.prototype.mapArray.prototype.forEach 的区别
  3. 考察候选人对前沿技术的敏感度,如是否答出涉及 ES6+ 甚至 ES2021 的内容等
  4. 考察候选人的代码能力,如对一些不清楚 API 的实现 Array.prototype.flatPromise.all
  5. 考察候选人的计算机基础,如 0.1 + 0.2 问题 (Number.EPSILON) 等。编码,双字节如 String.prototype.charAt(0)str[0] 的区别,A 的 ASCII 码等

# 2. 列举你们项目中使用了哪些依赖/第三方库?

在项目经验面试时,一般会着重发问候选人对于项目的难点及复杂度的处理逻辑,从而使得候选人的能力能够得到最大化的表现。

但有时一些候选人简历书写能力不达标,100 分的能力在简历上一般只能表现出20分。这个时候需要面试官去挖掘候选人的潜力,那这个问题就特别合适。

面试不是出题难到别人,而是找候选人的亮点

  • Q: 你们使用那些第三方依赖?
  • A: webpack-bundler-analyzer
  • Q: 那你说一说你是如何依赖它优化项目体积的
  • A: eslint/prettier/stylelint
  • Q: 那你们项目时如何更好的格式化校验的,如果有人不遵循规则怎么样
  • A: git hooks
  • Q: 如果 git commit --no-verify 跳过怎么办
  • A: CI
  • Q: 如果你们的 eslint 是后加上去的,每次只想对更新代码做校验如何处理
  • Q: 你们 CI 还做了写什么事情
  • Q: 你们的上线流程是什么样子的
  • Q: ...
  • A: exif-js,用以读取当前照片时横向还是纵向
  • Q: 什么是 EXIF
  • A: 嵌在 JPEG 中的元数据,有光圈、曝光度、GPS...
  • Q: 读取的原理是什么
  • Q: 为了优化图片,是否可以把 EXIF 给抹去
  • A: clipboard.js
  • Q: 你说下剪切板上如何复制内容
  • A: ...
  • Q: 如果想要复制 HTML 带有格式的呢
  • A: xxxxx,我们内部的一个依赖库
  • Q: 如何引入私有库
  • Q: 你们私有库有没有单独的 npm 仓库
  • Q: 这个私有库是做什么的,你有没有参与工作
  • Q: ...
  • A: nodeemail
  • A: juice
  • A: remark
  • A: ...

最后,可以关注下我这个关于面试题的仓库,收集了各互联网大厂的面试题目,目前已经有了六千多道题目。关于面试与内推也可以与我私信交流。

前端面试每日一题 (opens new window)

知乎编辑器真的是一言难尽....上述格式有错乱,可关注我的博客,查看原文链接。

如何面试前端工程师 (opens new window)

觉得不错的话,记得帮我 @山月 点个赞呀,祝大家都能进了大厂!

关于山月

我的项目:
我的微信:shanyue94,欢迎交流
Last Updated: 7/21/2019, 11:25:08 AM