JavaScript - ES5: Ein umfassender Leitfaden für Anfänger

Hallo da draußen, ambitionierte JavaScript-Entwickler! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt von JavaScript ES5 zu sein. Als Informatiklehrer mit jahrelanger Erfahrung habe ich unzählige Schüler gesehen, die von kompletten Anfängern zu selbstbewussten Programmieren wurden. Also keine Sorge, wenn du von null anfängst – wir werden dies Schritt für Schritt angehen, und bevor du es bemerkst, wirst du JavaScript wie ein Profi schreiben!

Neue hinzugefügte Features in JavaScript ES5

JavaScript ES5, veröffentlicht im Jahr 2009, brachte eine Menge cooler neuer Features in die Sprache. Es ist wie bei deinem Lieblings-Videospiel, das ein großartiges Update erhält – plötzlich hast du neue Werkzeuge und Fähigkeiten, die alles spaßiger und effizienter machen! Lassen wir uns in diese Features tauchen und sehen, wie sie unser Coding-Leben erleichtern können.

JavaScript-Array-Methoden

Arrays sind wie die Schweizer Army knives von JavaScript – sie sind unglaublich vielseitig und können mit allen Arten von Daten umgehen. ES5 führte mehrere neue Methoden ein, die das Arbeiten mit Arrays zum Kinderspiel machen. Sehen wir uns diese einmal an:

JavaScript Array every()

Die every()-Methode ist wie ein strenger Lehrer, der überprüft, ob alle Schüler in einer Klasse ihre Hausaufgaben gemacht haben. Sie testet, ob alle Elemente in einem Array einer bestimmten Bedingung entsprechen.

let numbers = [2, 4, 6, 8, 10];
let allEven = numbers.every(function(num) {
return num % 2 === 0;
});
console.log(allEven); // Ausgabe: true

In diesem Beispiel überprüft every(), ob alle Zahlen im Array gerade sind. Da sie es sind, gibt es true zurück.

JavaScript Array filter()

filter() ist wie ein Türsteher in einem Club, der nur die Elemente hereinlässt, die bestimmte Kriterien erfüllen. Es erstellt ein neues Array mit allen Elementen, die den Test, der durch die bereitgestellte Funktion implementiert wird, bestehen.

let fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
let longFruits = fruits.filter(function(fruit) {
return fruit.length > 5;
});
console.log(longFruits); // Ausgabe: ['banana', 'cherry', 'elderberry']

Hier erstellt filter() ein neues Array, das nur die Früchte mit Namen länger als 5 Zeichen enthält.

JavaScript Array forEach()

forEach() ist wie ein Reiseleiter, der dich durch jedes Element eines Arrays einzeln führt. Es führt eine bereitgestellte Funktion einmal für jedes Array-Element aus.

let colors = ['red', 'green', 'blue'];
colors.forEach(function(color, index) {
console.log(`Farbe an Position ${index} ist ${color}`);
});
// Ausgabe:
// Farbe an Position 0 ist red
// Farbe an Position 1 ist green
// Farbe an Position 2 ist blue

Diese Methode ist großartig zum Ausführen einer Aktion auf jedem Element eines Arrays, ohne ein neues Array zu erstellen.

JavaScript Array isArray()

isArray() ist wie ein Detektiv, der feststellt, ob ein Objekt ein Array ist oder nicht. Es gibt true zurück, wenn das Objekt ein Array ist, und false, wenn es nicht ist.

console.log(Array.isArray([1, 2, 3])); // Ausgabe: true
console.log(Array.isArray('Hello')); // Ausgabe: false

Diese Methode ist besonders nützlich, wenn du überprüfen musst, ob eine Variable ein Array ist, bevor du array-spezifische Operationen ausführst.

JavaScript Array indexOf()

indexOf() ist wie eine Suchmannschaft, die nach einem bestimmten Element in einem Array sucht und dir sagt, wo es sich befindet. Es gibt den ersten Index zurück, an dem ein gegebenes Element im Array gefunden werden kann, oder -1, wenn es nicht vorhanden ist.

let fruits = ['apple', 'banana', 'cherry', 'date'];
console.log(fruits.indexOf('cherry')); // Ausgabe: 2
console.log(fruits.indexOf('grape')); // Ausgabe: -1

Diese Methode ist praktisch, wenn du die Position eines Elements im Array finden musst.

