Geekly articles weekly

5 tâches typiques pour les interviews JavaScript: analyse et solutions



Par un traducteur: Nous avons publié pour vous un article de Maria Perna (Maria Antonietta Perna), qui parle de tâches typiques en JavaScript , le plus souvent proposé aux demandeurs d'emploi-développeurs lors des entretiens. L'article sera utile principalement aux programmeurs débutants. Vous trouverez ci-dessous des exemples de résolution de problèmes, s'il vous semble qu'ils ne sont pas trop bons, et qu'il existe une meilleure option - suggérez une alternative dans les commentaires.

Les entrevues dans les entreprises technologiques sont depuis longtemps un synonyme. Cela n'est pas surprenant - une entrevue réussie vous donne la possibilité d'obtenir un bon emploi. Mais ce n'est pas si simple, car il est souvent nécessaire de résoudre des problèmes complexes.

Et le plus souvent, la plupart de ces tâches ne sont pas liées au travail que le demandeur effectuera, mais elles doivent encore être résolues. Parfois, vous devez le faire sur le tableau, sans vérifier avec Google ou toute autre source. Oui, la situation évolue progressivement et dans certaines entreprises, ils refusent de tels entretiens, mais de nombreux employeurs adhèrent toujours à cette tradition. Cet article est consacré à l'analyse des tâches JavaScript typiques, qui sont souvent utilisées comme tâches pour les candidats.

Nous vous rappelons: pour tous les lecteurs de «Habr» - une remise de 10 000 roubles lors de l'inscription à un cours Skillbox en utilisant le code promo «Habr».

Skillbox recommande: Cours pratique "Mobile Developer PRO" .

L'essentiel est une préparation minutieuse de votre entretien


Oui, avant de commencer à démonter les tâches, regardons les conseils généraux pour se préparer à un entretien.

L'essentiel est de se préparer à l'avance. Vérifiez dans quelle mesure vous vous souvenez des algorithmes et des structures de données et acquérez des connaissances dans des domaines que vous ne connaissez pas trop. Il existe de nombreuses plateformes en ligne qui aident à préparer les entretiens. Nous recommandons GeeksforGeeks , Pramp , Interviewing.io et CodeSignal .

