JavaScript - ECMAScript 2017: Ein Anfängerleitfaden

Hallo da draußen, zukünftige Programmierer! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt von ECMAScript 2017 zu sein. Als jemand, der seit über einem Jahrzehnt Informatik unterrichtet, kann ich Ihnen versichern, dass das Lernen von JavaScript wie das Entschlüsseln eines Superkräfte in der digitalen Ära ist. Also tauchen wir ein und erkunden die fantastischen Funktionen, die in ECMAScript 2017 eingeführt wurden!

Neue Funktionen in ECMAScript 2017 hinzugefügt

ECMAScript 2017, auch bekannt als ES8, brachte einige spielverändernde Funktionen in JavaScript. Stellen Sie es sich vor wie ein neues Set von Werkzeugen, das zu Ihrer Coding-Werkzeugkiste hinzugefügt wurde. Diese Funktionen machen unser Leben als Entwickler einfacher und unseren Code effizienter. Lassen Sie uns sie einzeln durchgehen!

String Padding: padStart() und padEnd() Methoden

Haben Sie jemals extra Zeichen am Anfang oder Ende einer Zeichenkette hinzufügen müssen, um eine bestimmte Länge zu erreichen? ECMAScript 2017 hat für Sie gesorgt mit den padStart() und padEnd() Methoden!

padStart()

Die padStart() Methode füllt die aktuelle Zeichenkette mit einer anderen Zeichenkette, bis die resultierende Zeichenkette die angegebene Länge erreicht. Die Auffüllung wird vom Anfang der aktuellen Zeichenkette angewendet.

let str = '5';
console.log(str.padStart(3, '0')); // Ausgabe: '005'

In diesem Beispiel fügen wir der Zeichenkette '5' mit Nullen hinzu, bis sie 3 Zeichen lang ist. Es ist, als ob man führende Nullen zu einer Zahl hinzufügt!

padEnd()

Ähnlich wie padStart() füllt padEnd() die aktuelle Zeichenkette vom Ende an.

let price = '99';
console.log(price.padEnd(5, '.00')); // Ausgabe: '99.00'

Hier fügen wir '.00' am Ende von '99' hinzu, um es wie einen Preis mit Cent aussehen zu lassen.

Diese Methoden sind super praktisch, wenn Sie Zeichenketten für die Anzeige formatieren oder Text auf eine bestimmte Weise ausrichten müssen.

Die Object.entries() Methode

Nun, lassen Sie uns über Object.entries() sprechen. Diese Methode ist wie ein Zauberer, der ein Objekt in ein Array von Schlüssel-Wert-Paaren verwandelt. Sie ist unglaublich nützlich, wenn Sie über die Eigenschaften eines Objekts iterieren müssen.

let person = {
name: 'Alice',
age: 30,
city: 'New York'
};

console.log(Object.entries(person));
// Ausgabe: [['name', 'Alice'], ['age', 30], ['city', 'New York']]

In diesem Beispiel verwandelt Object.entries() unser person Objekt in ein Array, in dem jedes Element ein weiteres Array ist, das ein Schlüssel-Wert-Paar enthält. Es ist, als ob man einen Koffer öffnet und alle Inhalte ausgebreitet!

Die Object.values() Methode

Object.values() ist die Cousine von Object.entries(). Statt uns Schlüssel-Wert-Paare zu geben, gibt sie ein Array nur der Werte im Objekt zurück.

let fruits = {
apple: 5,
banana: 3,
orange: 2
};

console.log(Object.values(fruits)); // Ausgabe: [5, 3, 2]

Diese Methode ist perfekt, wenn Sie sich nur um die Werte im Objekt und nicht um ihre Schlüssel kümmern. Es ist wie ein Einkaufszettel ohne Preise!

JavaScript async und await

Nun betreten wir das Reich des asynchronen JavaScript mit async und await. Diese Schlüsselwörter machen die Arbeit mit Promises (eine Möglichkeit, asynchrone Operationen zu handhaben) viel einfacher und lesbarer.

async function fetchUserData() {
try {
let response = await fetch('https://api.example.com/user');
let userData = await response.json();
console.log(userData);
} catch (error) {
console.error('Failed to fetch user data:', error);
}
}

fetchUserData();

In diesem Beispiel tells async JavaScript, dass diese Funktion asynchronen Code ausführen wird. Das await Schlüsselwort pausiert die Ausführung der Funktion, bis das Promise gelöst ist. Es ist, als ob JavaScript sagt: "Warte hier, bis diese Aufgabe erledigt ist, bevor du weitermachst."

Dies macht asynchronen Code úgy aussehen und sich verhalten wie synchrone Code, was viel einfacher zu lesen und zu verstehen ist!

Die Object.getOwnPropertyDescriptors() Methode

Diese Methode mag einschüchternd klingen, aber sie ist tatsächlich quite nützlich! Sie gibt alle eigenen Eigenschaftsdeskriptoren eines gegebenen Objekts zurück.

let obj = {
name: 'John',
get age() { return 30; }
};

console.log(Object.getOwnPropertyDescriptors(obj));
/* Ausgabe:
{
name: {
value: 'John',
writable: true,
enumerable: true,
configurable: true
},
age: {
get: [Function: get age],
set: undefined,
enumerable: true,
configurable: true
}
}
*/

Diese Methode ist besonders nützlich, wenn Sie Eigenschaften von einem Objekt auf ein anderes kopieren müssen, einschließlich ihrer Deskriptoren (wie Getter und Setter).

JavaScript Shared Memory und Atomics

Zuletzt wollen wir uns Shared Memory und Atomics anschauen. Diese Funktionen erlauben verschiedenen Threads in JavaScript, den gleichen Speicherbereich zu teilen und atomare Operationen auszuführen.

// Erstellen eines geteilten Puffers
let sharedBuffer = new SharedArrayBuffer(4);
let sharedArray = new Int32Array(sharedBuffer);

// Ausführen atomarer Operationen
Atomics.store(sharedArray, 0, 42);
console.log(Atomics.load(sharedArray, 0)); // Ausgabe: 42

Dies ist fortgeschrittener Stoff, hauptsächlich in Szenarien verwendet, in denen Sie in JavaScript eine hohe Leistungsfähigkeit benötigen. Es ist, als ob mehrere Köche in der gleichen Küche arbeiten könnten, ohne sich gegenseitig in die Quere zu kommen!

Zusammenfassung der neuen Methoden

Hier ist eine kurze Referenztabelle der neuen Methoden, die wir besprochen haben:

Methode	Beschreibung
String.prototype.padStart()	Füllt den Anfang einer Zeichenkette mit einer gegebenen Zeichenkette
String.prototype.padEnd()	Füllt das Ende einer Zeichenkette mit einer gegebenen Zeichenkette
Object.entries()	Gibt ein Array der eigenen enumerable string-keyed Eigenschaftsschlüssel und -werte eines Objekts zurück
Object.values()	Gibt ein Array der eigenen enumerable Eigenschaftswerte eines Objekts zurück
Object.getOwnPropertyDescriptors()	Gibt alle eigenen Eigenschaftsdeskriptoren eines gegebenen Objekts zurück
Atomics Methoden	Bietet atomare Operationen als statische Methoden auf dem Atomics-Objekt

Und das war's! Wir haben die wichtigsten Funktionen in ECMAScript 2017 behandelt. Erinnern Sie sich daran, dass das Lernen zu programmieren eine Reise, keine Ziel ist. Weiter üben, weiter erkunden und vor allem: haben Sie Spaß dabei! Frohes Coden!

Credits: Image by storyset