大厂前端面试|编写高质量代码，# 开始
能在规定时间内写出功能健全、思路清晰、格式规整的代码，这是前端工程师的必备技能，所以面试时必考手写代码。本章将通过多个面试题，讲解前端常考的写代码问题，并总结出高质量代码的关键点。
## 为何要考察
代码是成员的一张脸。如果代码都写不好，那不具备基本的工作能力。所以，面试都要考察手写代码。
而且，实际工作中，多人协同做项目，你自己写不好代码，会影响整个项目。所以，代码写不好，工作找不到。
## 考察重点
- 代码规范性
- 功能完整性
- 鲁棒性
## 注意事项
面试不一定要求在纸上写代码，所以建议带着自己的笔记本电脑去面试，写代码时可以咨询面试官可否在电脑上写。
## 看几个题目
参考视频教程。
### 前端面试中的手写代码考察
在大厂的前端面试中，考察面试者手写代码是一个至关重要的环节。面试官通过这种方式不仅能够验证面试者是否具备在规定时间内编写出功能健全、思路清晰、格式规整代码的能力，而且还能评估面试者的编码风格和代码质量。
#### 为何要考察手写代码
面试官考察手写代码的原因主要有以下几点：
- **代码规范性**：代码的规范性体现了面试者的基础素养和对编程习惯的重视程度。良好的编码习惯能够提高代码的可读性和可维护性，这对团队协作尤为重要。
- **功能完整性**：能够完整实现题目要求的功能，说明面试者对问题的理解深刻，具备解决问题的能力。
- **鲁棒性**：代码的健壮性表明面试者是否能够考虑到边界条件、异常处理等问题，这直接关系到代码在实际工作中的可靠性。
在实际工作中，前端工程师通常需要与其他工程师协同工作，如果一个人的代码质量低下，那么将会影响整个项目的进度和质量。因此，编写高质量的代码是前端工程师必备的技能之一。
#### 考察重点
在手写代码的考察中，通常会注重以下几个方面的内容：
- **代码规范性**：是否遵循一定的编码规范，如命名规范、注释规范等。
- **功能完整性**：是否能够根据题目要求完整实现所需功能。
- **鲁棒性**：代码是否具有异常处理能力，是否能有效预防潜在的运行时错误。
#### 注意事项
面试者在准备手写代码时应当注意以下几点：
- 面试不一定要求在纸上书写代码，因此建议携带笔记本电脑参加面试，以便在面试官允许的情况下在电脑上编码。
- 在编码过程中，可以与面试官进行沟通，以确保自己的解题思路是否正确，或是讨论可能存在的问题。
#### 示例题目解析
面试题目示例是实现一个名为`LazyMan`的类，该类中包含`sleep`和`eat`两个方法，这两个方法支持链式调用。在`eat`方法中，需要打印出吃东西的行为，而`sleep`方法则需要实现等待功能。
具体实现可以分为以下几个步骤：
1. 设计一个`LazyMan`类，其中包含一个队列来存储待执行的任务。
2. 在`eat`方法中，将吃东西的行为作为任务加入到队列中，并实现支持链式调用。
3. 在`sleep`方法中，将等待任务加入队列，并在执行时使用异步操作来实现延时效果。
4. 依次执行队列中的任务，根据`sleep`方法中的延时来控制任务的执行顺序。
示例代码框架如下：
```js
class LazyMan {
private name: string;
private taskQueue: Array<() => void> = [];
constructor(name: string) {
this.name = name;
// 初始化时先执行一个任务，比如打印名称
this.taskQueue.push(() => console.log(`LazyMan is ${name}`));
}
eat(x: string): this {
this.taskQueue.push(() => console.log(`${this.name} eat ${x}`));
return this;
}
sleep(seconds: number): this {
this.taskQueue.push(() => new Promise((resolve) => setTimeout(resolve, seconds * 1000)));
return this;
}
start() {
// 执行任务队列
const runTask = () => {
if (!this.taskQueue.length) return;
const task = this.taskQueue.shift();
if (task instanceof Function) {
task();
} else if (task instanceof Promise) {
task.then(runTask);
}
};
runTask();
}
}
// 使用 LazyMan 类
const me = new LazyMan('双越');
me.eat('苹果').eat('香蕉').sleep(5).eat('葡萄').start();
```
在上述代码中，我们定义了一个任务队列`taskQueue`来存储各种操作，`eat`和`sleep`方法会根据链式调用的习惯返回`this`，从而实现链式调用。在`start`方法中，我们从任务队列中依次取出任务执行，如果是`sleep`中的异步操作，则使用`then`来确保下一个任务在延时结束后执行。
#### 总结
通过面试中手写代码的考察，我们了解了以下几点：
- 面试官着重考察的代码编写能力：代码规范性、功能完整性和鲁棒性。
- 在面试过程中，需要注意的事项：携带笔记本电脑、与面试官沟通思路等。
- 手写代码的实际应用，如实现`LazyMan`类的题目，考察面试者对JavaScript的深入理解和应用能力。
- 通过代码示例，我们学习了如何实现链式调用、任务队列以及如何处理延迟触发。
以上内容便是对前端面试中手写代码部分的详尽解析，面试者若能掌握这些知识点，并在实际面试中灵活运用，将大大增加获得理想工作的机会。
