2021-08-30-a-glimpse-into-front-end-interviews

确保翻译不显得太生硬。确保翻译注释。
这个文件是用Markdown格式写的。不要把它当作XML或HTML。
不要翻译任何[!NOTE]、[!WARNING]、[!TIP]、[!IMPORTANT]或[!CAUTION]。
不要翻译任何实体，如变量名、函数名、类名，或占位符如@@INLINE_CODE_x@@或@@CODE_BLOCK_x@@，但保留它们在文件中。
不要翻译任何URL或路径，但保留它们在文件中。
请从左到右写输出。

标题：前端面试一览
slug：a-glimpse-into-front-end-interviews
作者：Kai Li
作者职位：Stripe软件工程师，前Quora员工
作者链接：https://github.com/li-kai
作者头像链接：https://github.com/li-kai.png
标签：[前端，LeetCode]
隐藏目录：true

初窥前端面试流程及常见问题。

面试流程

申请前端工程师职位与申请软件工程师职位非常相似，但面试内容可能会有很大不同。根据我的经验，每家公司通常会有3到4轮面试。其中大部分会考察JavaScript知识以及对Web开发技术的讨论，其余部分则涉及算法或行为面试。

我发现一个有趣的现象是：公司越年轻，面试中关于JavaScript的问题就越多。这可能是因为专门招聘前端工程师还算是个相对较新的趋势。而一些老牌公司过去只招软件工程师，完全不区分他们专注的是后端还是前端。

JavaScript环节

在我面试过的所有公司中，JavaScript都是重点考察的内容。这一点很合理，因为如今前端工作几乎完全依赖JavaScript。得益于组件库等工具，HTML和CSS知识已经不再是必需了。

JavaScript细节知识

为了通过某些公司的面试，你可能需要复习一下JavaScript的一些细节知识。比如变量提升、稀疏数组、非严格模式以及switch语句的穿透现象等话题都曾出现过。虽然我觉得掌握这些细节并不能决定谁是更优秀的工程师，但这就是现实。这里是我的JavaScript速查表。

JavaScript主题

在第一轮评估之后，现场面试往往会考察更高级的JavaScript概念，比如事件循环、Promise、async/await、作用域和闭包等。

如果你已经写过一段时间的JavaScript应用，并且遇到过各种各样的场景，那么这部分内容应该不会太难。

我遇到过最多的一道题是实现debounce和throttle：

function debounce(fn, duration) {
  let id;
  return function (...args) {
    if (id) {
      // reset timeout and prevent it from triggering
      // if debounced function is called within duration
      clearTimeout(id);
    }
    id = setTimeout(() => {
      fn(...args);
    }, duration);
  };
}

function throttle(fn, duration) {
  let id;
  return function (...args) {
    if (id) {
      // if throttled function is called within duration,
      // do nothing
      return;
    }

    fn(...args);

    id = setTimeout(() => {
      id = null; // release "lock"
    }, duration);
  };
}

// usage example
const helloWorld = () => {
  console.log('hello world');
};
const debouncedHelloWorld = debounce(helloWorld, 1000);
const throttledHelloWorld = throttle(helloWorld, 1000);
​

第二多的一道题则是实现一种类似顺序执行的Promise.all：

function sequential(data, fetcher) {
  const helper = (index, results) => {
    if (index === data.length) {
      return results;
    }
    return fetcher(data[index]).then((datum) => {
      results.push(datum);
      return helper(index + 1, results);
    });
  };

  return helper(0, []);
}

// usage example
const fetcher = (i) => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(i), 1000);
  });
};
sequential([1, 2, 3], fetcher);
​

讨论环节

Web开发工具

无论我们如何试图否认，Web开发工具的生态系统正变得越来越复杂多样。

小型公司，尤其是初创企业，需要对这些工具有深入了解的工程师。而大公司则会把工具的复杂性抽象掉，除非岗位本身要求深入理解工具。

因此，Webpack和Babel这样的Web开发工具成了常见的讨论话题。

要很好地理解Webpack这类工具，你需要能解释以下概念：

• 什么是打包
• 什么是树摇
• 什么是懒加载以及为什么它很重要
• 加载器的工作原理

React或首选Web框架

如果岗位要求掌握React，你可能需要回答或编写React组件。如果你没有React经验，也可以使用其他框架，前提是你能清楚地解释背后的工作原理。

这可能包括现场实现某个功能，或者简单地回答、解释一些React概念，比如useEffect's dependencies array or shouldComponentUpdate。

工作经验

除了前面提到的两个话题，面试官还可能深入探讨你简历上一两件他们觉得有意思的事情，让你进一步展开说明。

因为我有过编写Babel插件和jscodeshift代码修改的经验，所以我向他们展示了我是如何利用这些工具来改进公司代码库的。

实现环节

在我的所有面试中，只有两次被要求实现某个功能。这并不是常见的问题，但确实有可能碰到。

这主要取决于你对HTML和CSS等基础知识，以及对工具和框架的熟悉程度。举个例子，我曾经被问到实现一个类似谷歌的自动补全搜索框。如果你之前做过类似的项目，一小时内完成应该是没问题的。

实现环节的感觉很像算法题，因为你需要一边积极寻找最佳解决方案，一边大声思考并解释你的决策过程。

算法环节

作为软件工程师，我们对算法题并不陌生。LeetCode和Hackerrank是常用的练习资源。

因为我知道这是我的弱项，所以我花最多时间在这上面。有点讽刺的是，我选择了Python而不是JavaScript作为解决算法题的语言。JavaScript缺乏原生的最小堆和二分查找实现，让它成了稍差的选择。

对于刚刚开始学习Python或者重新拾起Python的人，这里是我的Python速查表。

结语

前端软件工程师的职位与普通软件工程师的职位差别不大，但确实更专业化，某种程度上甚至需要付出更多努力。

如果你对这个领域充满热情，对自己的工作感兴趣，那么这并不会是个太大的挑战。希望我的经验和建议对你有所帮助，祝你在求职路上一切顺利！

免责声明：
本文档采用基于机器的 AI 翻译服务进行翻译。尽管我们力求准确，但请注意，自动翻译可能存在错误或不准确之处。应以原文语言版本的文档作为权威依据。如需获取关键信息，建议使用专业的人工翻译。对于因使用本翻译而产生的任何误解或误读，我们概不负责。