详细了解技术面试的重要部分、编码任务和提示。每日分享最新，最流行的软件开发知识与最新行业趋势，希望大家能够一键三连，多多支持，跪求关注，点赞，留言。

去年我参与了很多技术面试，在这篇文章中，我想分享一下我的经验。

每次面试的第一步都是准备。这是一个非常重要的部分，它从阅读候选人的简历开始。它不应该很长，但应该包含有关候选人在他以前的地方的成就和他的技术技能的所有主要信息。检查简历是否包含有关目标职位所需技能的信息非常好。如果有不清楚的地方，可以在面试前让 HR 把这些问题弄清楚。

当我把所有的基本信息都搞清楚后，我就开始为应聘者思考问题和实际任务。理论问题应涵盖所有目标领域，从编程的一般知识到基于目标职位需求的具体事物：目标编程语言知识、编程范式、开发流程、CI/CD 流程、基于目标技术栈的框架等。

编码技能也很重要，因此根据需求准备一些实际任务将非常有用。这将帮助我们检查候选人的编码技能，以及他如何理解需求并在有不清楚的地方提出问题。

我们可以将面试分为几个部分：

介绍
候选人的自我介绍
主要部分：技术和软技能检查
问题和解答
介绍
每次采访都以介绍开始。我正在介绍我自己和我的公司，并询问一些有关连接质量的问题（如果我们谈论的是在线面试）。然后是闲聊的时间。我们可以谈论任何事情，天气、音乐或旅行。这种闲聊的想法是创造一个良好而温暖的氛围并减少焦虑水平。

对于大多数候选人来说，技术面试总是很紧张，对一些人来说压力很小，而对另一些人来说，压力很大。我们的闲聊有助于我们放松一点。5分钟就足够了。

候选人的自我介绍
下一步是候选人的自我介绍。通常，需要 5-8 分钟。在这一部分中，候选人谈到了他的经历、他以前的项目、他扮演的角色以及他的职责。我想问一些额外的问题，例如，你上一个项目中最具挑战性的任务是什么，候选人是如何解决的？这有助于我创建一个总体图片。

主要部分：技术和软技能检查
最大的部分是检查技术技能。在准备过程中，我们创建了一个问题列表，这对我们很有帮助。我们已经知道要问什么了。很多时候，我会将这次谈话与一些实际任务结合起来。我们可以讨论一些主题，然后我提出一个小的编码任务来从实际的角度检查讨论的区域。

有时我会围绕编码挑战进行对话。对于一些候选人来说，这样的形式比理论讨论更容易。当然，您经常需要即时更新讨论场景，因为在对话期间，您了解需要更深入地讨论其他或相同的事情。

问题和解答
这是最后一步。最后，我会花 5-10 分钟回答候选人的问题。我认为这也是一个非常重要的部分，因为被采访者想知道一些关于潜在项目或公司的额外信息。这也是了解候选人如何提问的好时机。这对我们很重要，因为在我们的日常工作中，我们需要问很多问题：向我们的团队成员、我们的设计师和项目经理澄清很多事情或要求。

那是受访者的最后一部分，但不是我们的。因为在面试之后，非常重要的一步是向 HR 团队提供反馈。您需要分析面试及其进展情况，提供复杂信息，描述候选人的技能、技术和软实力，并提供有关他差距的信息。

而且，您需要为候选人提供建议。他们需要改进什么以及在哪里可以找到这些信息。

我更喜欢在面试时写笔记；这有助于我稍后编写反馈。

JavaScript 实践任务示例
每次我都需要考虑要分配哪些实际任务。这个阶段对我们来说非常重要。我们需要检查我们的编码技能、思维方式以及创建良好可理解代码的能力。而这一切都是在现场会议期间进行的。在大多数情况下，我将实际任务分为两部分：JS Core 任务和React任务（因为我专门研究这个库）。

