JavaScript - ECMAScript 2019: Ein Anfängerleitfaden

Hallo da draußen, zukünftige Codingsuperstars! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt von ECMAScript 2019 zu sein. Als jemand, der schon seit Jahren Programmieren unterrichtet, kann ich es kaum erwarten, Ihnen die Wunder dieser Sprache zu zeigen. Also, holt euch eure virtuellen Notizbücher und tauchen wir ein!

Einführung in ECMAScript 2019

Bevor wir beginnen, lassen Sie uns schnell über das was ECMAScript ist, sprechen. Stellt euch vor, JavaScript ist ein leckeres Cake und ECMAScript ist das Rezept. Jedes Jahr wird das Rezept ein bisschen verfeinert und verbessert, und 2019 war keine Ausnahme. ECMAScript 2019 hat uns einige leckere neue Features beschert, die unser JavaScript Cake noch köstlicher gemacht haben!

Neue Features in ECMAScript 2019 hinzugefügt

ECMAScript 2019 hat mehrere aufregende Features eingeführt, die unser Leben als Entwickler einfacher machen. Lassen wir uns sie doch mal einzeln ansehen, nicht wahr?

JavaScript Array flat() Methode

Habt ihr schon einmal einen schmutzigen Raum mit Kisten in Kisten gehabt? Das ist ein bisschen so wie verschachtelte Arrays in JavaScript. Die flat() Methode ist wie ein magischer Reinigungsroboter, der alle diese Kisten öffnet und alles in eine saubere Schicht packt.

Seht es euch mal an:

const schmutzigerRaum = [1, 2, [3, 4, [5, 6]]];
const aufgeräumterRaum = schmutzigerRaum.flat(2);
console.log(aufgeräumterRaum); // Ausgabe: [1, 2, 3, 4, 5, 6]

In diesem Beispiel ist schmutzigerRaum unser verschachteltes Array. Die flat(2) Methode geht zwei Ebenen tief, um das Array zu glätten. Das Ergebnis ist aufgeräumterRaum, wo alle Zahlen auf der gleichen Ebene sind. Prima, oder?

JavaScript Array flatMap()

Stellt euch vor, unser Reinigungsroboter könnte nicht nur aufräumen, sondern auch Gegenstände auf dem Weg transformieren. Genau das macht flatMap()! Es ist wie map() und flat() haben ein supergestärktes Baby bekommen.

Hier ist ein spaßiges Beispiel:

const tiere = ["dog", "cat", "fish"];
const tierGeräusche = tiere.flatMap(tier => {
if (tier === "dog") return ["woof", "bark"];
if (tier === "cat") return ["meow"];
return [];
});
console.log(tierGeräusche); // Ausgabe: ["woof", "bark", "meow"]

In diesem Code nehmen wir unser tiere Array und erstellen ein neues Array mit ihren Geräuschen. Beachtet, wie der Hund zwei Geräusche hat, aber sie landen trotzdem im gleichen glatten Array. Der arme Fisch - zu leise, um auf die Liste zu kommen!

Überarbeitete Array sort() Methode

Die sort() Methode hat in ECMAScript 2019 ein kleines Makeover bekommen. Sie garantiert nun, dass Arrays auf eine stabile Weise sortiert werden. Was bedeutet das? Wenn zwei Elemente vom Sortieralgorithmus als gleich angesehen werden, behalten sie ihre ursprüngliche Reihenfolge relativ zueinander.

Schauen wir uns ein Beispiel an:

const schüler = [
{name: "Alice", note: "B"},
{name: "Bob", note: "A"},
{name: "Charlie", note: "B"},
{name: "David", note: "A"}
];

schüler.sort((a, b) => a.note.localeCompare(b.note));
console.log(schüler);
/* Ausgabe:
[
{name: "Bob", note: "A"},
{name: "David", note: "A"},
{name: "Alice", note: "B"},
{name: "Charlie", note: "B"}
]
*/

In diesem Beispiel sortieren wir Schüler nach ihren Noten. Beachtet, wie Bob und David (beide mit Note A) ihre ursprüngliche Reihenfolge behalten, und das gleiche gilt für Alice und Charlie (beide mit Note B). Diese stabile Sortierung kann in vielen Anwendungen entscheidend sein!

JavaScript Object fromEntries

Habt ihr jemals gewünscht, dass ihr eine Reihe von Schlüssel-Wert-Paaren in ein Objekt umwandeln könnt?Nun könnt ihr das mit Object.fromEntries()! Es ist wie Magie, aber besser, weil es JavaScript ist.

Schaut es euch an:

const einträge = [
['name', 'Alice'],
['age', 25],
['city', 'Wonderland']
];

const person = Object.fromEntries(einträge);
console.log(person);
// Ausgabe: { name: 'Alice', age: 25, city: 'Wonderland' }

In diesem Beispiel beginnen wir mit einer Liste von Schlüssel-Wert-Paaren. Object.fromEntries() verwandelt diese in ein Objekt, bei dem jedes Paar eine Eigenschaft wird. Es ist das Gegenteil von Object.entries(), das wir schon länger haben.

Optionaler Catch-Zusammenhang

Fehlerbehandlung ist jetzt ein bisschen glatter mit optionaler Catch-Zusammenfassung. Bisher mussten wir immer einen Fehlerparameter in unserem Catch-Abschnitt angeben, auch wenn wir ihn nicht verwendet haben. Jetzt können wir ihn weglassen, wenn wir ihn nicht brauchen.

