JavaScript - ECMAScript 2020: Ein Anfängerleitfaden

Hallo, angehende Programmierer! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt von ECMAScript 2020 zu sein. Als Informatiklehrer mit jahrelanger Erfahrung habe ich unzählige Schüler gesehen, die vor Begeisterung strahlen, wenn sie diese Konzepte verstehen. Also tauchen wir ein und erkunden die wunderbaren Features, die ES2020 der JavaScript-Sprache hinzufügt!

in ECMAScript 2020 hinzugefügte Funktionen

ECMAScript 2020, auch bekannt als ES2020, ist wie eine glänzende neue Werkzeugkiste für JavaScript-Entwickler. Es führt mehrere aufregende Funktionen ein, die unser Codieren einfacher und effizienter machen. Lassen Sie uns gemeinsam diese Werkzeugkiste öffnen und schauen, welche Schätze wir darin finden!

BigInt-Primitivdatentyp

Stellen Sie sich vor, Sie zählen Sterne am Nachthimmel. Es gibt Milliarden von ihnen! In der Vergangenheit hatte JavaScript eine Grenze dafür, wie groß eine Zahl sein konnte. Aber jetzt, mit BigInt, ist der Himmel die Obergrenze (im übertragenen Sinne)!

BigInt ermöglicht es uns, mit unglaublich großen Ganzzahlen zu arbeiten. Hier ist, wie Sie es verwenden können:

const bigNumber = 1234567890123456789012345678901234567890n;
console.log(bigNumber);
// Ausgabe: 1234567890123456789012345678901234567890n

const result = bigNumber + 1n;
console.log(result);
// Ausgabe: 1234567890123456789012345678901234567891n

In diesem Beispiel erstellen wir einen BigInt, indem wir 'n' an das Ende der Zahl hinzufügen. Das 'n' sagt JavaScript, "Hey, das ist ein BigInt!" Wir können mit BigInts wie mit regulären Zahlen operationen durchführen, aber denken Sie daran, 'n' zu jeder Zahl hinzuzufügen, die Sie mit BigInt verwenden.

Der Nullish-Koaleszenzoperator (??)

Haben Sie jemals das " Ratespiel für Geschenke" gespielt? Sie schütteln die Box und wenn Sie nichts hören, raten Sie, sie ist leer. Der Nullish-Koaleszenzoperator ist so etwas wie das, aber für Code!

Dieser Operator hilft uns zu überprüfen, ob ein Wert null oder undefined ist, und wenn ja, können wir einen Standardwert bereitstellen. Hier ist, wie es funktioniert:

let username = null;
console.log(username ?? "Gast");
// Ausgabe: "Gast"

username = "Alice";
console.log(username ?? "Gast");
// Ausgabe: "Alice"

Im ersten Fall ist username null, daher gibt der Operator "Gast" zurück. Im zweiten Fall hat username einen Wert, daher gibt er diesen Wert zurück. Es ist, als ob man sagt: "Wenn die Box leer ist, nehmen wir an, dass es einTeddybär ist!"

Die Methode Promise.allSettled()

Stellen Sie sich vor, Sie sind ein Lehrer (wie ich!) und warten darauf, dass alle Ihre Schüler eine Prüfung beenden. Einige könnten erfolgreich sein, andere könnten aufgeben. Promise.allSettled() ist so, als würde man darauf warten, dass jeder seine Arbeit abliefert, unabhängig davon, wie gut sie waren.

Hier ist ein Beispiel:

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];

Promise.allSettled(promises).then((ergebnisse) => ergebnisse.forEach((ergebnis) => console.log(ergebnis.status)));

// Ausgabe:
// "erfüllt"
// "abgelehnt"

In diesem Code haben wir zwei Versprechen. Ein Versprechen wird erfolgreich gelöst, das andere abgelehnt. Promise.allSettled() wartet auf das Beenden beider und gibt dann den Status jedes einzelnen zurück.

Die Methode String.matchAll()

Haben Sie jemals "Wo ist Waldo?" gespielt? Nun, matchAll() ist so etwas wie "Wo ist Waldo?" mit Text! Es hilft uns, alle Vorkommen eines Musters in einer Zeichenkette zu finden.

Sehen wir es in Aktion:

const text = "Die Katze und der Hut saßen auf der Matte.";
const regex = /at/g;
const matches = [...text.matchAll(regex)];

console.log(matches);
// Ausgabe: [
//   ['at', index: 7, input: 'Die Katze und der Hut saßen auf der Matte.', groups: undefined],
//   ['at', index: 19, input: 'Die Katze und der Hut saßen auf der Matte.', groups: undefined],
//   ['at', index: 31, input: 'Die Katze und der Hut saßen auf der Matte.', groups: undefined]
// ]

Hier suchen wir nach allen Vorkommen von "at" in unserem Text. matchAll() gibt einen Iterator zurück, den wir mit dem Spread-Operator (...) in ein Array umwandeln. Jedes Match gibt uns Informationen darüber, wo es im String gefunden wurde.

Der optionale Kettenoperator (?.)

Zuletzt aber nicht minder wichtig, sprechen wir über den optionalen Kettenoperator. Es ist wie ein vorsichtiger Forscher, der jeden Schritt des Pfades sorgfältig überprüft, bevor er weitergeht.

Hier ist, wie es funktioniert:

const user = {
name: "Alice",
address: {
street: "123 Hauptstraße"
}
};

console.log(user.address?.street);
// Ausgabe: "123 Hauptstraße"

console.log(user.phoneNumber?.home);
// Ausgabe: undefined

In diesem Beispiel versuchen wir, auf Eigenschaften zuzugreifen, die möglicherweise nicht existieren. Der ?. Operator ermöglicht es uns, dies sicher zu tun. Wenn user.address existiert, versucht er, auf street zuzugreifen. Wenn user.phoneNumber nicht existiert, stoppt er dort und gibt undefined zurück, anstatt einen Fehler zu werfen.

Methodentabelle

Hier ist eine praktische Tabelle, die die neuen Methoden zusammenfasst, die wir gelernt haben:

Methode	Beschreibung
BigInt	Ermöglicht die Arbeit mit großen Ganzzahlen
?? (Nullish Koaleszenz)	Bietet einen Standardwert für null oder undefined
Promise.allSettled()	Wartet darauf, dass alle Versprechen abgeschlossen sind
String.matchAll()	Findet alle Vorkommen eines Musters in einer Zeichenkette
?. (Optional Chaining)	Greift sicher auf verschachtelte Objekteigenschaften zu

Und da haben Sie es, Leute! Wir haben die aufregenden neuen Funktionen von ECMAScript 2020 erkundet. Denken Sie daran, der beste Weg zum Lernen ist Tun. Also starten Sie Ihren Code-Editor und fangen Sie an, mit diesen neuen Werkzeugen zu experimentieren. Viel Spaß beim Programmieren und möge Ihre JavaScript-Reise voller Begeisterung und Entdeckungen sein!

Credits: Image by storyset