之前我在面试的时候尝试过在脑海中创建任务，但这不是一个很有效的方法，因为我需要集中精力讨论，没有能力去思考代码。

所以这就是为什么我创建了几个任务并将它们用于我的大部分采访中，并针对每个特定案例进行了变化。

我总是建议在原生 JS 中完成 2-3 个编码任务，以了解候选人如何理解主要的 JavaScript 概念。了解任何框架或库是非常好的，但如果没有完善的 JS Core 知识，则无法成为成功的开发人员。

任务 1. 反词。
这是一个简单的任务，主要思想是创建将反转目标短语中的单词的逻辑。例如，我们有这句话：This is an example!。反转变体将是sihT si na !elpmaxe. 在这里，我们可以检查候选人如何知道数组和数组方法。我们如何实现这一点的方法之一：

function reverseWords(str) {
return str.split(' ').map((item) => {
return item.split('').reverse().join('');
}).join(' ')
}

// shorter variant
const reverseWords = str => str.split(" ").map((item) => item.split("").reverse().join("")).join(' ');

任务二、事件循环知识
这是一项理论上的任务，我们可以要求我们查看日志的顺序。假设我们有这段代码：

console.log('1');

setTimeout(function(){
console.log('2')
}, 0)

function test() {
console.log('3');
}

test();
Promise.resolve().then(function(){console.log('4')})
console.log('5')

正确的顺序console.log是1, 3, 5, 4, 2. 前 3 个数字很简单。但是接下来我们会看到4。这是因为promise会在一个事件循环中被推送到微任务队列中，并且这个队列在宏任务之前具有更高的优先级。最后我们有 2 个超时。

任务 3. 'This' 关键字
这个小任务有助于检查候选人对this关键字的理解。它是如何工作的，以及我们如何使用它。这是代码：

const object = {
name: 'John Cohnor',
printName() {
console.log(this.name);
}
}
object.printName(); // what we will see here

const printName = object.printName;

printName(); // what we will se in console here

有2个问题。我们将在object.printName().此处看到的内容称为方法printName，并且this是指向对象的点——正确答案是John Cohnor。在下一行中，我们将方法保存到新变量中，然后调用它。在这种情况下，我们将失去上下文，我们将 se undefined。为了解决这种情况，我们可以绑定上下文，const printName = object.printName.bind(object)或者我们可以使用call/apply并调用具有正确上下文的函数printName.apply(object)

任务 4. JS Core + DOM
下一个任务是在 Vanilla JS 中实现一个简单的计时器。了解候选人如何与 HTML 元素进行交互。我们有一个现有的 HTML 布局。这个想法是创建一个计时器。当我们点击Start计时器应该启动时，我们会在显示屏中看到每秒计数，并且Start按钮转换为Pause。所以我们可以点击Pause，计时器会暂停。然后我们可以点击Resume，时间会继续。Stop按钮将停止计时器并将显示重置为初始值 0。

<div>
<div id="display">0</div>
<button id="start">Start</button>
<button id="stop">Stop</button>
</div>

基本解决方案驾驶室采用命令式风格。对于更有经验的开发人员，我们可以尝试要求使用更有趣的方法。使用 OOP 等...
const DEFAULT = 0;
const display = document.getElementById('display')
const startButton = document.getElementById('start')
const stopButton = document.getElementById('stop')

let interval;
let timer = 0;

function handleStartClick () {
if(/Start|Resume/.test(startButton.textContent)) {
startButton.textContent = 'Pause';
interval = setInterval(() => {
timer += 1;
display.textContent = timer;
}, 1000);
} else {
clearInterval(interval);
startButton.textContent = 'Resume';
}
}

function handleStopClick () {
clearInterval(interval);
startButton.textContent = 'Start';
display.textContent = 0;
timer = 0;
}
startButton.addEventListener('click', handleStartClick);
stopBut
任务 5. 数组
在这里，我们有一组员工及其 id、姓名和直线经理的 id。任务是创建一个函数，该函数应采用员工的初始数组和 id，并返回层次结构中所有经理 id 的数组。

