5 typische Aufgaben für JavaScript-Interviews: Analyse und Lösungen

Von einem Übersetzer: Sie veröffentlichten einen Artikel von Maria Perna (Maria Antonietta Perna), der über typische Aufgaben in JavaScript spricht , die Arbeitssuchenden und Entwicklern am häufigsten in Interviews angeboten werden. Der Artikel ist vor allem für Programmieranfänger nützlich. Im Folgenden finden Sie Beispiele für die Lösung von Problemen, wenn Sie der Meinung sind, dass sie nicht zu gut sind und es eine bessere Option gibt - schlagen Sie in den Kommentaren eine Alternative vor.

Interviews bei Technologieunternehmen sind seit langem ein Synonym. Das ist nicht verwunderlich - ein erfolgreiches Interview gibt Ihnen die Möglichkeit, einen guten Job zu bekommen. Dies ist jedoch nicht so einfach, da häufig komplexe Probleme gelöst werden müssen.

Und meistens hängen die meisten dieser Aufgaben nicht mit der Arbeit zusammen, die der Antragsteller ausführen wird, aber sie müssen noch gelöst werden. Manchmal muss man es an der Tafel machen, ohne sich bei Google oder einer anderen Quelle zu erkundigen. Ja, die Situation ändert sich allmählich, und einige Unternehmen lehnen solche Interviews ab, aber viele Arbeitgeber halten immer noch an dieser Tradition fest. Dieser Artikel widmet sich der Analyse typischer JavaScript-Aufgaben, die häufig als Aufgaben für Bewerber verwendet werden.

Wir erinnern Sie daran: Für alle Leser von „Habr“ - ein Rabatt von 10.000 Rubel bei der Anmeldung für einen Skillbox-Kurs mit dem Promo-Code „Habr“.

Skillbox empfiehlt: Praktikum "Mobile Developer PRO" .

Die Hauptsache ist die sorgfältige Vorbereitung auf Ihr Interview

Ja, bevor Sie beginnen, die Aufgaben zu zerlegen, schauen wir uns allgemeine Tipps zur Vorbereitung auf ein Interview an.

Die Hauptsache ist, sich im Voraus vorzubereiten. Überprüfen Sie, wie gut Sie sich an die Algorithmen und Datenstrukturen erinnern, und holen Sie sich Kenntnisse in Bereichen, mit denen Sie nicht allzu vertraut sind. Es gibt viele Online-Plattformen, die bei der Vorbereitung auf Interviews helfen. Wir empfehlen GeeksforGeeks , Pramp , Interviewing.io und CodeSignal .

Es lohnt sich zu lernen, die Entscheidung laut auszusprechen. Es ist ratsam, den Bewerbern mitzuteilen, was Sie tun, und nicht nur an die Tafel zu schreiben (oder den Code auch stillschweigend in den Computer einzugeben). Wenn Sie also einen Fehler im Code machen, die Entscheidung jedoch im Allgemeinen richtig ist, können Sie Ihre Erfolgschancen erhöhen.

Das Problem muss verstanden werden, bevor mit der Lösung fortgefahren werden kann. In einigen Fällen können Sie die Aufgabe oberflächlich verstehen und dann den falschen Weg gehen. Es kann sich lohnen, dem Interviewer einige klärende Fragen zu stellen.

Sie müssen das manuelle Schreiben von Code üben, nicht auf einem PC. Es kommt vor, dass der Bewerber während der Befragung einen Marker und eine Tafel erhält, auf der es keine Tipps oder automatische Formatierung gibt. Schreiben Sie Ihren Code bei der Suche nach einer Lösung auf ein Blatt Papier oder direkt an die Tafel. Wenn Sie alles im Auge behalten, können Sie etwas Wichtiges vergessen.

JavaScript-Vorlagenaufgaben

Wahrscheinlich sind Ihnen einige dieser Aufgaben bereits bekannt. Sie haben entweder Interviews durchlaufen, in denen Sie etwas Ähnliches lösen mussten, oder Sie haben sie beim Erlernen von JavaScript geübt. Nun ist es an der Zeit, sie erneut zu lösen und den Prozess ausführlich zu erläutern.

Palindrom

Ein Palindrom ist ein Wort, ein Satz oder eine Folge von Zeichen, die genau gleich gelesen werden können, sowohl in der üblichen Richtung als auch in der entgegengesetzten Richtung. Zum Beispiel ist "Anna" ein Palindrom, "Tisch" und "John" jedoch nicht.

Inszenierung

Gegeben eine Zeichenfolge; Sie müssen eine Funktion schreiben, mit der Sie true zurückgeben können, wenn der String ein Palindrom ist, und false, wenn nicht. In diesem Fall müssen Sie Leerzeichen und Satzzeichen berücksichtigen.

