Die zehn am häufigsten gestellten Fragen zu JavaScript-Frontend-Interviews

Ich weiß, dass viele Leute mit dieser Art von Interview nicht einverstanden sind. Tatsächlich muss man es akzeptieren, ob es einem gefällt oder nicht. Vor allem, wenn Sie Autodidakt sind und sich für Ihren ersten Job bewerben.

Ich denke, es gibt viele andere Möglichkeiten, sich zu beweisen. Die Github-/Projektadresse ist möglicherweise eine ideale Beweismethode, aber verlassen Sie sich nicht auf alle.

Die gute Nachricht ist, dass es einige schwierige Fragen gibt, die ich in der begrenzten Zeit nicht beantworten konnte (wie „Event Loop“ und „Yang Hui Triangle“), und einige andere Interviewkandidaten haben dies ebenfalls zugelassen dass sie sie auch nicht beantworten konnten, und das wird die Diskussion viel einfacher machen.

Die schlechte Nachricht ist, dass es bei manchen Vorstellungsgesprächen im Nachhinein kein Feedback gibt. Drei Unternehmen wurden nie wieder kontaktiert. Dieses Klicken zerstört das Vertrauen und ist respektlos. Dann haben Sie möglicherweise psychische Probleme: „Ist das Vorstellungsgespräch nicht gut genug verlaufen?“, „Sie mögen meinen Typ nicht?“. Wenn Sie also ein Interviewer sind, geben Sie Ihrem Interviewer eine klare Antwort, selbst eine automatisierte Antwort ist besser als gar keine.

1. Entwerfen Sie eine Funktion, um das Yang-Hui-Dreieck in der n-ten Zeile zurückzugeben. (Im gesamten Interview gibt es nur eine Frage)

Hinweis* Das Dreieck von Yang Hui wird auch Pascals Dreieck genannt

1

1 1 1

1 2 1

1 3 3 1

...

2 um eine Zeichenfolge zurückzugeben. Das am häufigsten wiederholte Wort in .

3. Verwenden Sie die Rekursion, um die Fibonacci-Folge der Länge n zu drucken.

Hinweis* Die Fibonacci-Folge beginnt mit 0 und 1 und addiert dann die beiden vorherigen Zahlen 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233

4. Erklären Sie die Verwendung und den Unterschied von bind, apply und call.

5. Erklären Sie, was Eventdelegation ist und warum sie nützlich ist.

6. Was ist eine Ereignisschleife?

7. Wie funktioniert das Heben (Deklarationsheben) in JavaScript?

8. Beschreiben Sie, wie Sie einen App- oder Website-Prozess entwerfen.

9. Welche Funktionen möchten Sie JavaScript oder Browsern am meisten hinzufügen und warum?

10. Was ist der Unterschied zwischen funktionaler Programmierung und imperativer Programmierung? Welches gefällt dir?

5 klassische Front-End-Interviewfragen

Frage 1: Umfang Umfang

Bedenken Sie den folgenden Code:

Was wird auf der Konsole gedruckt?

(function() {
   var a = b = 5;
})();

console.log(b);

Antwort

Der obige Code gibt 5 aus.

Der Trick bei diesem Problem besteht darin, dass es zwei Variablendeklarationen gibt, eine jedoch mit dem Schlüsselwort var deklariert wird. Zeigt an, dass es sich um eine lokale Variable einer Funktion handelt. Im Gegensatz dazu wird b zu einer globalen Variablen.

Ein weiterer Trick bei dieser Frage besteht darin, dass sie keinen strengen Modus verwendet („use strict“;) . Wenn der strikte Modus aktiviert ist, löst der Code einen ReferenceError aus: b ist nicht definiert. Denken Sie daran, dass der strikte Modus eine explizite Angabe erfordert, um globale Variablendeklarationen zu implementieren. Sie sollten beispielsweise Folgendes schreiben:

Frage 2: Erstellen Sie eine „native“ Methode

(function() {
   'use strict';
   var a = window.b = 5;
})();

console.log(b);

, um eine Wiederholungsfunktion für das Zeichenfolgenobjekt zu definieren. Wenn eine Ganzzahl n übergeben wird, wird das Ergebnis der n-fachen Wiederholung der Zeichenfolge zurückgegeben. Beispiel:

sollte hellohellohello ausgeben.

console.log('hello'.repeatify(3));

Antwort

Eine mögliche Implementierung ist wie folgt:

Die aktuelle Frage testet das Wissen des Entwicklers über JavaScript-Vererbung und Prototypen. Dadurch wird auch überprüft, ob der Entwickler weiß, wie integrierte Objekte erweitert werden (auch wenn dies nicht getan werden sollte).

String.prototype.repeatify = String.prototype.repeatify || function(times) {
   var str = '';
   for (var i = 0; i < times; i++) {
      str += this;
   }
   return str;
};

Ein weiterer wichtiger Punkt hier ist, dass Sie wissen müssen, wie Sie möglicherweise bereits definierte Funktionen nicht überschreiben. Testen Sie, dass die Funktionsdefinition vorher nicht existierte:



String.prototype.repeatify = String.prototype.repeatify || function(times) {/* code here */};

Diese Technik ist besonders nützlich, wenn Sie aufgefordert werden, JavaScript-Funktionen kompatibel zu machen.

Frage 3: Statement-Hebung

Führen Sie diesen Code aus und was wird ausgegeben?

Antwort

function test() {
   console.log(a);
   console.log(foo());
   var a = 1;
   function foo() {
      return 2;
   }
}

test();

Das Ergebnis dieses Codes ist undefiniert und 2.

Der Grund dafür ist, dass die Deklarationen von Variablen und Funktionen nach vorne verschoben (an den Anfang der Funktion verschoben) werden, den Variablen jedoch keine Werte zugewiesen werden. Wenn die Variable gedruckt wird, ist sie also in der Funktion vorhanden (sie wurde deklariert), ist aber immer noch undefiniert. Mit anderen Worten, der obige Code entspricht dem Folgenden:

Frage 4: Wie funktioniert das in JavaScript

function test() {
   var a;
   function foo() {
      return 2;
   }
 
   console.log(a);
   console.log(foo());
    
   a = 1;
}
 
test();

下面的代码会输出什么结果？给出你的答案。 

var fullname = 'John Doe';
var obj = {
   fullname: 'Colin Ihrig',
   prop: {
      fullname: 'Aurelio De Rosa',
      getFullname: function() {
         return this.fullname;
      }
   }
};

console.log(obj.prop.getFullname());
 
var test = obj.prop.getFullname;
 
console.log(test());

回答 

答案是Aurelio De Rosa和John Doe。原因是，在一个函数中，this的行为，取决于JavaScript函数的调用方式和定义方式，而不仅仅是看它如何被定义的。 

在第一个 console.log()调用中，getFullname() 被调用作为obj.prop对象的函数。所以，上下文指的是后者，函数返回该对象的fullname。与此相反，当getFullname()被分配到test变量时，上下文指的是全局对象（window）。这是因为test是被隐式设置为全局对象的属性。出于这个原因，该函数返回window的fullname，即定义在第一行的那个值。 

问题5：call() 和 apply()

现在让你解决前一个问题，使最后的console.log() 打印 Aurelio De Rosa。 

回答 

该问题可以通过强制使用 call() 或者 apply() 改变函数上下文。在下面我将使用call()，但在这种情况下，apply()会输出相同的结果： 

console.log(test.call(obj.prop))