初始数组：

Jconst employees = [

{ employeeId: 11, name: 'John', managerId: 11 },
{ employeeId: 50, name: 'Todd', managerId: 73 },
{ mployeeId: 150, name: 'Alex', managerId: 200 },
{ employeeId: 73, name: 'Sara', managerId: 11 },
{ employeeId: 200, name: 'Alex', managerId: 50 },
{ employeeId: 100, name: 'Alex', managerId: 150 },
];

它应该如何工作：

getManagers(employees, 200)应该返回层次结构中的经理 ID 数组[50, 73, 11]

getManagers(employees, 11)应该返回[11]

如果没有经理 - 那么应该返回一个空数组[]

此任务的简单实现可以基于递归

function getManagers(employees, id) {
const result = [];

function findManager(employees, id) {
const targetEmployee = employees.find((item) => item.employeeId === id);

if (!targetEmployee) return;
if (targetEmployee.managerId !== id) {
result.push(targetEmployee.managerId);
findManager(employees, targetEmployee.managerId);
} else if (!result.includes(targetEmployee.managerId)) {
result.push(targetEmployee.managerId);
}
}

findManager(employees, id);
return result;
}

反应编码任务
正如我提到的，我是 React 堆栈方面的专家，我还建议在这个堆栈中执行 1-2 个编码任务。

任务 1. 获取数据并渲染的组件
这很容易。我想看看候选人如何创建组件、使用钩子（如果我们谈论函数式组件）以及创建简单的逻辑。接下来是描述：我们需要创建一个组件，该组件应该在组件挂载上调用一些假 API，获取数据并渲染它。

考生可以使用任何方法，它可以是类组件或函数式。考生可以使用“fetch”或“Axios”。更有经验的开发人员可以尝试将逻辑获取到自定义挂钩。我认为这是一个很好的起点，看看候选人是否可以使用 React

任务 2 - 具有某些交互的组件
在这个任务中，我给出了下一个组件：

const Component = () => {
return (
<>
<input type="number" placeholder="Please type any number from 0 to 9" />
<select />
<span>You select number: </span>
<button disabled>Show selected option</button>
</>
);
};

接下来是这个任务的描述：

我们可以输入input从 0 到 9 的任何数字。
根据我们输入的数字，input我们将在select相应的选项数量中看到。用户可以选择select中的任何选项。
选择任何选项后button变为启用。我们可以单击它并查看span我们选择了哪个选项。在这样的点击之后，所有组件都应该移动到初始状态。
任务 3 - 秒计数器
接下来是描述：我们有 3 个小组件：input和 2buttons和 main 组件Countdown。我们需要实现一个计数器，它会每秒从输入的数字倒计时到 0：

const Countdown = () => {
return (
<>
<div>Countdown: <span>{"place for countdown"}</span></div>
<div>
<InputCount />
</div>
<div>
<PauseResumeButton />
</div>
<div>
<CancelButton />
</div>
</>
);
};

const InputCount = () => {
return <input placeholder="Please set time" />;
};

const PauseResumeButton = () => {
return <button>Start</button>;
};

const CancelButton = () => {
return <button>Cancel</button>;
};

有2个子任务：

我们可以输入以秒为单位的输入时间，从 1 到 60，例如 10。然后我们点击Start按钮，计数器开始从 10 到 0 每秒计数一次，显示部分显示出来。计数期间按钮上的文本Start应更改为Pause。当我们点击Pause- 倒计时暂停，Pause按钮变为Continue。单击Continue应该继续倒计时，并且按钮再次变为Pause。当倒计时为 0 - 应停止计数并且按钮返回默认状态。
单击Cancel应立即重置任何阶段的计数并将按钮设置为默认值。
最后一个任务有点棘手。看起来很简单，但也有一些困难的地方。

我希望这个故事对同样参与面试过程的人有所帮助。