5 häufige Probleme bei JavaScript-Interviews: Analyse und Lösungen

5 häufige Probleme bei JavaScript-Interviews: Analyse und Lösungen

Vom Übersetzer: habe einen Artikel für Sie veröffentlicht Maria Antonietta Perna, die über typische JavaScript-Aufgaben spricht, wird Bewerbern und Entwicklern am häufigsten bei Vorstellungsgesprächen angeboten. Der Artikel wird vor allem für unerfahrene Programmierer nützlich sein.

Vorstellungsgespräche in Technologieunternehmen sind längst in aller Munde. Das ist nicht verwunderlich – der erfolgreiche Abschluss des Vorstellungsgesprächs ermöglicht es, einen guten Job zu bekommen. Doch das ist gar nicht so einfach, denn oft gilt es, komplexe Probleme zu lösen.

Darüber hinaus stehen die meisten dieser Aufgaben in den meisten Fällen nicht im Zusammenhang mit der Arbeit, die der Antragsteller ausführen wird, müssen aber dennoch gelöst werden. Manchmal muss man es auf der Tafel tun, ohne bei Google oder einer anderen Quelle nachzufragen. Ja, die Situation ändert sich allmählich und einige Unternehmen lehnen solche Vorstellungsgespräche 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.

Erinnerung: für alle Leser von „Habr“ – ein Rabatt von 10 Rubel bei der Anmeldung zu einem beliebigen Skillbox-Kurs mit dem Aktionscode „Habr“.

Skillbox empfiehlt: Praktischer Kurs „Mobile Developer PRO“.

Das Wichtigste ist, dass Sie sich sorgfältig auf Ihr Vorstellungsgespräch vorbereiten.

Ja, bevor wir mit der Aufschlüsselung der Aufgaben beginnen, werfen wir einen Blick auf einige allgemeine Tipps zur Vorbereitung auf ein Vorstellungsgespräch.

Die Hauptsache ist, sich im Voraus vorzubereiten. Überprüfen Sie, wie gut Sie sich Algorithmen und Datenstrukturen merken, und verbessern Sie Ihr Wissen in Bereichen, mit denen Sie nicht sehr vertraut sind. Es gibt viele Online-Plattformen, die Sie bei der Vorbereitung auf Vorstellungsgespräche unterstützen. Wir beraten GeeksfürGeeks, Kinderwagen, Vorstellungsgespräch.io и CodeSignal.

Es lohnt sich zu lernen, die Entscheidung laut auszusprechen. Es ist ratsam, den Bewerbern zu sagen, was Sie tun, und nicht nur an die Tafel zu schreiben (oder den Code am Computer einzugeben, auch still). Wenn Sie also einen Fehler im Code machen, die Lösung aber im Großen und Ganzen korrekt ist, können Sie Ihre Erfolgschancen erhöhen.

Das Problem muss verstanden werden, bevor mit der Lösung begonnen werden kann. In manchen Fällen kann es vorkommen, dass man die Aufgabe oberflächlich versteht und dann den falschen Weg einschlägt. Es kann sich lohnen, dem Interviewer ein paar klärende Fragen zu stellen.

Sie müssen das Schreiben von Code von Hand und nicht am PC üben. Es kommt vor, dass der Bewerber bei Vorstellungsgesprächen einen Marker und eine Tafel erhält, auf der es keine Eingabeaufforderungen oder automatische Formatierung gibt. Wenn Sie nach einer Lösung suchen, schreiben Sie Ihren Code auf ein Blatt Papier oder direkt an die Tafel. Wenn Sie alles im Kopf behalten, können Sie etwas Wichtiges vergessen.

Vorlagenaufgaben in JavaScript

Einige dieser Aufgaben sind Ihnen wahrscheinlich bereits bekannt. Sie haben entweder Vorstellungsgespräche geführt, bei denen Sie etwas Ähnliches lösen mussten, oder Sie haben darin geübt, während Sie JavaScript gelernt haben. Nun ist es an der Zeit, sie noch einmal zu lösen, und zwar mit einer detaillierten Erklärung des Prozesses.

Palindrom