Palindrom ('Rennwagen') === wahr
Palindrom ('Tabelle') === false

Wir zerlegen die Aufgabe

Die Hauptidee hier ist, die Linie in die entgegengesetzte Richtung zu drehen. Wenn die umgekehrte Zeile vollständig mit dem Original identisch ist, haben wir ein Palindrom und die Funktion sollte true zurückgeben. Wenn nicht, falsch.

Lösung

Hier ist der Code, der das Palindrom löst.

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('') } 

Der erste Schritt besteht darin, die Zeichen der Eingabezeichenfolge in Kleinbuchstaben umzuwandeln. Dies ist eine Garantie dafür, dass das Programm genau die Zeichen selbst vergleicht und nicht den Fall oder etwas anderes.

Der zweite Schritt ist das Umkehren der Linie. Dies ist einfach: Sie müssen es mit der .split () -Methode (String-Bibliothek) in ein Array konvertieren. Dann drehen wir das Array mit .reverse () (Array-Bibliothek) um. Der letzte Schritt besteht darin, das inverse Array mit .join () (Array-Bibliothek) in einen String zu konvertieren.

Jetzt müssen Sie nur noch die "umgekehrte" Zeichenfolge mit dem Original vergleichen und das Ergebnis als wahr oder falsch zurückgeben.

Fizzbuzz

Eine der beliebtesten Interviewaufgaben.

Inszenierung

Es ist erforderlich, eine Funktion, die Zahlen von 1 bis n anzeigt, in die Konsole zu schreiben, wobei n eine Ganzzahl ist, die die Funktion als Parameter unter den folgenden Bedingungen verwendet:

• Fizz-Ausgabe anstelle von Vielfachen von 3;
• Buzz-Ausgabe anstelle von Vielfachen von 5;
• Fizzbuzz-Ausgabe anstelle von Zahlen, die ein Vielfaches von 3 und 5 sind.

Beispiel

Fizzbuzz (5)

Ergebnis

// 1
// 2
// sprudeln
// 4
// summen

Wir zerlegen die Aufgabe

Die Hauptsache hier ist die Möglichkeit, mit JavaScript nach mehreren Zahlen zu suchen. Es kann mit dem Moduloperator oder dem Rest -% implementiert werden, wodurch Sie den Rest anzeigen können, wenn Sie zwei Zahlen teilen. Wenn der Rest 0 ist, bedeutet dies, dass die erste Zahl ein Vielfaches der zweiten ist.

12% 5 // 2 -> 12 ist kein Vielfaches von 5
12% 3 // 0 -> 12 ist ein Vielfaches von 3

Wenn wir also 12 durch 5 teilen, erhalten wir 2 mit dem Rest 2. Wenn wir 12 durch 3 teilen, erhalten wir 4 mit dem Rest 0. Im ersten Fall ist 12 kein Vielfaches von 5, im zweiten - 12 ist ein Vielfaches von 3.

Lösung

Die beste Lösung wäre der folgende Code:

 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) } } } 

Die Funktion führt die erforderlichen Überprüfungen mithilfe von bedingten Anweisungen durch und erzeugt das vom Benutzer benötigte Ergebnis. Die Aufgabe sollte auf die Reihenfolge der if ... else-Anweisungen achten: Beginnen Sie mit einer doppelten Bedingung (&&) und enden Sie mit dem Fall, dass mehrere Zahlen nicht gefunden werden konnten. Infolgedessen decken wir alle Optionen ab.

Anagramm

Dies ist der Name eines Wortes, das alle Buchstaben eines anderen Wortes in derselben Menge, aber in einer anderen Reihenfolge enthält.

Inszenierung

Sie müssen eine Funktion schreiben, die prüft, ob zwei Zeilen Anagramme sind, und der Fall von Buchstaben spielt keine Rolle. Es werden nur Zeichen berücksichtigt. Leerzeichen oder Interpunktion werden nicht berücksichtigt.

Anagramm ('Finder', 'Freund') -> wahr
Anagramm ('Hallo', 'Tschüss') -> falsch

Wir zerlegen die Aufgabe

Es ist wichtig zu berücksichtigen, dass jeder Buchstabe in zwei Eingabezeilen und deren Nummer in jeder Zeile überprüft werden muss.

Finder -> f: 1 Freund -> f: 1
i: 1 r: 1
n: 1 i: 1
d: 1 e: 1
e: 1 n: 1
r: 1 d: 1

Um Anagrammdaten zu speichern, sollten Sie eine Struktur wie ein JavaScript-Objektliteral auswählen. Der Schlüssel ist in diesem Fall das Buchstabensymbol, der Wert ist die Anzahl seiner Wiederholungen in der aktuellen Zeile.

Es gibt andere Bedingungen:

