73 lines
4.7 KiB
Plaintext
73 lines
4.7 KiB
Plaintext
---
|
||
title: 前端面试编码问题——如何准备
|
||
description: 准备前端/ Web开发人员面试中的编码问题——了解预期问题、编码技巧和100多个重要的实践问题。
|
||
---
|
||
|
||
编码面试是评估前端工程师的主要方式，可以跨越多轮和多个面试阶段，因此练习编码面试非常重要。 回顾一下，以下是您可能会被问到的三种编码问题类型：
|
||
|
||
- **算法编码**：解决棘手的算法问题，评估您对数据结构、算法和时间复杂性的理解。
|
||
- **JavaScript 编码**：在前端领域中实现与前端开发常用的函数或数据结构相关的 JavaScript。
|
||
- **用户界面编码**：使用 HTML、CSS 和 JavaScript 构建用户界面（组件、小部件、应用程序），有时甚至使用 JavaScript 框架。
|
||
|
||
## 编码环境
|
||
|
||
您可能会被要求使用以下一个或多个环境完成问题的编码：
|
||
|
||
### 在线基本代码编辑器
|
||
|
||
您将得到一个基于浏览器的代码编辑器的 URL。 该编辑器具有实时协作功能，或者您将被要求共享屏幕。 这些基本代码编辑器通常只有一个窗格，因为问题不需要使用多种语言来完成，例如算法/JavaScript 编码问题。 您可能被允许或不被允许执行代码。 在线基本代码编辑器的示例是[CoderPad](https://coderpad.io/)。
|
||
|
||
### 集成开发环境（IDE）
|
||
|
||
基本代码编辑器和 IDE 之间的区别在于 IDE 允许在多个文件之间切换。 它们可以是您笔记本电脑上的原生应用程序，也可以在浏览器中运行。 通常情况下，您会被要求使用 IDE 来构建用户界面，并且需要使用多个文件或键入不止一种语言。 这是可用的最佳环境，因为它与大多数工程师开发的方式非常相似。 在面试官的批准下，您应该能够：
|
||
|
||
- 预览正在进行的用户界面并实时查看更新。
|
||
- 使用浏览器控制台进行调试。
|
||
- 使用 IDE 功能（如语法突出显示、键盘快捷方式、自动完成、智能感知、扩展）提高生产力。
|
||
- 添加任何必要的第三方依赖项。
|
||
|
||
始终选择使用 IDE 如果您被赋予权利选择。
|
||
|
||
在线 IDE 的示例包括[JSFiddle](https://jsfiddle.net/)、[CodePen](https://codepen.io/)、[CodeSandbox](https://codesandbox.io/)和[StackBlitz](https://stackblitz.com/)。
|
||
|
||
### 白板
|
||
|
||
在某些公司，您可能会被要求在白板上编写所有必需的代码。 想象一下没有办法预览在白板上编写的 HTML 和 CSS！ 这是候选人的噩梦，像谷歌和 Meta / Facebook 这样的大型科技公司在面试时已知会这样做。 大多数其他公司要么让您带自己的笔记本电脑，您可以在本地 IDE 或 Web 浏览器中的在线代码编辑器/ IDE 中编码。
|
||
|
||
---
|
||
|
||
下面是各种编码环境的摘要和您可以采取的措施：
|
||
|
||
| 环境 | 预览 | 执行代码 | 添加第三方依赖 |
|
||
| -------------- | ---- | -------- | -------------- |
|
||
| 在线代码编辑器 | 否 | 有时 | 通常否 |
|
||
| IDE | 是 | 是 | 是 |
|
||
| 白板 | 否 | 否 | 否 |
|
||
|
||
## 通用编码提示
|
||
|
||
- 熟悉有用的编辑器键盘快捷键，因为在面试期间时间非常重要，每个按键都很重要。 知道如何：
|
||
- 跳到行首/行尾。
|
||
- 上下移动行。
|
||
- 复制行。
|
||
- 更改符号（变量）名称。
|
||
- 提前了解您将在自己的笔记本电脑、给予您的笔记本电脑还是白板上编码。
|
||
- 如果您将在自己的笔记本电脑上进行编码，并且可以使用自己的 IDE，请确保 IDE 正常运行，正确安装了 Node.js 和 npm，并且可以在 localhost 上运行本地 Web 服务器并在您的浏览器中访问它们。
|
||
- 不要过分依赖代码的预览和执行。 这向您的面试官表明，您不确定自己输入了什么，并进行尝试和错误开发，这不是积极的信号。
|
||
|
||
## 特定类型的提示
|
||
|
||
请继续阅读每种编码面试类型的提示：
|
||
|
||
- [算法编码](/front-end-interview-guidebook/algorithms)
|
||
- [JavaScript 编码](/front-end-interview-guidebook/javascript)
|
||
- [用户界面编码](/front-end-interview-guidebook/user-interface)
|
||
|
||
## 练习问题
|
||
|
||
GreatFrontEnd 有一个长列表的[编码问题](/prepare/coding)，您可以练习并花时间检查它们。
|
||
|
||
请注意，我们在某些问题中特意保持模糊，并没有提出完整的要求。 这是为了训练您提前思考并考虑在解决方案时可能需要注意哪些可能的事项。
|
||
|
||
但是，我们将在解决方案中涵盖尽可能多的方面。 在阅读解决方案时，意识到您错过了某些东西可能会让您感到沮丧，但这是帮助您改进的学习经验。 最好在准备过程中学习，而不是在实际面试中学习。
|