5 autres exercices d'interview JavaScript

Suite à mon article précédent, "5 Exercices d'interview JavaScript typiques", cette pièce explore des questions d'entrevue courantes supplémentaires, en se concentrant sur les concepts clés de JavaScript. Plongeons-nous!

Prise des clés:

• Les fermetures sont cruciales: La compréhension des fermetures est essentielle. N'oubliez pas que les valeurs variables dans les fermetures ne sont pas fixées au moment de la création du gestionnaire; Ils reflètent la valeur actuelle lorsque le gestionnaire s'exécute.
• typeof Quirks de l'opérateur: typeof [] Renvoie "Object" "pas" Array ". Utilisez instanceof pour vérifier de manière fiable les types de tableau.
• Mécanique de la boucle d'événements: La boucle d'événement du navigateur gère la file d'attente d'événements. setTimeout(), même avec un délai zéro, fait la file d'attente le rappel pour une exécution ultérieure.
• isPrime() Optimisation de la fonction: Valider toujours les entrées (nombres négatifs, 0, 1 ne sont pas Prime; 2 est le seul Prime même). Tester la divisibilité uniquement jusqu'à la racine carrée de l'entrée améliore considérablement l'efficacité.

Question 1: Fermetures - Le problème classique

Considérez ce code:

var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
    nodes[i].addEventListener('click', function() {
        console.log('You clicked element #' + i);
    });
}

Quelle est la sortie en cliquant sur les premier et quatrième boutons? Pourquoi?

Réponse:

Cela met en évidence le comportement de fermeture. Le code imprimera "Vous cliquez sur l'élément # [nombre de boutons]" deux fois. La variable i est partagée entre tous les gestionnaires d'événements. Au moment où tout bouton est cliqué, la boucle a terminé et i maintient sa valeur finale (le nombre de boutons).

Question 2: Fixation du problème de fermeture

Modifiez le code précédent pour imprimer correctement l'index du bouton (0 pour le premier, 1 pour le second, etc.).

Réponse:

Deux solutions:

Solution 1 (iife):

var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
    nodes[i].addEventListener('click', (function(i) {
        return function() {
            console.log('You clicked element #' + i);
        };
    })(i));
}

Solution 2 (fonction de wrapper):

function handlerWrapper(i) {
    return function() {
        console.log('You clicked element #' + i);
    };
}

var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
    nodes[i].addEventListener('click', handlerWrapper(i));
}

Question 3: Type de données Gotchas

Quelle est la sortie de cela?

console.log(typeof null);
console.log(typeof {});
console.log(typeof []);
console.log(typeof undefined);

Réponse:

<code>object
object
object
undefined</code>

Notez le surprenant "objet" pour les tableaux. Utilisez myArray instanceof Array pour la vérification précise du type de tableau.

Question 4: Ordre de boucle d'événement

Quelle est la sortie et pourquoi?

function printing() {
    console.log(1);
    setTimeout(function() { console.log(2); }, 1000);
    setTimeout(function() { console.log(3); }, 0);
    console.log(4);
}

printing();

Réponse:

<code>1
4
3
2</code>

La boucle d'événement l'explique. Les rappels setTimeout sont en file d'attente, même avec un délai de 0 ms. Ils s'exécutent une fois le thread principal terminé.

Question 5: L'algorithme isPrime()

Écrivez une fonction isPrime(number) qui renvoie true si le nombre est premier, false sinon.

Réponse:

var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
    nodes[i].addEventListener('click', function() {
        console.log('You clicked element #' + i);
    });
}

Cette version optimisée gère la validation d'entrée et vérifie uniquement les nombres impairs jusqu'à la racine carrée.

Conclusion:

Ces exercices couvrent les concepts JavaScript fondamentaux fréquemment testés dans des entretiens. Pratiquez-les pour renforcer votre compréhension et améliorer les performances de vos entretiens.

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!