• Sie müssen sicherstellen, dass der Fall von Buchstaben beim Vergleich nicht berücksichtigt wird. Konvertieren Sie einfach beide Zeichenfolgen in Klein- oder Großbuchstaben.
• Wir schließen alle Nichtzeichen vom Vergleich aus. Es ist am besten, mit regulären Ausdrücken zu arbeiten .

Lösung

 // 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 } 

Beachten Sie die Verwendung von Object.keys () im obigen Snippet. Diese Methode gibt ein Array zurück, das die Namen oder Schlüssel in derselben Reihenfolge enthält, in der sie im Objekt angezeigt werden. In diesem Fall sieht das Array folgendermaßen aus:

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

Auf diese Weise erhalten wir die Eigenschaften des Objekts, ohne dass ein Volumenzyklus durchgeführt werden muss. In der Aufgabe können Sie diese Methode mit der Eigenschaft .length verwenden, um zu überprüfen, ob in beiden Zeilen die gleiche Anzahl von Zeichen enthalten ist. Dies ist ein wichtiges Merkmal von Anagrammen.

Vokalsuche

Eine ziemlich einfache Aufgabe, die oft in Interviews auftaucht.

Inszenierung

Sie müssen eine Funktion schreiben, die eine Zeichenfolge als Argument verwendet und die Anzahl der Vokale zurückgibt, die in der Zeichenfolge enthalten sind.
Vokale sind "a", "e", "i", "o", "u".

Ein Beispiel:

findVowels ('hallo') // -> 2
findVowels ('why') // -> 0

Lösung

Hier ist die einfachste Option:

 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 } 

Es ist wichtig, auf die Verwendung der .includes () -Methode zu achten. Es ist sowohl für Strings als auch für Arrays verfügbar. Es sollte verwendet werden, um festzustellen, ob ein Array einen bestimmten Wert enthält. Diese Methode gibt true zurück, wenn das Array den angegebenen Wert enthält, und false, wenn nicht.

Es gibt eine präzisere Lösung für das Problem:

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

Hierbei handelt es sich um die Methode .match (), mit der Sie eine effiziente Suche implementieren können. Wenn der reguläre Ausdruck als Argument für die Methode in der angegebenen Zeichenfolge gefunden wird, wird das Array der übereinstimmenden Zeichen zum zurückgegebenen Wert. Wenn es keine Übereinstimmungen gibt, gibt .match () null zurück.

Fibonacci

Eine klassische Aufgabe, die in Interviews auf verschiedenen Ebenen zu finden ist. Es sei daran erinnert, dass die Fibonacci-Sequenz eine Reihe von Zahlen ist, wobei jede nachfolgende die Summe der beiden vorhergehenden ist. Die ersten zehn Zahlen lauten also wie folgt: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34.

Inszenierung

Wir müssen eine Funktion schreiben, die den n-ten Datensatz in einer bestimmten Reihenfolge zurückgibt, und n ist die Zahl, die als Argument an die Funktion übergeben wird.

Fibonacci (3) // -> 2

Bei dieser Aufgabe wird so oft wie im Argument angegeben wiederholt und der Wert an der entsprechenden Position zurückgegeben. Diese Methode zum Einstellen des Problems erfordert die Verwendung von Zyklen. Wenn Sie stattdessen die Rekursion verwenden, kann es dem Interviewer gefallen und Sie erhalten einige zusätzliche Punkte.

Lösung

 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] } 

Im Ergebnisarray sind die ersten beiden Zahlen in einer Zeile enthalten, da jeder Datensatz in der Sequenz aus der Summe der beiden vorherigen Zahlen besteht. Ganz am Anfang gibt es keine zwei Zahlen, die Sie verwenden können, um die nächste Zahl zu erhalten, sodass der Zyklus sie im automatischen Modus nicht generieren kann. Wie wir jedoch wissen, sind die ersten beiden Zahlen immer 0 und 1. Daher können Sie ein Array von Ergebnissen manuell initialisieren.

Bei der Rekursion ist hier alles gleichzeitig einfacher und komplizierter:

 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) } 

Wir nennen weiterhin fibonacci () und geben immer kleinere Zahlen als Argumente an. Wir hören auf, wenn das übergebene Argument 0 oder 1 ist.

Fazit

Höchstwahrscheinlich sind Sie bereits auf eine dieser Aufgaben gestoßen, wenn Sie für die Arbeit des Frontend- oder JavaScript-Entwicklers interviewt wurden (insbesondere, wenn dies die Junior-Ebene ist). Aber wenn sie Ihnen nicht begegnet sind, können sie sich in Zukunft als nützlich erweisen - zumindest für die allgemeine Entwicklung.

Skillbox empfiehlt:

• Angewandter Python Data Analyst Online-Kurs.
  
• Online-Kurs "Beruf Frontend-Entwickler . "
• Praktischer Jahreskurs "PHP-Entwickler von 0 bis PRO" .