JavaScript Array lastIndexOf()

lastIndexOf() ist ähnlich wie indexOf(), aber es beginnt von hinten zu suchen. Es gibt den letzten Index zurück, an dem ein gegebenes Element im Array gefunden werden kann, oder -1, wenn es nicht vorhanden ist.

let numbers = [1, 2, 3, 2, 1];
console.log(numbers.lastIndexOf(2)); // Ausgabe: 3
console.log(numbers.lastIndexOf(4)); // Ausgabe: -1

Diese Methode ist nützlich, wenn du die letzte Vorkommen eines Elements im Array finden möchtest.

JavaScript Array map()

map() ist wie eine magischestab, der jedes Element eines Arrays transformiert. Es erstellt ein neues Array mit den Ergebnissen der aufgerufenen Funktion auf jedem Element im Array.

let numbers = [1, 2, 3, 4, 5];
let squared = numbers.map(function(num) {
return num * num;
});
console.log(squared); // Ausgabe: [1, 4, 9, 16, 25]

In diesem Beispiel erstellt map() ein neues Array, in dem jede Zahl quadriert ist.

JavaScript Array reduce()

reduce() ist wie ein Schneeball, der den Berg hinunter rollt und Werte ansammelt. Es führt eine Reduzierfunktion auf jedes Element des Arrays aus, resulting in einem einzigen Ausgabewert.

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
console.log(sum); // Ausgabe: 15

Hier wird reduce() verwendet, um alle Zahlen im Array zu summieren.

JavaScript Array reduceRight()

reduceRight() ist ähnlich wie reduce(), aber es verarbeitet das Array von rechts nach links.

let numbers = [1, 2, 3, 4, 5];
let result = numbers.reduceRight(function(accumulator, currentValue) {
return accumulator - currentValue;
});
console.log(result); // Ausgabe: -5 (5 - 4 - 3 - 2 - 1)

Diese Methode ist nützlich, wenn die Reihenfolge der Verarbeitung wichtig ist und du von hinten beginnen möchtest.

JavaScript Array some()

some() ist wie ein nachsichtiger Lehrer, der zufrieden ist, wenn mindestens ein Schüler seine Hausaufgaben gemacht hat. Es testet, ob mindestens ein Element im Array den Test besteht, der durch die bereitgestellte Funktion implementiert wird.

let numbers = [1, 3, 5, 7, 8, 9];
let hasEven = numbers.some(function(num) {
return num % 2 === 0;
});
console.log(hasEven); // Ausgabe: true

In diesem Beispiel überprüft some(), ob mindestens eine Zahl im Array gerade ist.

JavaScript-DatDMETHODen

ES5 führte auch einige praktische Methoden für das Arbeiten mit Daten ein:

JavaScript Date now()

Date.now() gibt die Anzahl der Millisekunden zurück, die seit dem 1. Januar 1970 00:00:00 UTC vergangen sind.

console.log(Date.now()); // Ausgabe: aktueller Zeitstempel in Millisekunden

Diese Methode ist nützlich für die Messung von Zeitintervallen oder die Generierung eindeutiger Identifikatoren.

JavaScript Date toJSON()

toJSON() gibt eine Zeichenfolgenrepräsentation des Date-Objekts im JSON-Format zurück.

let date = new Date();
console.log(date.toJSON()); // Ausgabe: "2023-06-08T12:34:56.789Z"

Diese Methode ist nützlich, wenn du Date-Objekte in JSON serialisieren musst.

JavaScript Date toISOString()

toISOString() konvertiert ein Date-Objekt in eine Zeichenfolge, die das ISO 8601-Format verwendet.

let date = new Date();
console.log(date.toISOString()); // Ausgabe: "2023-06-08T12:34:56.789Z"

Diese Methode ist nützlich für die standardisierte Datumsformatierung, insbesondere in internationalen Kontexten.

JavaScript-Funktion bind()

bind() erstellt eine neue Funktion, die, wenn aufgerufen, ihr this-Schlüsselwort auf den bereitgestellten Wert setzt. Es ist, als würde man einer Funktion einen bestimmten Kontext geben, in dem sie arbeiten soll.

let person = {
name: 'John',
greet: function() {
console.log(`Hallo, mein Name ist ${this.name}`);
}
};

let greetFunction = person.greet.bind(person);
greetFunction(); // Ausgabe: "Hallo, mein Name ist John"

