J'ai entendu dire que tu voulais passer un entretien pour le front-end ?

Golden Three Silver Four Season, le front-end a été un domaine brûlant ces dernières années, et l'atmosphère est particulièrement forte, mon ami Xiaowei a interviewé comme un fou récemment et a rencontré de nombreux intervieweurs intéressants et des questions d'interview intéressantes. Aide-moi. Permettez-moi de paraphraser ce garçon fauteur de troubles.

Ce qui suit est l’histoire d’un de mes amis, ce n’est vraiment pas moi.

for (var i = 0; i < 5; i++) {
  console.log(i);
}

"Xiaowei, dis-moi ce que ces lignes de code vont produire ?"

Lorsque l'intervieweur a tapé ces lignes de code dans Sublime, j'étais un peu confus. Palourde? N'est-ce pas la boucle la plus simple ? Y a-t-il un piège ? J'y ai pensé. Cela semble être très similaire à la question de clôture que j'ai vue. L'intervieweur n'a-t-il pas fini de l'écrire ? C'est toxique.

"Il devrait sortir directement 0 à 4...", dis-je faiblement.

"Oui, ne soyez pas nerveux, il n'y a pas de piège dans cette question, je l'écris juste avec désinvolture."

(Excusez-moi ? Intervieweur, êtes-vous là pour être drôle ? Je j'ai peur à mort ! )

"Alors qu'est-ce que tu regardes la sortie de ces lignes de code ?"

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000 * i);}

Euh, qu'est-ce que c'est, pourquoi ce n'est pas la fermeture J'ai mémorisé tellement de fois ? Question, laisse-moi y réfléchir. setTimeout retardera l'exécution, donc lorsque console.log est exécuté, i est en fait devenu 5. Oui, c'est tout. Comment peut-il être si difficile pour moi de faire quelque chose d'aussi simple ?

« Il devrait commencer à produire un 5, puis à produire un 5 toutes les secondes, un total de 5 5 s. »

« Oui, comment devrait-il être modifié pour produire 0 à 4 » ?

Enfin c'est quelque chose que je connais, il suffit d'ajouter une fermeture et c'est résolu, c'est stable !

for (var i = 0; i < 5; i++) {
  (function(i) {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })(i);
}

« Très bien, pouvez-vous me dire ce qui se passera si je supprime ce i ? »

for (var i = 0; i < 5; i++) {
  (function() {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })(i);
}

« Dans ce cas, i n'est pas réellement maintenu en interne. il affichera en fait 5. "

"Très bien, laissez-moi le changer pour vous et voir quel sera le résultat ?"

for (var i = 0; i < 5; i++) {
  setTimeout((function(i) {
    console.log(i);
  })(i), i * 1000);
}

Hmm ? Qu'est-ce qui se passe, laisse-moi y réfléchir. Ici, une fonction d'exécution immédiate est transmise à setTimeout. Eh bien, setTimeout peut accepter des fonctions ou des chaînes comme paramètres, alors quelle est la fonction d'exécution immédiate ici ? Elle doit être indéfinie, ce qui équivaut à :

setTimeout(undefined, ...);

et la fonction d'exécution immédiate s'exécutera immédiatement, alors elle devrait être émis immédiatement.

"Il devrait afficher 0 à 4 immédiatement."

"Oh, pas mal, la dernière question, tu connais Promesse ?"

"C'est bon... "

"OK, alors essayez cette question"

setTimeout(function() {
  console.log(1)
}, 0);
new Promise(function executor(resolve) {
  console.log(2);
  for( var i=0 ; i<10000 ; i++ ) {
    i == 9999 && resolve();
  }
  console.log(3);
}).then(function() {
  console.log(4);
});
console.log(5);

WTF ! ! ! ! Je veux me taire !

Cette question devrait examiner le mécanisme d'exécution de mon JavaScript. Laissez-moi mettre de l'ordre dans ma réflexion.

Première rencontre avec setTimeout, donc une minuterie sera définie en premier, et une fois la minuterie terminée, la fonction sera transmise et placée dans la file d'attente des tâches, donc 1 ne sera certainement pas sorti au début.

Ensuite, il y a une promesse, la fonction à l'intérieur est exécutée directement, elle devrait donc afficher 2 3 directement.

Ensuite, le then de Promise doit être placé à la fin de la tick actuelle, mais toujours dans la tick actuelle.

Par conséquent, 5 doit être affiché en premier, puis 4 .

Enfin, le tick suivant est 1 .

«2 3 5 4 1»

«D'accord, attendons la prochaine série d'entretiens.»

Tellement facile ! Maman n'a plus à se soucier de mes entretiens.