Ein Palindrom ist ein Wort, ein Satz oder eine Zeichenfolge, die sich sowohl in der üblichen Richtung als auch in der entgegengesetzten Richtung genau gleich liest. Zum Beispiel ist „Anna“ ein Palindrom, „Tisch“ und „John“ jedoch nicht.

Inszenierung

Gegeben eine Zeichenfolge; Sie müssen eine Funktion schreiben, die es Ihnen ermöglicht, true zurückzugeben, wenn die Zeichenfolge ein Palindrom ist, und andernfalls false. In diesem Fall müssen Leerzeichen und Satzzeichen berücksichtigt werden.

palindrome('racecar') === true
Palindrom('table') === false

Parsen der Aufgabe

Die Hauptidee besteht darin, die Saite nach hinten zu drehen. Wenn der „umgekehrte“ String völlig identisch mit dem Original ist, dann haben wir ein Palindrom und die Funktion sollte „true“ zurückgeben. Wenn nicht, falsch.

Lösung

Hier ist der Code, mit dem Sie das Palindrom lösen können.

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 die Groß-/Kleinschreibung oder etwas anderes.

Der zweite Schritt ist die Umkehrung der Linie. Das geht ganz einfach: Sie müssen es mit der Methode .split() (String-Bibliothek) in ein Array konvertieren. Dann kehren wir das Array mit .reverse() (Array-Bibliothek) um. Der letzte Schritt besteht darin, das umgekehrte Array mithilfe von .join() (Array-Bibliothek) in einen String zu konvertieren.

Jetzt muss nur noch die „umgekehrte“ Zeichenfolge mit der ursprünglichen verglichen werden, um das Ergebnis wahr oder falsch zurückzugeben.

fizzbuzz

Eines der beliebtesten Vorstellungsgespräche.

Inszenierung

Es ist erforderlich, eine Funktion zu schreiben, die Zahlen von 1 bis n auf der Konsole anzeigt, wobei n eine Ganzzahl ist, die die Funktion als Parameter akzeptiert, mit den folgenden Bedingungen:

  • Ausgabe von Sprudel anstelle von Vielfachen von 3;
  • Buzz-Ausgabe statt Vielfaches von 5;
  • Fizzbuzz-Ausgabe anstelle von Vielfachen von 3 und 5.

Beispiel

Fizzbuzz(5)

Erlebe die Kraft effektiver Ergebnisse

// 1
// 2
// sprudeln
// 4
// Summen

Parsen der Aufgabe

Die Hauptsache hier ist die Möglichkeit, Vielfache mithilfe von JavaScript zu finden. Es kann mit dem Modulo-Operator oder dem Rest -% implementiert werden, wodurch Sie den Rest anzeigen können, wenn Sie zwei Zahlen dividieren. 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 einem Rest von 2. Wenn wir 12 durch 3 teilen, erhalten wir 4 mit einem Rest von 0. Im ersten Fall ist 12 kein Vielfaches von 5, im zweiten Fall ist 12 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 notwendigen Prüfungen mithilfe von bedingten Anweisungen durch und liefert das vom Benutzer gewünschte Ergebnis. Bei der Aufgabe lohnt es sich, auf die Reihenfolge der if...else-Anweisungen zu achten: beginnend mit einer doppelten Bedingung (&&) und endend mit dem Fall, dass mehrere Zahlen nicht gefunden werden konnten. Dadurch decken wir alle Möglichkeiten ab.

Anagramm

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

Inszenierung

Wir müssen eine Funktion schreiben, die prüft, ob zwei Zeichenfolgen Anagramme sind und die Groß-/Kleinschreibung von Buchstaben keine Rolle spielt. Es zählen nur Zeichen; Leerzeichen oder Satzzeichen werden nicht berücksichtigt.

anagram('finder', 'Friend') --> true
anagram('hello', 'bye') --> false

Parsen der Aufgabe

Hierbei ist zu berücksichtigen, dass jeder Buchstabe in zwei Eingabezeilen und seine Nummer in jeder Zeile überprüft werden müssen.

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

Zum Speichern von Anagrammdaten sollten Sie eine Struktur wie ein JavaScript-Objektliteral wählen. Der Schlüssel ist in diesem Fall das Zeichen des Buchstabens, der Wert ist die Anzahl seiner Wiederholungen in der aktuellen Zeile.