So sieht es aus:

// Vor ECMAScript 2019
try {
// Einige Codezeilen, die möglicherweise einen Fehler werfen
} catch (error) {
console.log("Ein Fehler ist aufgetreten");
}

// Mit ECMAScript 2019
try {
// Einige Codezeilen, die möglicherweise einen Fehler werfen
} catch {
console.log("Ein Fehler ist aufgetreten");
}

Seht ihr, wie wir die (error)-Teile im zweiten Beispiel entfernt haben? Das ist die optionale Catch-Zusammenfassung in Aktion. Es ist eine kleine Änderung, aber sie kann unseren Code sauberer machen, wenn wir das Fehlerobjekt nicht brauchen.

Überarbeitete JSON.stringify()

JSON.stringify() ist in ECMAScript 2019 ein bisschen klüger geworden. Es behandelt einige Unicode-Zeichen besser, ensuring dass unser JSON gültig bleibt.

Hier ist ein Beispiel:

const obj = { name: "Pikachu\uD800" };
console.log(JSON.stringify(obj));
// Ausgabe: {"name":"Pikachu�"}

In diesem Fall ist \uD800 ein unpaarer Surrogate, der bei einigen JSON-Parsern Probleme verursachen könnte. Das neue JSON.stringify() ersetzt es durch das Unicode-Ersatzzeichen (�), um das JSON gültig zu halten.

Überarbeitete Function toString()

Die toString()-Methode für Funktionen gibt nun den exakten Sourcecode der Funktion zurück, einschließlich aller Leerzeichen und Kommentare. Es ist, als bekäme man ein perfektes Fotokopie deiner Funktion!

Seht es euch mal an:

function grüße(name) {
// Dies ist eine Grußfunktion
console.log(`Hallo, ${name}!`);
}

console.log(grüße.toString());
/* Ausgabe:
function grüße(name) {
// Dies ist eine Grußfunktion
console.log(`Hallo, ${name}!`);
}
*/

Wie ihr sehen könnt, enthält die Ausgabe den Kommentar und bewahrt die ursprüngliche Formatierung. Dies kann super hilfreich für Debugging oder die Erstellung von Dokumentation sein!

Trennzeichen in String-Literalen erlaubt

ECMAScript 2019 bringt eine kleine, aber nützliche Änderung: Ihr könnt jetzt U+2028 (Zeilenseparator) und U+2029 (Absatzseparator) in String-Literalen ohne Escape verwenden.

Hier ist ein Beispiel:

const text = "Zeile 1 separator→\u2028←Zeile 2";
console.log(text);
// Ausgabe:
// Zeile 1
// Zeile 2

Diese Änderung macht es einfacher, mit Text umzugehen, der diese Separatorzeichen enthalten kann, insbesondere wenn man mit Daten aus anderen Quellen arbeitet.

JavaScript String trimStart() und trimEnd()

Zuletzt, aber nicht minder wichtig, haben wir zwei neue String-Methoden bekommen: trimStart() und trimEnd(). Diese sind wie trim(), aber sie entfernen nur Leerzeichen von einer Seite des Strings.

Seht es euch mal an:

const schmutzig = "   Hallo, Welt!   ";
console.log(schmutzig.trimStart()); // Ausgabe: "Hallo, Welt!   "
console.log(schmutzig.trimEnd());   // Ausgabe: "   Hallo, Welt!"
console.log(schmutzig.trim());      // Ausgabe: "Hallo, Welt!"

Diese Methoden sind großartig, wenn ihr nur eine Seite eures Strings säubern wollt. Sie sind Aliase für die älteren trimLeft() und trimRight()-Methoden, aber mit Namen, die klarer beschreiben, was sie tun.

Schlussfolgerung

Und hier habt ihr es, Leute! Wir haben die aufregenden neuen Features von ECMAScript 2019 durchgemacht. Von flachen Arrays bis hin zu aufgeräumten Strings, diese Ergänzungen machen unser JavaScript leistungsstärker und einfacher zu verwenden.

Denkt daran, der beste Weg zu lernen ist durch Tun. Also, geht los und experimentiert mit diesen neuen Features in eurem eigenen Code. Haltet euch nicht von Fehlern ab - das ist, wie wir lernen und wachsen als Programmierer.

Frohes Coden und möge eure JavaScript-Abenteuer frei von Bugs und voller Freude sein!

Methode	Beschreibung
Array.prototype.flat()	Flacht verschachtelte Arrays bis zu einer angegebenen Tiefe
Array.prototype.flatMap()	Mappt jedes Element mit einer Abbildungsfunktion und flacht das Ergebnis
Array.prototype.sort()	Sortiert die Elemente eines Arrays an Ort und Stelle (nun stabil)
Object.fromEntries()	Wandelt eine Liste von Schlüssel-Wert-Paaren in ein Objekt um
try...catch	Unterstützt optionalen Catch-Zusammenhang
JSON.stringify()	Bessere Behandlung von Unicode-Zeichen
Function.prototype.toString()	Gibt den exakten Sourcecode der Funktion zurück
String.prototype.trimStart()	Entfernt Leerzeichen von der Beginning eines Strings
String.prototype.trimEnd()	Entfernt Leerzeichen vom Ende eines Strings

Credits: Image by storyset