如何面试前端工程师

「这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战」

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

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

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

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

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

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.map 与 Array.prototype.forEach 的区别
3. 考察候选人对前沿技术的敏感度，如是否答出涉及 ES6+ 甚至 ES2021 的内容等
4. 考察候选人的代码能力，如对一些不清楚 API 的实现 Array.prototype.flat、Promise.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: ...

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

前端面试每日一题

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

如何面试前端工程师

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