Ihr ultimativer JavaScript- und React-Spickzettel für Interviews

Vorbereitung auf Ihr nächstes Vorstellungsgespräch: Wichtige JavaScript- und React-Themen

JavaScript-Themen

1. Heben

Hoisting ist der Mechanismus von JavaScript, mit dem Variablen- und Funktionsdeklarationen während der Kompilierungsphase an den Anfang ihres enthaltenden Bereichs verschoben werden, bevor der Code ausgeführt wird. Das bedeutet, dass Sie Variablen und Funktionen referenzieren können, bevor sie tatsächlich im Code deklariert werden. Es werden jedoch nur Deklarationen ausgelöst, keine Initialisierungen. Mit var deklarierte Variablen werden angehoben und auf undefiniert initialisiert, während let und const angehoben, aber nicht initialisiert werden, was zu einem „temporal dead zone“-Fehler führt, wenn vor der Deklaration darauf zugegriffen wird. Funktionsdeklarationen sind vollständig hochgezogen, was bedeutet, dass sie aufgerufen werden können, bevor sie im Code erscheinen.

Beispiel:

console.log(a); // undefined
var a = 5;

// Equivalent to:
var a;
console.log(a); // undefined
a = 5;

Funktionsdeklarationen werden ebenfalls hochgezogen:

greet(); // "Hello!"
function greet() {
  console.log("Hello!");
}

2. Schließung

Ein Abschluss ist eine Funktion in JavaScript, bei der eine Funktion Zugriff auf ihren lexikalischen Bereich behält, auch wenn sie außerhalb dieses Bereichs ausgeführt wird. Dadurch kann sich die Funktion Variablen aus ihrem umgebenden Bereich „merken“. Abschlüsse werden häufig zur Datenkapselung, zur Statuserhaltung oder zum Erstellen privater Variablen in JavaScript verwendet. Sie werden immer dann gebildet, wenn eine Funktion innerhalb einer anderen Funktion definiert wird und die innere Funktion auf Variablen in der äußeren Funktion verweist.

Beispiel:

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

const increment = outer();
console.log(increment()); // 1
console.log(increment()); // 2

3. Versprochen

Versprechen stellen einen Platzhalter für einen Wert dar, der in Zukunft verfügbar sein wird. Sie werden verwendet, um asynchrone Vorgänge effektiver abzuwickeln als herkömmliche Rückruffunktionen, wodurch die „Rückrufhölle“ reduziert wird. Versprechen können einen von drei Zuständen haben: ausstehend, erfüllt oder abgelehnt. Sobald ein Versprechen erfüllt oder abgelehnt wird, wird es unveränderlich. Versprechen verbessern die Lesbarkeit des Codes und erleichtern die Verkettung asynchroner Vorgänge.

Beispiel:

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 1000);
});

fetchData.then(data => console.log(data)); // "Data fetched!"

4. Funktion Currying

Funktions-Currying ist eine Technik, bei der eine Funktion mit mehreren Argumenten in eine Folge von Funktionen umgewandelt wird, die jeweils ein einzelnes Argument annehmen. Dieser Ansatz wird häufig in der funktionalen Programmierung verwendet, um wiederverwendbare Funktionen zu erstellen, indem einige Argumente der ursprünglichen Funktion korrigiert werden. Currying ermöglicht eine bessere Lesbarkeit, Wiederverwendbarkeit und Modularisierung des Codes.

Beispiel:

function add(a) {
  return function(b) {
    return a + b;
  };
}

const add5 = add(5);
console.log(add5(3)); // 8

5. Ausführungskontext

Der Ausführungskontext definiert die Umgebung, in der JavaScript-Code ausgeführt wird. Es umfasst Variablen, Objekte und Funktionen, auf die zu einem bestimmten Zeitpunkt zugegriffen werden kann. Es gibt drei Arten von Ausführungskontexten:

