前端编码面试

编码面试是评估前端工程师的主要方式，并且可能跨越多轮和面试阶段，因此为编码面试进行练习非常重要。

总而言之，您可以被问到以下三种类型的编码问题：

• 算法编码：解决棘手的算法问题，评估您对数据结构、算法和时间复杂度的理解。
• JavaScript 编码：用 JavaScript 实现与前端领域相关的函数或数据结构，并在前端开发过程中常用。
• 用户界面编码：使用 HTML、CSS 和 JavaScript 构建用户界面（组件、小部件、应用程序），有时甚至使用 JavaScript 框架。

编码环境

您可能需要使用以下一个或多个环境完成问题编码：

在线基本代码编辑器

您将获得一个浏览器内代码编辑器的 URL。 该编辑器具有实时协作功能，或者您将被要求共享您的屏幕。 这些基本代码编辑器通常只有一个窗格，因为问题不需要使用多种语言来完成，例如算法/JavaScript 编码问题。 您可能被允许也可能不被允许执行您的代码。 在线基本代码编辑器的示例是 CoderPad。

集成开发环境 (IDE)

基本代码编辑器和 IDE 之间的区别在于，IDE 允许在多个文件之间切换。 它们可以是在浏览器中，也可以是您笔记本电脑上的原生应用程序。 当您必须构建用户界面并且必须使用多个文件或键入不仅仅是一种语言时，通常会要求您使用 IDE。 这是可用的最佳环境，因为它与大多数工程师的开发方式非常相似。 在面试官的批准下，您应该能够：

• 预览正在进行中的 UI 并实时查看更新。
• 使用浏览器控制台进行调试。
• 使用 IDE 功能，如语法高亮显示、键盘快捷键、自动完成、智能感知、扩展来提高您的工作效率。
• 添加任何必要的第三方依赖项。

如果可以选择，请始终选择使用 IDE。

在线 IDE 的示例包括 JSFiddle、CodePen、CodeSandbox 和 StackBlitz。

白板

在某些公司，您可能需要直接在白板上编写所有必需的代码。 想象一下在白板上编写 HTML 和 CSS，而无法预览它！ 这对候选人来说是一场噩梦，像谷歌和 Meta/Facebook 这样的大型科技公司都知道在现场面试中这样做。 大多数其他公司要么让您自带笔记本电脑，然后在本地 IDE 或 Web 浏览器中的在线代码编辑器/IDE 上进行编码。

---

以下是各种编码环境的摘要以及您可以执行的操作：

一般编码技巧

• 熟悉有用的编辑器键盘快捷键，因为在面试期间时间至关重要，并且每次按键都很重要。 知道如何：
  • 跳转到行首/行尾。
  • 将行上移/下移。
  • 复制一行。
  • 轻松重命名符号。
• 事先了解您是否将在自己的笔记本电脑、给您的笔记本电脑或白板上进行编码。
  • 如果您将在自己的笔记本电脑上进行编码并且可以使用自己的 IDE，请确保 IDE 正常运行，Node.js 和 npm 已正确安装，并且您可以在 localhost 上运行本地 Web 服务器并在浏览器中访问它们。
• 不要过分依赖代码的预览和执行。 这向您的面试官表明您不确定自己输入的内容，并且通过反复试验进行开发，这不是一个积极的信号。

特定于类型的提示

请继续阅读有关每种编码面试类型的提示：

• 算法编码
• JavaScript 编码
• 用户界面编码

练习题

GreatFrontEnd 有一个很长的编码问题列表，您可以练习，您绝对应该花时间查看它们。

请注意，我们在某些问题中故意含糊不清，并且没有在问题中呈现完整的需求。 这是为了训练您提前思考并考虑在处理解决方案时可能需要注意的事项。

但是，我们将在解决方案中尽可能多地涵盖。 在阅读解决方案时意识到您遗漏了一些东西可能会令人沮丧，但这是一个学习体验，最终目标是帮助您改进。 最好在准备期间学习，而不是在实际面试期间学习。