Diese Methode ist besonders nützlich in der Ereignisbehandlung und bei der Arbeit mit objektorientiertem JavaScript.

JavaScript-JSON-Methoden

ES5 führte eingebettete Unterstützung für JSON ein:

JavaScript JSON parse()

JSON.parse() parsest eine JSON-Zeichenfolge und erstellt den JavaScript-Wert oder das Objekt, das durch die Zeichenfolge beschrieben wird.

let jsonString = '{"name":"John", "age":30, "city":"New York"}';
let obj = JSON.parse(jsonString);
console.log(obj.name); // Ausgabe: "John"

Diese Methode ist entscheidend beim Arbeiten mit Daten von APIs oder beim Speichern komplexer Datenstrukturen als Zeichenfolgen.

JavaScript JSON stringify()

JSON.stringify() konvertiert ein JavaScript-Objekt oder einen Wert in eine JSON-Zeichenfolge.

let obj = {name: "John", age: 30, city: "New York"};
let jsonString = JSON.stringify(obj);
console.log(jsonString); // Ausgabe: '{"name":"John","age":30,"city":"New York"}'

Diese Methode ist nützlich, wenn du Daten an einen Server senden oder komplexe Objekte als Zeichenfolgen speichern musst.

JavaScript-Mehrzeilige Zeichenfolgen

ES5 führte eine Möglichkeit ein, mehrzeilige Zeichenfolgen mit dem Backslash-Zeichen zu erstellen:

let multiline = "This is a \
multiline string \
in JavaScript.";
console.log(multiline);
// Ausgabe:
// This is a multiline string in JavaScript.

Diese Funktion macht es einfacher, lange Zeichenfolgen in deinem Code zu schreiben.

JavaScript-Objekt-Methoden

ES5 führte mehrere neue Methoden für das Arbeiten mit Objekten ein:

JavaScript Object defineProperty()

Object.defineProperty() ermöglicht es Ihnen, neue oder bestehende Eigenschaften direkt auf einem Objekt zu definieren, mit fein abgestimmter Kontrolle über diese Eigenschaften.

let obj = {};
Object.defineProperty(obj, 'name', {
value: 'John',
writable: false,
enumerable: true,
configurable: true
});
console.log(obj.name); // Ausgabe: "John"
obj.name = 'Jane'; // Dies ändert den Wert nicht, da writable auf false gesetzt ist
console.log(obj.name); // Ausgabe: "John"

Diese Methode ist leistungsstark für die Erstellung von Objekten mit spezifischem Verhalten und Eigenschaften.

JavaScript-Eigenschaftsgetter und -setter

ES5 führte Getter- und Setter-Methoden ein, die es Ihnen ermöglichen, festzulegen, wie eine Eigenschaft zugreift oder geändert wird:

let person = {
firstName: 'John',
lastName: 'Doe',
get fullName() {
return `${this.firstName} ${this.lastName}`;
},
set fullName(name) {
let parts = name.split(' ');
this.firstName = parts[0];
this.lastName = parts[1];
}
};

console.log(person.fullName); // Ausgabe: "John Doe"
person.fullName = 'Jane Smith';
console.log(person.firstName); // Ausgabe: "Jane"
console.log(person.lastName); // Ausgabe: "Smith"

Getters und Setter ermöglichen es Ihnen, berechnete Eigenschaften zu definieren und Logik hinzuzufügen, wenn Werte abgerufen oder gesetzt werden.

JavaScript-Reservierte Wörter als Eigenschaftsnamen

ES5 ermöglichte die Verwendung von reservierten Wörtern als Eigenschaftsnamen in Objektliteralen:

let obj = {
class: 'JavaScript',
for: 'beginners',
if: true
};
console.log(obj.class); // Ausgabe: "JavaScript"

Diese Funktion bietet mehr Flexibilität bei der Namensgebung von Objekteigenschaften.

JavaScript "use strict"

ES5 führte die "use strict"-Direktive ein, die strikte Modus in JavaScript aktiviert. Strikter Modus fängt häufige Codingschlampereien, wirft Ausnahmen und verhindert oder wirft Fehler, wenn relativ "unsichere" Aktionen ausgeführt werden.

"use strict";
x = 3.14; // Dies verursacht einen Fehler, da x nicht deklariert ist

Der Einsatz von strengem Modus hilft dabei, Fehler frühzeitig zu fangen und fördert bessere Programmierpraktiken.

