ECMAScript 2018: Ein freundlicher Leitfaden für Anfänger

Hallo da draußen, zukünftige JavaScript-Zauberer! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise durch ECMAScript 2018 zu sein. Als jemand, der seit Jahren Programmieren unterrichtet, kann ich es kaum erwarten, diese neuen Funktionen mit Ihnen zu teilen. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind – wir gehen Schritt für Schritt vor, und bevor Sie es wissen, schreiben Sie JavaScript wie ein Profi!

Neue hinzugefügte Funktionen in ECMAScript 2018

ECMAScript 2018, auch bekannt als ES9, bringt einige großartige Ergänzungen für die JavaScript-Sprache mit. Es ist, als bekäme man ein glänzendes neues Werkzeugkasten für Ihre Programmierabenteuer! Lassen Sie uns diese Funktionen der Reihe nach erkunden.

Asynchrone Iteration in JavaScript

Stellen Sie sich vor, Sie sind an einem Buffet und können nicht alles auf einmal auf Ihren Teller laden, sondern jedes Gericht zauberhaft herbeirufen, wenn Sie bereit sind, es zu essen. Das ist ein bisschen, was asynchrone Iteration für Ihren Code macht!

Die for-await-of-Schleife

Diese neue Schleife ermöglicht es uns, mit asynchronen Datenquellen einfacher zu arbeiten. Hier ist ein Beispiel:

async function* numberGenerator() {
yield Promise.resolve(1);
yield Promise.resolve(2);
yield Promise.resolve(3);
}

async function printNumbers() {
for await (const num of numberGenerator()) {
console.log(num);
}
}

printNumbers();
// Ausgabe:
// 1
// 2
// 3

In diesem Beispiel ist numberGenerator eine asynchrone Generatorfunktion, die Versprechen erzeugt. Die for-await-of-Schleife wartet auf die Auflösung jedes Versprechens, bevor sie zur nächsten Iteration übergeht. Es ist, als hätte man einen geduldigen Freund, der wartet, bis man jeden Bissen gegessen hat, bevor er das nächste Gericht anbietet!

Neue Funktionen des RegExp()-Objekts

RegExp, oder reguläre Ausdrücke, sind wie das Schweizer Army-Messer der Textverarbeitung. ECMAScript 2018 hat einige coole neue Tricks zu diesem Werkzeug hinzugefügt.

Unicode-Eigenschafts-Escape

Diese Funktion ermöglicht es uns, Zeichen basierend auf ihren Unicode-Eigenschaften zu matchen. Es ist super nützlich bei der Arbeit mit internationalen Texten!

const greekSymbol = "π";
console.log(/\p{Script=Greek}/u.test(greekSymbol)); // true

Hier matcht \p{Script=Greek} jedes Zeichen im griechischen Script. Das u-Flag aktiviert den Unicode-Modus.

Lookbehind-An Assertions

Jetzt können wir überprüfen, was vor unserem Match kommt, nicht nur danach. Es ist, als könnte man im Programmierwelt über die Schulter schauen!

const price = "$123.45";
console.log(price.match(/(?<=\$)\d+(\.\d*)?/)[0]); // "123.45"

In diesem Beispiel ist (?<=\$) eine positive Lookbehind, die sicherstellt, dass unser Match von einem Dollarzeichen begleitet wird, ohne das Dollarzeichen im Match zu inkludieren.

Benannte Erfassungsgruppen

Wir können jetzt unseren Erfassungsgruppen Namen geben, was unsere regulären Ausdrücke lesbarer und wartbarer macht.

const dateRegex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const match = dateRegex.exec("2023-05-15");
console.log(match.groups.year);  // "2023"
console.log(match.groups.month); // "05"
console.log(match.groups.day);   // "15"

Es ist, als würde man die Fächer in seinem Werkzeugkasten beschriften – alles ist einfacher zu finden!

JavaScript Promise finally()

Versprechen in JavaScript sind wie ein Plan mit einem Freund zu machen. Manchmal klappt es, manchmal nicht, aber auf jeden Fall möchte man vielleicht danach etwas tun. Hier kommt finally() ins Spiel!

function fetchData() {
return new Promise((resolve, reject) => {
// Simulierung eines API-Aufrufs
setTimeout(() => {
const success = Math.random() > 0.5;
if (success) {
resolve("Daten erfolgreich abgerufen!");
} else {
reject("Fehler beim Abrufen der Daten");
}
}, 1000);
});
}

fetchData()
.then(data => console.log(data))
.catch(error => console.error(error))
.finally(() => console.log("Operation abgeschlossen"));

In diesem Beispiel wird der finally-Block immer ausgeführt, egal ob das Versprechen gelöst oder abgelehnt wird. Es ist, als würde man sagen: "Ob wir Erfolg oder Misserfolg haben, wir räumen auf und gehen nach Hause."

JavaScript Rest-Objekteigenschaften

Der Restoperator (...) in Objektliterale ist wie ein magischer Beutel, der alle Reste aufnehmen kann. Es ist super praktisch, wenn man einige Eigenschaften vom Rest trennen möchte.

const person = {
name: "Alice",
age: 30,
city: "Wonderland",
occupation: "Explorer"
};

const { name, age, ...rest } = person;

console.log(name);  // "Alice"
console.log(age);   // 30
console.log(rest);  // { city: "Wonderland", occupation: "Explorer" }

In diesem Beispiel ziehen wir name und age heraus, und alles andere wird in rest gesteckt. Es ist, als würde man seine Wäsche sortieren – Socken in einen Haufen, alles andere in einen anderen!

Schlussfolgerung

Und hier haben Sie es, Leute! Wir haben die aufregenden neuen Funktionen von ECMAScript 2018 durchquert. Denken Sie daran, der beste Weg zu lernen ist durch Tun, also fürchten Sie sich nicht, mit diesen neuen Werkzeugen zu experimentieren. Programmieren ist wie Kochen – je öfter man übt, desto besser wird man!

Hier ist eine schnelle Referenztabelle der Methoden, die wir behandelt haben:

Funktion	Beschreibung
for-await-of	Ermöglicht asynchrone Iteration über Versprechen
Unicode-Eigenschafts-Escape	Matcht Zeichen basierend auf Unicode-Eigenschaften in RegExp
Lookbehind-An Assertions	Überprüft Matches basierend auf dem Vorherigen in RegExp
Benannte Erfassungsgruppen	Ermöglicht die Namensgebung von Erfassungsgruppen in RegExp
Promise.prototype.finally()	Definiert einen Callback, der nach der Beendigung eines Versprechens ausgeführt wird
Rest-Objekteigenschaften	Sammelt verbleibende Eigenschaften in ein neues Objekt

Frohes Programmieren und möge Ihre JavaScript-Abenteuer stets spannend sein!

Credits: Image by storyset