JavaScript ist eine komplexe Sprache. Wenn Sie sich auf einer beliebigen Ebene mit der JavaScript-Entwicklung befassen, ist es für Sie von entscheidender Bedeutung, die grundlegenden Konzepte dieser Sprache zu verstehen. Das Material, dessen Übersetzung wir heute veröffentlichen, umfasst 12 wichtige JavaScript-Konzepte. Natürlich muss der JavaScript-Entwickler viel mehr wissen, aber ohne das, worüber wir heute sprechen werden, kann er es definitiv nicht.
1. Variablen, die Werte und Referenzen speichern
Für diejenigen, die korrekt funktionierenden Code schreiben möchten, ist es äußerst wichtig zu verstehen, wie genau Variablenwerte in JavaScript zugewiesen werden. Ein Missverständnis dieses Mechanismus führt zum Schreiben von Programmen, bei denen sich die Werte von Variablen versehentlich ändern können.
JavaScript funktioniert immer mit dem Wert dieser Entität, wenn eine Entität einen der primitiven Typen hat (insbesondere die Typen
Boolean ,
null ,
undefined ,
String und
Number ). Das heißt, der Wert wird in die entsprechende Variable geschrieben. Wenn es sich um ein Objekt handelt (z. B. die Typen
Object ,
Array ,
Function ), wird beim Zuweisen zu einer Variablen ein Verweis darauf geschrieben, die Adresse, an der es sich im Speicher befindet.
Betrachten Sie ein Beispiel. Im folgenden
var1 wird eine Zeichenfolge in
var1 . Danach wird der Wert von
var2 in die Variable
var2 geschrieben. Da die Variable
var1 einen primitiven Typ (
String ) hat, wird eine Kopie des in
var1 verfügbaren Strings in
var1 geschrieben. Dies ermöglicht es uns,
var2 als eine Variable zu betrachten, die völlig unabhängig von
var1 , obwohl sie denselben Wert wie
var1 . Das Schreiben eines neuen Werts in
var1 wirkt sich nicht auf
var1 .
let var1 = 'My string'; let var2 = var1; var2 = 'My new string'; console.log(var1);
Betrachten Sie nun ein Beispiel für die Arbeit mit Objekten.
let var1 = { name: 'Jim' } let var2 = var1; var2.name = 'John'; console.log(var1);
Wie Sie sehen können, arbeiten wir hier mit der Variablen
var2 , und was damit passiert, spiegelt sich in der Variablen
var1 , da sie einen Verweis auf dasselbe Objekt speichern. Es ist leicht vorstellbar, wozu dies in echtem Code führen kann, wenn jemand entscheidet, dass sich die Variablen, in denen Objekte gespeichert sind, genauso verhalten wie Variablen, in denen Werte primitiver Typen gespeichert sind. Dies ist beispielsweise besonders unangenehm, wenn eine Funktion erstellt wird, die mit dem an sie übergebenen Objektwert arbeitet, und diese Funktion diesen Wert versehentlich ändert.
2. Kurzschlüsse
Das Schließen ist ein wichtiges Entwurfsmuster in JavaScript, mit dem Sie geschützte Arbeiten mit Variablen organisieren können. Im folgenden Beispiel gibt die Funktion
createGreeter() eine anonyme Funktion zurück, die Zugriff auf das angegebene Argument mit dem
greeting , das die Zeichenfolge
Hello enthält. Ein Verweis auf diese anonyme Funktion wird in die Variable
sayHello . Unabhängig davon, wie oft wir die Funktion
sayHello() aufrufen, hat sie danach immer Zugriff auf den
greeting . In diesem Fall ist der Zugriff auf die
greeting nur eine anonyme Funktion, deren Link in
sayHello aufgezeichnet ist.
function createGreeter(greeting) { return function(name) { console.log(greeting + ', ' + name); } } const sayHello = createGreeter('Hello'); sayHello('Joe');
Dies war ein sehr einfaches Beispiel. Wenn wir uns etwas näher an der realen Welt ansehen, können wir uns zum Beispiel eine Funktion zum
apiConnect() einer Verbindung zu einer bestimmten API
apiConnect() nennen
apiConnect() es
apiConnect() ), der beim ersten Aufruf ein API-Zugriffsschlüssel übergeben wird. Diese Funktion gibt wiederum ein Objekt zurück, das mehrere Methoden enthält, die den an
apiConnect() API-Zugriffsschlüssel verwenden. In diesem Fall wird der Schlüssel im Abschluss gespeichert, und wenn Sie diese Methoden aufrufen, müssen Sie ihn nicht mehr erwähnen.
function apiConnect(apiKey) { function get(route) { return fetch(`${route}?key=${apiKey}`); } function post(route, params) { return fetch(route, { method: 'POST', body: JSON.stringify(params), headers: { 'Authorization': `Bearer ${apiKey}` } }) } return { get, post } } const api = apiConnect('my-secret-key');
3. Zerstörerische Aufgabe
Wenn Sie in JavaScript noch keine destruktive Zuweisung verwendet haben, ist es an der Zeit, diese zu beheben. Die destruktive Zuweisung ist eine übliche Methode zum Abrufen von Objekteigenschaften mithilfe eines übersichtlichen syntaktischen Sprachkonstrukts.
const obj = { name: 'Joe', food: 'cake' } const { name, food } = obj; console.log(name, food);
Wenn Sie die extrahierten Eigenschaftsnamen zuweisen müssen, die sich von denen im Objekt unterscheiden, können Sie Folgendes tun:
const obj = { name: 'Joe', food: 'cake' } const { name: myName, food: myFood } = obj; console.log(myName, myFood);
Im folgenden Beispiel wird die Destrukturierung verwendet, um die in den Eigenschaften des
person gespeicherten Werte genau an die Funktion
introduce() . Dies ist ein Beispiel dafür, wie diese Konstruktion verwendet wird, wenn eine Funktion zum Abrufen von Daten von einem Objekt mit übergebenen Parametern deklariert wird. Übrigens, wenn Sie mit React vertraut sind, haben Sie das wahrscheinlich schon gesehen.
const person = { name: 'Eddie', age: 24 } function introduce({ name, age }) { console.log(`I'm ${name} and I'm ${age} years old!`); } console.log(introduce(person));
4. Der Spread-Operator
Der Spread-Operator ist eine ziemlich einfache Konstruktion, die einer unvorbereiteten Person unverständlich erscheint. Das folgende Beispiel enthält ein numerisches Array, den Maximalwert, in dem wir suchen müssen. Wir möchten hierfür die
Math.max() -Methode verwenden, sie kann jedoch nicht mit Arrays arbeiten. Als Argumente nimmt er unabhängige Zahlenwerte an. Um seine Elemente aus dem Array zu extrahieren, verwenden wir den Spread-Operator, der wie drei Punkte aussieht.
const arr = [4, 6, -1, 3, 10, 4]; const max = Math.max(...arr); console.log(max);
5. Die Restaussage
Mit dem Rest-Operator können Sie eine beliebige Anzahl von Argumenten, die an eine Funktion übergeben wurden, in ein Array konvertieren.
function myFunc(...args) { console.log(args[0] + args[1]); } myFunc(1, 2, 3, 4);
6. Array-Methoden
Array-Methoden bieten dem Entwickler häufig praktische Tools, um eine Vielzahl von Datenkonvertierungsaufgaben auf wunderbare Weise zu lösen. Ich beantworte manchmal Fragen zu StackOverflow. Unter ihnen gibt es oft solche, die sich so etwas wie diesen oder anderen Arten der Arbeit mit Arrays von Objekten widmen. In solchen Situationen sind Array-Methoden besonders nützlich.
Hier werden wir einige solcher Methoden betrachten, die durch das Prinzip ihrer Ähnlichkeit miteinander verbunden sind. Es sollte beachtet werden, dass ich Ihnen hier nicht alle Methoden von Arrays erläutern werde. Sie finden ihre vollständige Liste auf
MDN (dies ist übrigens meine Lieblings-JavaScript-Referenz).
▍Map () -, Filter () - und Reduce () -Methoden
Mit den Array-Methoden
map() ,
filter() und
reduce() können Sie Arrays transformieren oder Arrays auf einen einzelnen Wert reduzieren (der ein Objekt sein kann).
Die
map() -Methode gibt ein neues Array zurück, das die transformierten Werte des verarbeiteten Arrays enthält. Wie genau sie transformiert werden, wird in der an diese Methode übergebenen Funktion angegeben.
const arr = [1, 2, 3, 4, 5, 6]; const mapped = arr.map(el => el + 20); console.log(mapped);
Die
filter() -Methode gibt ein Array von Elementen zurück und überprüft die Werte, von denen die an diese Methode übergebene Funktion
true .
const arr = [1, 2, 3, 4, 5, 6]; const filtered = arr.filter(el => el === 2 || el === 4); console.log(filtered);
Die Methode redu
reduce() gibt einen bestimmten Wert zurück, der das Ergebnis der Verarbeitung aller Elemente des Arrays ist.
const arr = [1, 2, 3, 4, 5, 6]; const reduced = arr.reduce((total, current) => total + current); console.log(reduced);
▍ Methoden find (), findIndex () und indexOf ()
Die Array-Methoden
find() ,
findIndex() und
indexOf() leicht miteinander zu verwechseln. Im Folgenden finden Sie Erläuterungen zum besseren Verständnis der Funktionen.
Die
find() -Methode gibt das erste Element des Arrays zurück, das den angegebenen Kriterien entspricht. Diese Methode, die das erste geeignete Element findet, setzt die Suche im Array nicht fort.
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const found = arr.find(el => el > 5); console.log(found);
Bitte beachten Sie, dass in unserem Beispiel die angegebenen Kriterien allen Elementen des Arrays entsprechen, die demjenigen folgen, das die Nummer 5 enthält, aber nur das erste geeignete Element zurückgegeben wird. Diese Methode ist sehr nützlich in Situationen, in denen unter Verwendung der for-Schleifen zum Aufzählen und Analysieren von Arrays solche Schleifen unterbrochen werden, wenn das gewünschte Element mithilfe der
break Anweisung im Array gefunden wird.
Die
findIndex() -Methode ist
find() sehr ähnlich, gibt jedoch nicht das erste geeignete Element im Array zurück, sondern den Index dieses Elements. Um diese Methode besser zu verstehen, sehen Sie sich das folgende Beispiel an, in dem ein Array von Zeichenfolgenwerten verwendet wird.
const arr = ['Nick', 'Frank', 'Joe', 'Frank']; const foundIndex = arr.findIndex(el => el === 'Frank'); console.log(foundIndex);
Die
indexOf() -Methode ist der
findIndex() -Methode sehr ähnlich, verwendet jedoch als Argument keine Funktion, sondern einen normalen Wert. Es kann verwendet werden, wenn bei der Suche nach dem gewünschten Array-Element keine komplexe Logik benötigt wird.
const arr = ['Nick', 'Frank', 'Joe', 'Frank']; const foundIndex = arr.indexOf('Frank'); console.log(foundIndex);
▍ Push () -, Pop () -, Shift () - und Unshift () -Methoden
Die
unshift() push() ,
pop() ,
shift() und
unshift() werden verwendet, um Arrays neue Elemente hinzuzufügen und bereits in Arrays vorhandene Elemente daraus zu extrahieren. In diesem Fall wird mit Elementen gearbeitet, die sich am Anfang oder am Ende des Arrays befinden.
Mit der
push() -Methode können Sie Elemente am Ende eines Arrays hinzufügen. Es ändert das Array und gibt nach Abschluss das dem Array hinzugefügte Element zurück.
let arr = [1, 2, 3, 4]; const pushed = arr.push(5); console.log(arr);
Die
pop() -Methode entfernt das letzte Element aus dem Array. Es ändert das Array und gibt das daraus entfernte Element zurück.
let arr = [1, 2, 3, 4]; const popped = arr.pop(); console.log(arr);
Die Methode
shift() entfernt das erste Element aus dem Array und gibt es zurück. Es ändert auch das Array, für das es aufgerufen wird.
let arr = [1, 2, 3, 4]; const shifted = arr.shift(); console.log(arr);
Die
unshift() -Methode fügt dem Anfang eines Arrays ein oder mehrere Elemente hinzu. Er ändert erneut das Array. Gleichzeitig wird im Gegensatz zu den anderen drei hier diskutierten Methoden die neue Länge des Arrays zurückgegeben.
let arr = [1, 2, 3, 4]; const unshifted = arr.unshift(5, 6, 7); console.log(arr);
▍Slice () - und splice () -Methoden
Diese Methoden werden verwendet, um das Array zu ändern oder einen Teil des Arrays zurückzugeben.
Die
splice() -Methode ändert den Inhalt eines Arrays, indem vorhandene Elemente gelöscht oder durch andere Elemente ersetzt werden. Er kann dem Array neue Elemente hinzufügen. Diese Methode ändert das Array.
Das folgende Beispiel sieht, wenn Sie es in gewöhnlicher Sprache beschreiben, folgendermaßen aus: Sie müssen an Array-Position
1 0 Elemente entfernen und ein Element hinzufügen, das
b .
let arr = ['a', 'c', 'd', 'e']; arr.splice(1, 0, 'b')
Die
slice() -Methode gibt eine flache Kopie des Arrays mit seinen Elementen zurück, beginnend an der angegebenen Startposition und endend mit der Position vor der angegebenen Endposition. Wenn beim Aufrufen nur die Anfangsposition angegeben wird, wird das gesamte Array ausgehend von dieser Position zurückgegeben. Diese Methode ändert das Array nicht. Es wird nur der Teil dieses Arrays zurückgegeben, der beim Aufruf beschrieben wurde.
let arr = ['a', 'b', 'c', 'd', 'e']; const sliced = arr.slice(2, 4); console.log(sliced);
▍ Methode sort ()
Die
sort() -Methode sortiert das Array gemäß der Bedingung, die durch die an sie übergebene Funktion angegeben wird. Diese Funktion verwendet zwei Elemente des Arrays (zum Beispiel können sie als Parameter
a und
b ) und gibt beim Vergleich, wenn die Elemente nicht ausgetauscht werden müssen, 0 zurück, wenn
a auf einen niedrigeren Index als gesetzt werden muss
b ist eine negative Zahl, und wenn
b auf einen niedrigeren Index als
a ist a eine positive Zahl.
let arr = [1, 7, 3, -1, 5, 7, 2]; const sorter = (firstEl, secondEl) => firstEl - secondEl; arr.sort(sorter); console.log(arr);
Wenn Sie sich zum ersten Mal nicht an diese Methoden erinnern können, ist es in Ordnung, sich an sie zu erinnern. Das Wichtigste ist, dass Sie jetzt wissen, was Standard-Array-Methoden können. Wenn Sie die Funktionen einer bestimmten Methode nicht sofort abrufen können, können Sie anhand Ihrer Kenntnisse schnell herausfinden, was Sie in der Dokumentation benötigen.
7. Generatoren
JavaScript-Generatoren werden mit einem Sternchen deklariert. Mit ihnen können Sie angeben, welcher Wert beim nächsten Aufruf der
next() -Methode zurückgegeben wird. Generatoren können so ausgelegt werden, dass sie eine begrenzte Anzahl von Werten zurückgeben. Wenn ein solcher Generator alle diese Werte zurückgibt, gibt der nächste Aufruf von
next() undefined . Sie können auch Generatoren erstellen, die mithilfe von Zyklen eine unbegrenzte Anzahl von Werten zurückgeben.
Hier ist ein Generator, der eine begrenzte Anzahl von Werten zurückgibt:
function* greeter() { yield 'Hi'; yield 'How are you?'; yield 'Bye'; } const greet = greeter(); console.log(greet.next().value);
Und hier ist ein Generator, der entwickelt wurde, um eine unendliche Anzahl von Werten durch eine Schleife zurückzugeben.
function* idCreator() { let i = 0; while (true) yield i++; } const ids = idCreator(); console.log(ids.next().value);
8. Operatoren zum Überprüfen der Gleichheit (==) und der strengen Gleichheit (===) von Werten
Für jeden JS-Entwickler ist es äußerst wichtig, den Unterschied zwischen Gleichheitsoperatoren (
== ) und strengen Gleichheitsoperatoren (
=== ) zu verstehen. Tatsache ist, dass der Operator
== vor dem Vergleich der Werte die Konvertierung ihrer Typen durchführt (was auf den ersten Blick zu seltsamen Konsequenzen führen kann) und der Operator
=== keine
=== durchführt.
console.log(0 == '0');
9. Vergleich von Objekten
Ich muss gelegentlich sehen, wie Neulinge in der JS-Programmierung den gleichen Fehler machen. Sie versuchen, Objekte direkt zu vergleichen. Die Variablen, in denen die Objekte "gespeichert" sind, enthalten Verweise auf sie und nicht auf diese Objekte selbst.
Im folgenden Beispiel sehen die Objekte beispielsweise gleich aus, aber beim direkten Vergleich werden wir darüber informiert, dass die Objekte unterschiedlich sind, da jede der Variablen eine Verknüpfung zu ihrem eigenen Objekt enthält und diese Verknüpfungen nicht gleich sind.
const joe1 = { name: 'Joe' }; const joe2 = { name: 'Joe' }; console.log(joe1 === joe2);
Darüber hinaus stellt sich im folgenden Beispiel heraus, dass
joe1 gleich
joe1 ist, da beide Variablen einen Verweis auf dasselbe Objekt speichern.
const joe1 = { name: 'Joe' }; const joe2 = joe1; console.log(joe1 === joe2);
Eine der Methoden zum Vergleich realer Objekte ist die vorläufige Konvertierung in das JSON-String-Format. Dieser Ansatz hat zwar ein Problem, nämlich dass in der erhaltenen Zeichenfolgendarstellung des Objekts eine bestimmte Reihenfolge seiner Eigenschaften nicht garantiert ist. Eine zuverlässigere Methode zum Vergleichen von Objekten besteht darin, eine spezielle Bibliothek zu verwenden, die Tools zum umfassenden Vergleich von Objekten enthält (dies ist beispielsweise die
isEqual () -Methode der
lodash- Bibliothek).
Schauen Sie sich das erste in diesem Artikel beschriebene JS-Konzept an, um die Feinheiten des Vergleichens von Objekten besser zu verstehen und die möglichen Konsequenzen des Schreibens von Links zu denselben Objekten in verschiedenen Variablen zu verstehen.
10. Rückruffunktionen
Rückruffunktionen sind ein ziemlich einfaches JavaScript-Konzept, mit dem Neulinge manchmal Schwierigkeiten haben. Betrachten Sie das folgende Beispiel. Hier wird die Funktion
console.log (einfach so - ohne Klammern
myFunc() als Rückruffunktion an
myFunc() . Diese Funktion legt einen Timer fest, nach dem
console.log() aufgerufen und die an
myFunc() Zeichenfolge in der Konsole angezeigt wird.
function myFunc(text, callback) { setTimeout(function() { callback(text); }, 2000); } myFunc('Hello world!', console.log);
11. Versprechen
Nachdem Sie die Rückruffunktionen gelernt und überall eingesetzt haben, befinden Sie sich bald in der sogenannten „Rückrufhölle“. Wenn Sie wirklich da sind - schauen Sie sich die Versprechen an. Asynchroner Code kann in ein Versprechen eingeschlossen werden und nach erfolgreicher Ausführung dem System durch Aufrufen der entsprechenden Methode die erfolgreiche Lösung des Versprechens mitteilen. Wenn etwas schief geht, rufen Sie die diesbezügliche Methode auf und lehnen Sie das Versprechen ab. Verwenden Sie die
then() -Methode und zur Fehlerbehandlung die
catch() -Methode, um die vom Versprechen zurückgegebenen Ergebnisse zu verarbeiten.
const myPromise = new Promise(function(res, rej) { setTimeout(function(){ if (Math.random() < 0.9) { return res('Hooray!'); } return rej('Oh no!'); }, 1000); }); myPromise .then(function(data) { console.log('Success: ' + data); }) .catch(function(err) { console.log('Error: ' + err); });
12. Konstrukt async / await
Nachdem Sie mit den Versprechungen gearbeitet haben, werden Sie möglicherweise etwas mehr wollen. Beherrschen Sie beispielsweise das Konstrukt async / await. Es ist syntaktischer Zucker für Versprechen. Im folgenden Beispiel erstellen wir mit dem
async eine asynchrone Funktion und organisieren darin mit dem Schlüsselwort
await das Warten auf den Abschluss des Begrüßungsversprechens.
const greeter = new Promise((res, rej) => { setTimeout(() => res('Hello world!'), 2000); }) async function myFunc() { const greeting = await greeter; console.log(greeting); } myFunc();
Zusammenfassung
Wenn Ihnen das, worüber wir hier zuvor gesprochen haben, nicht vertraut war, dann sind Sie höchstwahrscheinlich, zumindest ein wenig, aber durch das Lesen dieses Artikels über sich selbst gewachsen. Wenn Sie hier nichts Neues gefunden haben, hoffe ich, dass dieses Material Ihnen die Möglichkeit gab, Ihre Kenntnisse in JavaScript zu üben und zu vertiefen.
Liebe Leser! Welche anderen JavaScript-Konzepte würden Sie diesem Artikel hinzufügen?