JavaScript-Zeichenfolgenummer-Zugriff

ES5 ermöglichte den Zugriff auf individuelle Zeichen einer Zeichenfolge mit der eckigen Klammernotation:

let str = "Hello";
console.log(str[0]); // Ausgabe: "H"
console.log(str[1]); // Ausgabe: "e"

Diese Funktion macht es einfacher, mit einzelnen Zeichen in Zeichenfolgen zu arbeiten.

JavaScript-Zeichenfolge trim()

Die trim()-Methode entfernt Leerzeichen von beiden Enden einer Zeichenfolge:

let str = "   Hello, World!   ";
console.log(str.trim()); // Ausgabe: "Hello, World!"

Diese Methode ist nützlich für die Reinigung von Benutzereingaben oder das Formatieren von Zeichenfolgen.

JavaScript-Trailing Commas

ES5 ermöglichte trailing Commas in Objekt- und Array-Literalen:

let obj = {
name: "John",
age: 30,
}; // Kein Fehler

let arr = [1, 2, 3,]; // Kein Fehler

Diese Funktion macht es einfacher, Elemente zu hinzuzufügen oder aus Objekten und Arrays zu entfernen, ohne sich um die Kommastellung kümmern zu müssen.

Schlussfolgerung

Puh! Wir haben hier viel Boden cobered in diesem Tutorial. ES5 brachte viele leistungsstarke Features zu JavaScript, die bis heute weit verbreitet sind. Denken Sie daran, dass das Lernen zu codieren wie das Lernen einer neuen Sprache ist – es erfordert Übung und Geduld. Lassen Sie sich nicht entmutigen, wenn Sie nicht alles auf Anhieb verstehen. Weiter codieren, weiter experimentieren und vor allem – haben Sie Spaß!

Hier ist eine Tabelle, die alle von uns besprochenen Methoden zusammenfasst:

Methode	Beschreibung
Array.every()	Testet, ob alle Elemente im Array den Test der bereitgestellten Funktion bestehen
Array.filter()	Erstellt ein neues Array mit allen Elementen, die den Test der bereitgestellten Funktion bestehen
Array.forEach()	Führt eine bereitgestellte Funktion einmal für jedes Array-Element aus
Array.isArray()	Bestimmt, ob das übergebene Objekt ein Array ist
Array.indexOf()	Gibt den ersten Index zurück, an dem ein gegebenes Element im Array gefunden werden kann
Array.lastIndexOf()	Gibt den letzten Index zurück, an dem ein gegebenes Element im Array gefunden werden kann
Array.map()	Erstellt ein neues Array mit den Ergebnissen der aufgerufenen Funktion auf jedem Element im Array
Array.reduce()	Führt eine Reduzierfunktion auf jedes Element des Arrays aus, resulting in einem einzigen Ausgabewert
Array.reduceRight()	Führt eine Reduzierfunktion auf jedes Element des Arrays von rechts nach links aus
Array.some()	Testet, ob mindestens ein Element im Array den Test der bereitgestellten Funktion besteht
Date.now()	Gibt die Anzahl der Millisekunden zurück, die seit dem 1. Januar 1970 00:00:00 UTC vergangen sind
Date.toJSON()	Gibt eine Zeichenfolgenrepräsentation des Date-Objekts im JSON-Format zurück
Date.toISOString()	Konvertiert ein Date-Objekt in eine Zeichenfolge, die das ISO 8601-Format verwendet
Function.bind()	Erstellt eine neue Funktion, die, wenn aufgerufen, ihr this-Schlüsselwort auf den bereitgestellten Wert setzt
JSON.parse()	Parsest eine JSON-Zeichenfolge und erstellt den JavaScript-Wert oder das Objekt, das durch die Zeichenfolge beschrieben wird
JSON.stringify()	Konvertiert ein JavaScript-Objekt oder einen Wert in eine JSON-Zeichenfolge
Object.defineProperty()	Definiert eine neue Eigenschaft direkt auf einem Objekt oder modifies eine vorhandene Eigenschaft auf einem Objekt
String.trim()	Entfernt Leerzeichen von beiden Enden einer Zeichenfolge

Behalten Sie diese Tabelle bereit, als schnellen Referenz, wenn Sie coden. Viel Spaß beim JavaScripting!

Credits: Image by storyset