• Globaler Ausführungskontext: Wird erstellt, wenn ein Skript zum ersten Mal ausgeführt wird. Im globalen Bereich deklarierte Variablen und Funktionen sind Teil dieses Kontexts.
• Funktionsausführungskontext: Wird immer dann erstellt, wenn eine Funktion aufgerufen wird, und enthält ihre lokalen Variablen und Parameter.
• Eval Execution Context: Selten verwendet, wird erstellt, wenn eval() aufgerufen wird. Der Ausführungskontext bestimmt auch den Wert davon und beinhaltet die Erstellung der Scope Chain.

Beispiel:

console.log(a); // undefined
var a = 5;

// Equivalent to:
var a;
console.log(a); // undefined
a = 5;

6. Anrufen, bewerben, binden

Dies sind Methoden, um den Wert davon beim Aufrufen einer Funktion explizit festzulegen.

• Aufruf: Ruft eine Funktion mit einem gegebenen Kontext und individuell übergebenen Argumenten auf.
• Anwenden: Ähnlich wie call, aber Argumente werden als Array übergeben.
• Binden: Gibt eine neue Funktion mit einem bestimmten Kontext und voreingestellten Argumenten zurück, ohne sie sofort aufzurufen.

Beispiel:

greet(); // "Hello!"
function greet() {
  console.log("Hello!");
}

7. Polyfills für gängige Methoden

Polyfills sind Codeausschnitte, die Funktionen in Umgebungen implementieren, in denen sie nicht nativ verfügbar sind. Sie ermöglichen älteren Browsern oder Laufzeitumgebungen die Unterstützung moderner JavaScript-Funktionen wie Array.map, Promise oder Object.assign. Polyfills werden häufig verwendet, um die Kompatibilität sicherzustellen, und werden mithilfe einer Fallback-Logik implementiert, die das Verhalten der fehlenden Funktion nachahmt.

Beispiel: Array.prototype.map Polyfill:

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

const increment = outer();
console.log(increment()); // 1
console.log(increment()); // 2

Reagieren Sie auf Themen

1. Versöhnung

Abgleich ist der Prozess von React, bei dem das DOM so aktualisiert wird, dass es mit dem virtuellen DOM übereinstimmt. React verwendet einen Differenzalgorithmus, um die minimale Anzahl der erforderlichen Aktualisierungen zu bestimmen und so das Rendering effizient zu gestalten. Wenn sich der Status oder die Requisiten ändern, erstellt React ein neues virtuelles DOM, vergleicht es mit dem vorherigen und aktualisiert nur die Teile, die sich geändert haben.

2. Haken

Hooks sind Funktionen, die es Funktionskomponenten ermöglichen, Funktionen wie Zustands- und Lebenszyklusmethoden zu verwenden, die bisher nur in Klassenkomponenten verfügbar waren. Beispiele hierfür sind useState für die Zustandsverwaltung und useEffect für Nebenwirkungen. Hooks machen den React-Code prägnanter und funktionale Komponenten leistungsfähiger.

Beispiel:

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 1000);
});

fetchData.then(data => console.log(data)); // "Data fetched!"

3. Klasse vs. funktionale Komponenten

Klassenkomponenten sind ES6-Klassen, die dies für Zustands- und Lebenszyklusmethoden verwenden. Funktionskomponenten sind einfache Funktionen, die die Benutzeroberfläche rendern. Durch die Einführung von Hooks können funktionale Komponenten den Status und den Lebenszyklus verwalten, ohne dass Klassen erforderlich sind. Funktionskomponenten werden wegen ihrer Einfachheit und besseren Leistung bevorzugt.

Beispiel einer Klassenkomponente:

console.log(a); // undefined
var a = 5;

// Equivalent to:
var a;
console.log(a); // undefined
a = 5;

4. Auswendiglernen

Memoisierung ist eine Technik zur Leistungsoptimierung, die dazu dient, unnötige Neuberechnungen oder erneutes Rendern zu verhindern. In React stellt die Memoisierung sicher, dass Komponenten nur dann neu gerendert werden, wenn sich ihre Requisiten oder ihr Zustand ändern. Dies ist besonders nützlich bei Komponenten, die rechenintensiv sind oder häufig aktualisiert werden.

Beispiel:

greet(); // "Hello!"
function greet() {
  console.log("Hello!");
}

