Un total de 5024 mots, il faut 6 minutes pour lire et 2 minutes pour accélérer la lecture. Cet article a été publié pour la première fois dans la colonne frontale de Zhihu. Comme écrit précédemment, l'auteur a interviewé des centaines d'ingénieurs front-end pendant plus de 2 ans en tant qu'intervieweur. J'ai été surpris de constater que plus de 80 % des candidats n'ont même pas répondu à la question suivante. De quel genre de question d’entretien magique s’agit-il ? Quelles capacités examine-t-il chez les candidats ? Quelles implications cela a-t-il pour vous qui lisez cet article ? Laissez-moi vous parler lentement (recommandation pertinente "Questions d'entretien front-end")
Recrutement d'ingénieurs front-end, en particulier de milieu à Ingénieurs front-end seniors, une base JS solide est absolument nécessaire. Les ingénieurs avec une base faible seront très probablement impuissants face à divers problèmes de développement front-end. Lors de l'examen de la fondation JS du candidat, je fournis souvent le code suivant et je demande ensuite au candidat d'analyser les résultats de son fonctionnement réel :
for (var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(new Date, i);
}, 1000);
}
console.log(new Date, i);Ce code est très court, seulement 7 lignes je pense, il peut les étudiants. En lisant ceci, je n'ai probablement pas besoin d'expliquer ligne par ligne ce que fait ce code. Les résultats donnés par les candidats face à ce code sont également différents. Voici les réponses typiques :
0,1,2,3,4,5； 5,0,1,2,3,4;5,5,5,5,5,5; Tant que vous avez une bonne compréhension de la différence entre le code synchrone et asynchrone en JS, la portée des variables, la fermeture et autres concepts, vous saurez que la bonne réponse est C, La sortie réelle du code est :
2017-03-18T00:43:45.873Z 5
2017-03-18T00:43:46.866Z 5
2017-03-18T00:43:46.868Z 5
2017-03-18T00:43:46.868Z 5
2017-03-18T00:43:46.868Z 5
2017-03-18T00:43:46.868Z 5Ensuite, je demanderai : Si nous sommes d'accord, utilisez une flèche pour indiquer un intervalle de temps d'une seconde entre les deux sorties avant et après, et une virgule pour indiquer les deux sorties avant et après. L'intervalle de temps entre elles peut être ignoré. Comment décrire les résultats réels de l'exécution du code ? Il y aura les deux réponses suivantes :
5 -> 5 -> 5 -> 5 -> 5, c'est-à-dire qu'il y a un intervalle d'une seconde entre chaque B. 40% des personnes le décriront comme : </pre>
<li>, c'est-à-dire que les 5 premiers sont sortis directement, et après 1 seconde, 5 5 sont sortis <code class="code">5 -> 5,5,5,5,5
, comment modifier le code ? Les étudiants qui sont familiers avec les fermetures peuvent rapidement trouver les solutions suivantes : 5 -> 0,1,2,3,4
for (var i = 0; i < 5; i++) {
(function(j) { // j = i
setTimeout(function() {
console.log(new Date, j);
}, 1000);
})(i);
}console.log(new Date, i);var output = function (i) {
setTimeout(function() {
console.log(new Date, i);
}, 1000);
};
for (var i = 0; i < 5; i++) {
output(i); // 这里传过去的 i 值被复制了
}
console.log(new Date, i);for (let i = 0; i < 5; i++) {
setTimeout(function() {
console.log(new Date, i);
}, 1000);
}
console.log(new Date, i);接着上文继续追问：如果期望代码的输出变成 看到这里，部分同学会给出下面的可行解： 不得不承认，这种做法虽粗暴有效，但是不算是能额外加分的方案。如果把这次的需求抽象为：在系列异步操作完成（每次循环都产生了 1 个异步操作）之后，再做其他的事情，代码该怎么组织？聪明的你是不是想起了什么？对，就是 Promise。 可能有的同学会问，不就是在控制台输出几个数字么？至于这样杀鸡用牛刀？你要知道，面试官真正想考察的是候选人是否具备某种能力和素质，因为在现代的前端开发中，处理异步的代码随处可见，熟悉和掌握异步操作的流程控制是成为合格开发者的基本功。 顺着下来，不难给出基于 Promise 的解决方案（既然 Promise 是 ES6 中的新特性，我们的新代码使用 ES6 编写是不是会更好？如果你这么写了，大概率会让面试官心生好感）： 相比而言，笔者更倾向于下面这样看起来更简洁的代码，要知道编程风格也是很多面试官重点考察的点，代码阅读时的颗粒度更小，模块化更好，无疑会是加分点。 读到这里的同学，恭喜你，你下次面试遇到类似的问题，至少能拿到 80 分。 我们都知道使用 Promise 处理异步代码比回调机制让代码可读性更高，但是使用 Promise 的问题也很明显，即如果没有处理 Promise 的 reject，会导致错误被丢进黑洞，好在新版的 Chrome 和 Node 7.x 能对未处理的异常给出 Unhandled Rejection Warning，而排查这些错误还需要一些特别的技巧（浏览器、Node.js）。 既然你都看到这里了，那就再坚持 2 分钟，接下来的内容会让你明白你的坚持是值得的。 多数面试官在决定聘用某个候选人之前还需要考察另外一项重要能力，即技术自驱力，直白的说就是候选人像有内部的马达在驱动他，用漂亮的方式解决工程领域的问题，不断的跟随业务和技术变得越来越牛逼，究竟什么是牛逼？建议阅读程序人生的这篇剖析。 回到正题，既然 Promise 已经被拿下，如何使用 ES7 中的 async await 特性来让这段代码变的更简洁？你是否能够根据自己目前掌握的知识给出答案？请在这里暂停 1 分钟，思考下。 下面是笔者给出的参考代码： 感谢你花时间读到这里，相信你收获的不仅仅是用 JS 精确控制代码输出的各种技巧，更是对于前端工程师的成长期许：扎实的语言基础、与时俱进的能力、强大技术自驱力。 推荐教程：《JS教程》 Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!0 -> 1 -> 2 -> 3 -> 4 -> 5，并且要求原有的代码块中的循环和两处 console.log 不变，该怎么改造代码？新的需求可以精确的描述为：代码执行时，立即输出 0，之后每隔 1 秒依次输出 1,2,3,4，循环结束后在大概第 5 秒的时候输出 5（这里使用大概，是为了避免钻牛角尖的同学陷进去，因为 JS 中的定时器触发时机有可能是不确定的，具体可参见 How Javascript Timers Work）。for (var i = 0; i < 5; i++) {
(function(j) {
setTimeout(function() {
console.log(new Date, j);
}, 1000 * j); // 这里修改 0~4 的定时器时间
})(i);
}
setTimeout(function() {
// 这里增加定时器，超时设置为 5 秒
console.log(new Date, i);
}, 1000 * i);Copier après la connexionconst tasks = [];
for (var i = 0; i < 5; i++) { // 这里 i 的声明不能改成 let，如果要改该怎么做？
((j) => {
tasks.push(new Promise((resolve) => {
setTimeout(() => {
console.log(new Date, j);
resolve(); // 这里一定要 resolve，否则代码不会按预期 work
}, 1000 * j); // 定时器的超时时间逐步增加
}));
})(i);
}
Promise.all(tasks).then(() => {
setTimeout(() => {
console.log(new Date, i);
}, 1000); // 注意这里只需要把超时设置为 1 秒
});Copier après la connexionconst tasks = []; // 这里存放异步操作的 Promise
const output = (i) => new Promise((resolve) => {
setTimeout(() => {
console.log(new Date, i);
resolve();
}, 1000 * i);
});
// 生成全部的异步操作
for (var i = 0; i < 5; i++) {
tasks.push(output(i));
}
// 异步操作完成之后，输出最后的 i
Promise.all(tasks).then(() => {
setTimeout(() => {
console.log(new Date, i);
}, 1000);
});Copier après la connexion追问 3：ES7
// 模拟其他语言中的 sleep，实际上可以是任何异步操作
const sleep = (timeountMS) => new Promise((resolve) => {
setTimeout(resolve, timeountMS);
});
(async () => { // 声明即执行的 async 函数表达式
for (var i = 0; i < 5; i++) {
await sleep(1000);
console.log(new Date, i);
}
await sleep(1000);
console.log(new Date, i);
})();Copier après la connexion总结
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