Il vaut la peine d'apprendre à prononcer la décision à haute voix. Il est conseillé de dire aux candidats ce que vous faites, et pas seulement d'écrire au tableau (ou de taper du code sur l'ordinateur, également en silence). Ainsi, si vous faites une erreur dans le code, mais que le cours de la décision est généralement correct, vous pouvez augmenter vos chances de succès.

Le problème doit être compris avant de procéder à la solution. Dans certains cas, vous pouvez superficiellement comprendre la tâche, puis aller dans le mauvais sens. Il peut être utile de poser quelques questions de clarification à l'intervieweur.

Vous devez vous entraîner à écrire du code manuellement, pas sur un PC. Il arrive que lors des entretiens, le candidat reçoive un marqueur et un tableau où il n'y a pas de conseils ou de formatage automatique. Lorsque vous recherchez une solution, écrivez votre code sur une feuille de papier ou directement au tableau. Si vous gardez tout à l'esprit, vous pouvez oublier quelque chose d'important.

Tâches de modèle JavaScript


Certaines de ces tâches vous sont probablement déjà familières. Soit vous avez effectué des entretiens où vous avez dû résoudre quelque chose de similaire, soit vous vous êtes exercé sur eux tout en apprenant JavaScript. Eh bien, il est maintenant temps de les résoudre à nouveau, avec une explication détaillée du processus.

Palindrome

Un palindrome est un mot, une phrase ou une séquence de caractères qui peuvent être lus exactement de la même manière, à la fois dans le sens habituel et dans le sens inverse. Par exemple, "Anna" est un palindrome, mais "table" et "John" ne le sont pas.

Mise en scène

Étant donné une chaîne; vous devez écrire une fonction qui vous permet de retourner true si la chaîne est un palindrome et false sinon. Dans ce cas, vous devez tenir compte des espaces et des signes de ponctuation.

palindrome («voiture de course») === vrai
palindrome ('table') === false

Nous démontons la tâche

L'idée principale ici est d'inverser la ligne dans la direction opposée. Si la ligne «inverse» est complètement identique à l'original, alors nous avons un palindrome et la fonction devrait retourner vraie. Sinon, faux.

Solution

Voici le code qui résout le palindrome.

const palindrome = str => { // turn the string to lowercase str = str.toLowerCase() // reverse input string and return the result of the // comparisong return str === str.split('').reverse().join('') }

La première étape consiste à convertir les caractères de la chaîne d'entrée en minuscules. C'est une garantie que le programme comparera exactement les caractères eux-mêmes, et non le cas ou autre chose.

La deuxième étape consiste à inverser la ligne. C'est facile à faire: vous devez le convertir en un tableau en utilisant la méthode .split () (bibliothèque de chaînes). Ensuite, nous inversons le tableau à l'aide de .reverse () (bibliothèque de tableaux). La dernière étape consiste à convertir le tableau inverse en une chaîne à l'aide de .join () (bibliothèque de tableaux).

Maintenant, tout ce qui est nécessaire est de comparer la chaîne "inverse" avec l'original, en retournant le résultat vrai ou faux.

Fizzbuzz

L'une des tâches d'entrevue les plus populaires.

Mise en scène

Il est nécessaire d'écrire une fonction qui affiche des nombres de 1 à n dans la console, où n est un entier que la fonction prend en paramètre, avec les conditions suivantes:

  • sortie de fizz au lieu de multiples de 3;
  • sortie buzz au lieu de multiples de 5;
  • sortie fizzbuzz au lieu de nombres qui sont des multiples de 3 et 5.

Exemple

Fizzbuzz (5)

Résultat

// 1
// 2
// pétillant
// 4
// buzz

Nous démontons la tâche

L'essentiel ici est la façon de rechercher plusieurs numéros à l'aide de JavaScript. Il peut être implémenté en utilisant l'opérateur du module ou le reste -%, ce qui vous permet d'afficher le reste lors de la division de deux nombres. Si le reste est 0, cela signifie que le premier nombre est un multiple du second.

12% 5 // 2 -> 12 n'est pas un multiple de 5
12% 3 // 0 -> 12 est multiple de 3

Donc, si nous divisons 12 par 5, nous obtenons 2 avec le reste 2. Si nous divisons 12 par 3, nous obtenons 4 avec le reste 0. Dans le premier cas, 12 n'est pas un multiple de 5, dans le second - 12 est un multiple de 3.

Solution

La meilleure solution serait le code suivant:

 const fizzBuzz = num => { for(let i = 1; i <= num; i++) { // check if the number is a multiple of 3 and 5 if(i % 3 === 0 && i % 5 === 0) { console.log('fizzbuzz') } // check if the number is a multiple of 3 else if(i % 3 === 0) { console.log('fizz') } // check if the number is a multiple of 5 else if(i % 5 === 0) { console.log('buzz') } else { console.log(i) } } }

La fonction effectue les vérifications nécessaires à l'aide d'instructions conditionnelles et produit le résultat dont l'utilisateur a besoin. La tâche doit prêter attention à l'ordre des instructions if ... else: commencez par une double condition (&&) et terminez par le cas où plusieurs nombres sont introuvables. En conséquence, nous couvrons toutes les options.

Anagramme

Il s'agit du nom d'un mot qui contient toutes les lettres d'un autre mot dans la même quantité, mais dans un ordre différent.

Mise en scène

Vous devez écrire une fonction qui vérifie si deux lignes sont des anagrammes et la casse des lettres n'a pas d'importance. Seuls les caractères sont pris en compte; les espaces ou la ponctuation ne sont pas pris en compte.

anagramme ('chercheur', 'ami') -> vrai
anagramme ('bonjour', 'au revoir') -> faux

Nous démontons la tâche

Il est important de considérer qu'il est nécessaire de vérifier chaque lettre sur deux lignes de saisie et leur numéro sur chaque ligne.

finder -> f: 1 ami -> f: 1
i: 1 r: 1
n: 1 i: 1
d: 1 e: 1
e: 1 n: 1
r: 1 d: 1

Pour stocker des données d'anagramme, vous devez choisir une structure telle qu'un littéral d'objet JavaScript. La clé dans ce cas est le symbole de la lettre, la valeur est le nombre de ses répétitions dans la ligne courante.

Il y a d'autres conditions:

  • Vous devez vous assurer que la casse des lettres n'est pas prise en compte lors de la comparaison. Convertissez simplement les deux chaînes en minuscules ou en majuscules.
  • Nous excluons de la comparaison tous les non-caractères. Il est préférable de travailler avec des expressions régulières .

Solution

 // helper function that builds the // object to store the data const buildCharObject = str => { const charObj = {} for(let char of str.replace(/[^\w]/g).toLowerCase()) { // if the object has already a key value pair // equal to the value being looped over, // increase the value by 1, otherwise add // the letter being looped over as key and 1 as its value charObj[char] = charObj[char] + 1 || 1 } return charObj } // main function const anagram = (strA, strB) => { // build the object that holds strA data const aCharObject = buildCharObject(strA) // build the object that holds strB data const bCharObject = buildCharObject(strB) // compare number of keys in the two objects // (anagrams must have the same number of letters) if(Object.keys(aCharObject).length !== Object.keys(bCharObject).length) { return false } // if both objects have the same number of keys // we can be sure that at least both strings // have the same number of characters // now we can compare the two objects to see if both // have the same letters in the same amount for(let char in aCharObject) { if(aCharObject[char] !== bCharObject[char]) { return false } } // if both the above checks succeed, // you have an anagram: return true return true }

Notez l'utilisation d' Object.keys () dans l'extrait ci-dessus. Cette méthode renvoie un tableau contenant les noms ou les clés dans le même ordre qu'ils apparaissent dans l'objet. Dans ce cas, le tableau sera comme ceci:

['f', 'i', 'n', 'd', 'e', ​​'r']

Ainsi, nous obtenons les propriétés de l'objet sans avoir besoin d'effectuer un cycle de volume. Dans la tâche, vous pouvez utiliser cette méthode avec la propriété .length - pour vérifier si le même nombre de caractères est sur les deux lignes - c'est une caractéristique importante des anagrammes.

Recherche de voyelle

Une tâche assez simple que l'on retrouve souvent lors des entretiens.

Mise en scène

Vous devez écrire une fonction qui prend une chaîne en argument et renvoie le nombre de voyelles contenues dans la chaîne.
Les voyelles sont "a", "e", "i", "o", "u".

Un exemple:

findVowels ('bonjour') // -> 2
findVowels ('pourquoi') // -> 0

Solution

Voici l'option la plus simple:

 const findVowels = str => { let count = 0 const vowels = ['a', 'e', 'i', 'o', 'u'] for(let char of str.toLowerCase()) { if(vowels.includes(char)) { count++ } } return count }

Il est important de faire attention à l'utilisation de la méthode .includes (). Il est disponible pour les chaînes et les tableaux. Il doit être utilisé pour déterminer si un tableau contient une valeur spécifique. Cette méthode renvoie true si le tableau contient la valeur spécifiée et false dans le cas contraire.

Il existe une solution plus concise au problème:

 const findVowels = str => { const matched = str.match(/[aeiou]/gi) return matched ? matches.length : 0 }

Cela implique la méthode .match (), qui vous permet d'implémenter une recherche efficace. Si l'expression régulière en tant qu'argument de la méthode se trouve dans la chaîne spécifiée, le tableau de caractères correspondants devient la valeur renvoyée. Eh bien, s'il n'y a pas de correspondance, alors .match () renvoie null.

Fibonacci

Une tâche classique que l'on retrouve dans les entretiens à différents niveaux. Il convient de rappeler que la séquence de Fibonacci est une série de nombres, où chacun des suivants est la somme des deux précédents. Ainsi, les dix premiers nombres sont les suivants: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34.

Mise en scène

Nous devons écrire une fonction qui retourne le nième enregistrement dans une certaine séquence, et n est le nombre qui est passé en argument à la fonction.

fibonacci (3) // -> 2

Cette tâche implique de boucler autant de fois que spécifié dans l'argument, en retournant la valeur à la position appropriée. Cette méthode de définition du problème nécessite l'utilisation de cycles. Si vous utilisez plutôt la récursivité, l'intervieweur peut l'aimer et vous donner quelques points supplémentaires.

Solution

 const fibonacci = num => { // store the Fibonacci sequence you're going // to generate inside an array and // initialize the array with the first two // numbers of the sequence const result = [0, 1] for(let i = 2; i <= num; i++) { // push the sum of the two numbers // preceding the position of i in the result array // at the end of the result array const prevNum1 = result[i - 1] const prevNum2 = result[i - 2] result.push(prevNum1 + prevNum2) } // return the last value in the result array return result[num] }

Dans le tableau de résultats, les deux premiers nombres sont contenus dans une ligne, car chaque enregistrement de la séquence se compose de la somme des deux nombres précédents. Au tout début, il n'y a pas deux nombres que vous pouvez prendre pour obtenir le numéro suivant, donc le cycle ne peut pas les générer en mode automatique. Mais, comme nous le savons, les deux premiers nombres sont toujours 0 et 1. Par conséquent, vous pouvez initialiser un tableau de résultats manuellement.

Quant à la récursivité, tout ici est plus simple et plus compliqué à la fois:

 const fibonacci = num => { // if num is either 0 or 1 return num if(num < 2) { return num } // recursion here return fibonacci(num - 1) + fibonacci(num - 2) }

Nous continuons d'appeler fibonacci (), en passant en nombres toujours plus petits comme arguments. Nous nous arrêtons lorsque l'argument passé est 0 ou 1.

Conclusion


Très probablement, vous avez déjà rencontré l'une de ces tâches si vous avez été interviewé pour le travail du développeur frontend ou JavaScript (surtout s'il s'agit du niveau junior). Mais s'ils ne vous sont pas parvenus, ils peuvent vous être utiles à l'avenir - du moins pour le développement général.
Skillbox recommande:

Source: https://habr.com/ru/post/fr445360/

More articles:


All Articles