5. Komponente höherer Ordnung (HOC)

Ein HOC ist ein Entwurfsmuster in React, bei dem eine Funktion eine Komponente als Eingabe verwendet und eine erweiterte Version dieser Komponente zurückgibt. HOCs werden häufig für die Wiederverwendung von Code, die Statusverwaltung und das Hinzufügen von Funktionen wie Protokollierung oder Authentifizierung verwendet.

Beispiel:

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

const increment = outer();
console.log(increment()); // 1
console.log(increment()); // 2

6. Leistung

Zur Verbesserung der React-Leistung gehören Techniken wie die Vermeidung unnötiger erneuter Renderings, das verzögerte Laden von Komponenten und die Optimierung des Renderings mithilfe von React.memo oder useMemo. Entwickler nutzen auch Tools wie React Profiler, um Engpässe zu identifizieren.

7. React Router

React Router ist eine Bibliothek zum Verwalten der Navigation in React-Anwendungen. Es ermöglicht Entwicklern, Routen zu definieren und Komponenten basierend auf der URL dynamisch zu rendern. Zu den Funktionen gehören verschachtelte Routen, Routenparameter und Navigationsschutz.

Beispiel:

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 1000);
});

fetchData.then(data => console.log(data)); // "Data fetched!"

8. Caching

Caching in React beinhaltet das Speichern häufig verwendeter Daten, um ein erneutes Abrufen zu vermeiden. Dies kann mithilfe von Bibliotheken wie React-Query, Redux oder LocalStorage erreicht werden. Caching verbessert die Leistung und das Benutzererlebnis, indem es die Ladezeiten verkürzt.

9. Sicherheit

Um React-Anwendungen zu sichern, sollten Entwickler Benutzereingaben validieren und bereinigen, HTTPS verwenden und Inline-JavaScript vermeiden, um XSS-Angriffe zu verhindern. Bibliotheken wie Helmet helfen beim Festlegen sicherer HTTP-Header. Auch Authentifizierung und Autorisierung sollten sicher umgesetzt werden.

10. Verbesserung der Leistung

Die Leistung kann verbessert werden durch:

• Reduzierung der Bundle-Größe durch Code-Splitting.
• Vermeidung unnötiger Statusaktualisierungen.
• Verwenden von React.lazy für verzögertes Laden.
• Bilder und Assets optimieren.
• Verwendung effizienter Algorithmen für Rechenaufgaben.

11. Speicherlecks

Speicherlecks treten auf, wenn Objekte nicht mehr verwendet werden, aber nicht im Müll gesammelt werden. In React entstehen Lecks häufig durch unsachgemäße Bereinigung von Ereignis-Listenern, Timern oder Abonnements. Durch die Verwendung von useEffect mit einer Bereinigungsfunktion wird eine ordnungsgemäße Bereinigung gewährleistet und solche Probleme vermieden.

Bereinigen Sie verwendete Abonnements oder Timer.Effekt:

console.log(a); // undefined
var a = 5;

// Equivalent to:
var a;
console.log(a); // undefined
a = 5;

Zusammenfassend lässt sich sagen, dass die Beherrschung der Kernkonzepte von JavaScript und React für jeden Entwickler, der robuste und effiziente Anwendungen erstellen möchte, von entscheidender Bedeutung ist. Diese Prinzipien bilden nicht nur die Grundlage der Webentwicklung, sondern bereiten Sie auch darauf vor, komplexe Herausforderungen souverän anzugehen. Ganz gleich, ob es darum geht, Schließungen zu verstehen, die Leistung mit React zu optimieren oder bewährte Sicherheitspraktiken umzusetzen – ein tiefes Verständnis dieser Themen wird Sie in Vorstellungsgesprächen und in Ihrer Karriere von anderen abheben. Erforschen, üben und verfeinern Sie Ihre Fähigkeiten weiter – denn die Reise des Lernens endet in der sich ständig weiterentwickelnden Welt des Programmierens nie wirklich.

Das obige ist der detaillierte Inhalt vonIhr ultimativer JavaScript- und React-Spickzettel für Interviews. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!