Es gibt auch andere Bedingungen:

  • Sie müssen darauf achten, dass beim Vergleich die Groß-/Kleinschreibung der Buchstaben nicht berücksichtigt wird. Konvertieren Sie einfach beide Zeichenfolgen in Klein- oder Großbuchstaben.
  • Wir schließen alle Nicht-Charaktere vom Vergleich aus. Am besten mit arbeiten Reguläre Ausdrücke.

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
}

Achten Sie auf die Verwendung Object.keys () im Ausschnitt oben. Diese Methode gibt ein Array zurück, das die Namen oder Schlüssel in derselben Reihenfolge enthält, in der sie im Objekt erscheinen. In diesem Fall sieht das Array wie folgt aus:

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

Auf diese Weise erhalten wir die Eigenschaften des Objekts, ohne eine große Schleife ausführen zu müssen. In einer Aufgabe können Sie diese Methode mit der Eigenschaft .length verwenden, um zu prüfen, ob beide Zeichenfolgen die gleiche Anzahl an Zeichen haben – dies ist eine wichtige Funktion von Anagrammen.

Vokalsuche

Eine recht einfache Aufgabe, die in Vorstellungsgesprächen oft auftaucht.

Inszenierung

Sie müssen eine Funktion schreiben, die eine Zeichenfolge als Argument verwendet und die Anzahl der Vokale zurückgibt, die die Zeichenfolge enthält.
Die Vokale sind „a“, „e“, „i“, „o“, „u“.

Beispiel:

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

Lösung

Hier ist die einfachste Möglichkeit:

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 Methode .includes() zu achten. Es ist sowohl für Strings als auch für Arrays verfügbar. Es sollte verwendet werden, um herauszufinden, ob ein Array einen bestimmten Wert enthält. Diese Methode gibt true zurück, wenn das Array den angegebenen Wert enthält, andernfalls false.

Es gibt auch eine kürzere Lösung des Problems:

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

Hier kommt die Methode .match() zum Einsatz, mit der Sie eine effiziente Suche umsetzen können. Wenn innerhalb der angegebenen Zeichenfolge ein regulärer Ausdruck als Methodenargument gefunden wird, ist der Rückgabewert ein Array übereinstimmender Zeichen. Wenn es keine Übereinstimmungen gibt, gibt .match() null zurück.

Fibonacci

Eine klassische Aufgabe, die bei Vorstellungsgesprächen auf verschiedenen Ebenen gelöst werden kann. Es sei daran erinnert, dass die Fibonacci-Folge eine Reihe von Zahlen ist, bei der jede nachfolgende Zahl die Summe der beiden vorherigen ist. Die ersten zehn Zahlen sehen also so aus: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34.

Inszenierung

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

fibonacci(3) // --> 2

Diese Aufgabe besteht darin, die im Argument angegebene Anzahl von Malen zu durchlaufen und den Wert an der entsprechenden Position zurückzugeben. Diese Art der Problemstellung erfordert die Verwendung von Schleifen. Wenn Sie stattdessen Rekursion verwenden, könnte es dem Interviewer gefallen und Ihnen ein paar Extrapunkte geben.

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 Eintrag in der Sequenz aus der Summe der beiden vorherigen Zahlen besteht. Es gibt keine zwei Zahlen ganz am Anfang, die verwendet werden können, um die nächste Zahl zu erhalten, daher kann die Schleife sie nicht automatisch generieren. Aber wie wir wissen, sind die ersten beiden Zahlen immer 0 und 1. Daher können Sie das Ergebnisarray manuell initialisieren.

Was die Rekursion betrifft, ist 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 rufen weiterhin fibonacci() auf und übergeben immer kleinere Zahlen als Argumente. Wir hören auf, wenn das übergebene Argument 0 oder 1 ist.

Abschluss

Höchstwahrscheinlich standen Sie bereits vor einer dieser Aufgaben, wenn Sie sich für einen Job als Frontend- oder JavaScript-Entwickler beworben haben (insbesondere, wenn es sich um eine Junior-Ebene handelt). Aber wenn Sie sie noch nicht kennengelernt haben, könnten sie sich in Zukunft als nützlich erweisen – zumindest für die allgemeine Entwicklung.

Skillbox empfiehlt:

Source: habr.com

Kommentar hinzufügen