JavaScript - ECMAScript 2021: Ein Anfängerleitfaden

Hallo da, zukünftiger Codingsuperstar! Ich freue mich sehr, dein Guide auf dieser aufregenden Reise in die Welt von ECMAScript 2021 zu sein. Als Informatiklehrer mit jahrelanger Erfahrung habe ich unzählige Schüler gesehen, die von completo Anfängern zu selbstbewussten Programmieren wurden. Heute werden wir die neuesten Funktionen von JavaScript erkunden, und ich verspreche, es so unterhaltsam und einfach wie möglich zu gestalten. Also hol dir dein Lieblingsgetränk, setz dich bequem hin, und tauchen wir ein!

Was ist ECMAScript 2021?

Bevor wir uns den neuen Funktionen zuwenden, lassen Sie uns schnell über was ECMAScript ist. Stell dir ECMAScript als das Kochbuch für JavaScript vor. Jedes Jahr fügen die Köche (alias die Sprachentwickler) neue Rezepte (Funktionen) hinzu, um unser Codingleben einfacher und leckere zu machen. ECMAScript 2021, auch bekannt als ES12, ist die neueste Ausgabe dieses Kochbuchs.

Neue Funktionen in ECMAScript 2021 hinzugefügt

ECMAScript 2021 bringt uns einige aufregende neue Werkzeuge zum Spielen. Es ist, als bekämen wir ein glänzendes neues Set LEGO-Steine, um unsere Sammlung zu erweitern. Lassen Sie uns jede dieser neuen Funktionen nacheinander erkunden.

Numerische Trennzeichen (_)

Hast du jemals versucht, eine wirklich lange Zahl wie 1000000000 zu lesen? Es ist ein bisschen ein Kopfschmerz, oder? Nun, das numerische Trennzeichen ist hier, um den Tag zu retten!

// Ohne numerisches Trennzeichen
const billion = 1000000000;

// Mit numerischem Trennzeichen
const billionReadable = 1_000_000_000;

console.log(billion === billionReadable); // Ausgabe: true

Das Unterstrich (_) in 1_000_000_000 ändert den Wert der Zahl nicht. Es ist nur da, damit es für uns Menschen einfacher zu lesen ist. Ist das nicht toll? Es ist wie das Hinzufügen von Leerzeichen in einem langen Satz, um ihn lesbarer zu machen.

Promise any() Methode

Promises in JavaScript sind wie das gleichzeitig tätigen von vielen Telefonanrufen und das Warten darauf, dass jemand abhebt. Die Promise.any() Methode ist eine neue Möglichkeit, mehrere Promises zu behandeln.

const promise1 = new Promise((resolve, reject) => setTimeout(reject, 100, 'promise1'));
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 200, 'promise2'));
const promise3 = new Promise((resolve, reject) => setTimeout(resolve, 300, 'promise3'));

Promise.any([promise1, promise2, promise3])
.then((value) => console.log(value))
.catch((error) => console.log(error));

// Ausgabe: promise2

In diesem Beispiel wird Promise.any() so schnell wie möglich gelöst, wenn eine der Promises im Array erfüllt ist. Es ist wie ein Wettrennen, bei dem wir nur darauf geben, wer als erster die Ziellinie überschreitet, unabhängig davon, wer Zweiter oder Dritter ist.

String replaceAll() Methode

Hast du jemals ein Wortersetzungsspiel gespielt? Die replaceAll() Methode ist so eine Art von diesem, aber für Strings in JavaScript.

const sentence = "Ich liebe Katzen. Katzen sind großartige Haustiere.";
const newSentence = sentence.replaceAll("Katzen", "Hunde");

console.log(newSentence); // Ausgabe: "Ich liebe Hunde. Hunde sind großartige Haustiere."

Vor replaceAll() mussten wir reguläre Ausdrücke oder Schleifen verwenden, um alle Vorkommen eines Substrings zu ersetzen. Jetzt ist es so einfach wie das Aufrufen einer einzigen Methode!

Logische Zuweisungsoperatoren

ECMAScript 2021 führt drei neue logische Zuweisungsoperatoren ein. Diese sind wie Abkürzungen für häufige Muster in JavaScript. Lassen Sie uns jeden einzelnen anschauen:

Logischer UND Zuweisungsoperator (&&=)

let x = 1;
let y = 2;

x &&= y;

console.log(x); // Ausgabe: 2

// Dies ist äquivalent zu:
// x && (x = y);

Der &&= Operator weist den rechten Wert nur zu, wenn der linke Wert wahr ist. Es ist, als würde man sagen: "Wenn x wahr ist, dann mach es equal zu y."

Logischer ODER Zuweisungsoperator (||=)

let a = null;
let b = 'Standardwert';

a ||= b;

console.log(a); // Ausgabe: "Standardwert"

// Dies ist äquivalent zu:
// a || (a = b);

Der ||= Operator weist den rechten Wert nur zu, wenn der linke Wert falsch ist. Es ist perfekt zum Setzen von Standardwerten!

Nullish Coalescing Zuweisungsoperator (??=)

let foo = null;
let bar = 'baz';

foo ??= bar;

console.log(foo); // Ausgabe: "baz"

// Dies ist äquivalent zu:
// foo ?? (foo = bar);

Der ??= Operator weist den rechten Wert nur zu, wenn der linke Wert null oder undefined ist. Es ist ähnlich wie ||=, aber spezifischer darüber, was es als "leer" ansieht.

Methodenübersicht

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

Methode	Beschreibung	Beispiel
Numerische Trennzeichen	Macht große Zahlen lesbarer	1_000_000_000
Promise.any()	Löst, wenn jede Promise in einem Array erfüllt ist	Promise.any([promise1, promise2, promise3])
String.replaceAll()	Ersetzt alle Vorkommen eines Substrings	"hello hello".replaceAll("hello", "hi")
&&=	Weist zu, wenn die linke Seite wahr ist	x &&= y
||=	Weist zu, wenn die linke Seite falsch ist	x \|\|= y
??=	Weist zu, wenn die linke Seite null oder undefined ist	x ??= y

Und das war's, Leute! Wir haben die aufregenden neuen Funktionen von ECMAScript 2021 durchlaufen. Denke daran, der beste Weg, Programmieren zu lernen, ist durch Tun. Also experimentiere mit diesen neuen Funktionen, probiere sie aus und vor allem, habe Spaß!

Wie mein alter Programmierprofessor immer sagte: "Coding ist wie Kochen. Am Anfang kannst du vielleicht ein paar Gerichte verbrennen, aber mit der Übung wirst du in kürzester Zeit Meisterwerke schaffen!" Also habe keine Angst vor Fehlern - sie sind alle Teil des Lernprozesses.

Weiter codieren, bleib neugierig und viel Spaß beim Lernen!

Credits: Image by storyset