💯 Turbo-Arrays in Javascript
shift(), unshift(), pop(), map(), filter(), hier wird cool.
Grundlagen der JavaScript-Arrays
1. Erstellen von Arrays
Es gibt mehrere Möglichkeiten, Arrays in JavaScript zu erstellen:
// Leeres Array
const emptyArray = [];
// Array mit Werten
const numbers = [1, 2, 3, 4, 5];
// Array mit verschiedenen Datentypen
const mixedArray = [1, 'hello', true, null, { name: 'Alice' }];
2. Zugriff auf Array-Elemente
Auf die Elemente eines Arrays kann über ihren Index zugegriffen werden. Der Index beginnt bei 0.
const colors = ['red', 'green', 'blue'];
console.log(colors[0]); // "red"
console.log(colors[1]); // "green"
3. Array-Länge
Die Länge eines Arrays kann mit der length-Eigenschaft ermittelt werden.
const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.length); // 3
Häufig verwendete Array-Methoden
1. Hinzufügen von Elementen
push(): Fügt ein oder mehrere Elemente am Ende des Arrays hinzu.
const numbers = [1, 2, 3];
numbers.push(4, 5); // [1, 2, 3, 4, 5]
unshift(): Fügt ein oder mehrere Elemente am Anfang des Arrays hinzu.
const numbers = [1, 2, 3];
numbers.unshift(0); // [0, 1, 2, 3]
2. Entfernen von Elementen
pop(): Entfernt das letzte Element des Arrays und gibt es zurück.
const numbers = [1, 2, 3];
const last = numbers.pop(); // last ist 3, numbers ist jetzt [1, 2]
shift(): Entfernt das erste Element des Arrays und gibt es zurück.
const numbers = [1, 2, 3];
const first = numbers.shift(); // first ist 1, numbers ist jetzt [2, 3]
3. Suchen von Elementen
indexOf(): Gibt den Index des ersten Vorkommens eines bestimmten Wertes zurück oder -1, wenn der Wert nicht gefunden wurde.
const fruits = ['apple', 'banana', 'orange'];
const index = fruits.indexOf('banana'); // 1
4. Iteration über Arrays
forEach(): Führt eine Funktion für jedes Element im Array aus.
const numbers = [1, 2, 3];
numbers.forEach(num => {
console.log(num * 2); // 2, 4, 6
});
map(): Erzeugt ein neues Array mit den Ergebnissen der Anwendung einer Funktion auf jedes Element.
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); // [2, 4, 6]
filter(): Erzeugt ein neues Array mit allen Elementen, die den Test einer Funktion bestehen.
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0); // [2, 4]
Coole Tricks mit JavaScript-Arrays
1. Array-Kombination
Mit dem Spread-Operator können zwei Arrays zusammengefügt werden.
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
2. Array-Duplication
Ein Array kann auf verschiedene Arten dupliziert werden, einschließlich des Spread-Operators.
const original = [1, 2, 3];
const copy = [...original]; // [1, 2, 3]
3. Entfernen von Duplikaten
Um Duplikate aus einem Array zu entfernen, kann der Spread-Operator mit einem Set kombiniert werden.
const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = [...new Set(numbers)]; // [1, 2, 3, 4, 5]
4. Zufälliges Element auswählen
Um ein zufälliges Element aus einem Array auszuwählen, kann man die Math.random()-Funktion verwenden.
const colors = ['red', 'green', 'blue'];
const randomColor = colors[Math.floor(Math.random() * colors.length)];
console.log(randomColor); // z.B. "green"
5. Array-Flatten
Mit der Methode flat() können verschachtelte Arrays zu einem einzigen Array zusammengeführt werden.
const nestedArray = [1, [2, 3], [4, 5]];
const flatArray = nestedArray.flat(); // [1, 2, 3, 4, 5]
6. Array-Reverse
Mit der reverse()-Methode kann die Reihenfolge der Elemente in einem Array umgekehrt werden.
const numbers = [1, 2, 3];
numbers.reverse(); // [3, 2, 1]
Zusammenfassung
JavaScript-Arrays sind eine vielseitige und leistungsstarke Datenstruktur, die in vielen Programmierszenarien verwendet wird. Die Verwendung der verschiedenen Methoden zum Bearbeiten und Manipulieren von Arrays kann die Effizienz des Codes erheblich steigern. Mit den vorgestellten Tricks kannst du die Funktionalität deiner Arrays erweitern und verschiedene interessante Operationen durchführen.