Arrays mit JavaScript-Array-Methoden manipulieren

Einführung

In diesem Lab werden die Studierenden durch eine umfassende praxisorientierte Lerngelegenheit essentielle JavaScript-Array-Manipulationsmethoden erkunden. Das Lab behandelt wichtige Array-Methoden wie slice(), unshift(), shift(), das Sortieren und die Transformation von Arrays und vermittelt praktische Kenntnisse zur Verwaltung und Modifikation von Array-Datenstrukturen.

Die Teilnehmer lernen, wie man Array-Elemente mit slice() extrahiert, Elemente am Anfang eines Arrays mit unshift() hinzufügt, das erste Element mit shift() entfernt und ein Array sortiert und umkehrt. Indem sie an praktischen Codebeispielen arbeiten, werden die Lernenden einen soliden Überblick darüber erhalten, wie man Arrays in JavaScript effektiv manipulieren kann, was ihre Programmierfähigkeiten und ihr Problemlösevermögen verbessert.

Arrayelemente schneiden

In diesem Schritt lernst du, wie du die slice()-Methode in JavaScript verwenden kannst, um einen Teil eines Arrays auszuschneiden. Die slice()-Methode ermöglicht es dir, ein neues Array zu erstellen, indem du Elemente aus einem vorhandenen Array auswählst, ohne das ursprüngliche Array zu verändern.

Lassen wir beginnen, indem wir ein Beispielarray erstellen und üben, wie wir seine Elemente schneiden. Öffne die WebIDE und erstelle in das Verzeichnis ~/project eine neue Datei namens array-slice.js.

// Erstellt ein Array mit Früchten
const fruits = ["apple", "banana", "cherry", "date", "elderberry"];

// Schneidet die ersten drei Elemente aus
const slicedFruits1 = fruits.slice(0, 3);
console.log("Die ersten drei Früchte:", slicedFruits1);

// Schneidet ab Index 2 bis zum Ende aus
const slicedFruits2 = fruits.slice(2);
console.log("Früchte ab Index 2:", slicedFruits2);

// Schneidet die letzten beiden Elemente mit negativem Index aus
const slicedFruits3 = fruits.slice(-2);
console.log("Die letzten beiden Früchte:", slicedFruits3);

Führe nun das Skript aus, um die Ergebnisse zu sehen:

node ~/project/array-slice.js

Beispielausgabe:

Die ersten drei Früchte: [ 'apple', 'banana', 'cherry' ]
Früchte ab Index 2: [ 'cherry', 'date', 'elderberry' ]
Die letzten beiden Früchte: [ 'date', 'elderberry' ]

Wichtige Punkte zu slice():

Der erste Parameter ist der Startindex (inklusiv)
Der zweite Parameter ist der Endindex (exklusiv)
Wenn kein Endindex angegeben wird, wird bis zum Ende des Arrays geschnitten
Negative Indizes zählen von Ende des Arrays aus
Das ursprüngliche Array bleibt unverändert

Elemente am Anfang eines Arrays mit unshift() hinzufügen

In diesem Schritt lernst du, wie du die unshift()-Methode in JavaScript verwenden kannst, um ein oder mehrere Elemente am Anfang eines Arrays hinzuzufügen. Die unshift()-Methode verändert das ursprüngliche Array, indem sie Elemente am Anfang einfügt, und gibt die neue Länge des Arrays zurück.

Erstelle in das Verzeichnis ~/project eine neue Datei namens array-unshift.js und füge den folgenden Code hinzu:

// Erstellt ein initiales Array mit Früchten
let fruits = ["banana", "cherry", "date"];
console.log("Ursprüngliches Array:", fruits);

// Fügt ein einzelnes Element am Anfang des Arrays hinzu
fruits.unshift("apple");
console.log("Nachdem ein Element hinzugefügt wurde:", fruits);

// Fügt mehrere Elemente am Anfang des Arrays hinzu
fruits.unshift("grape", "kiwi");
console.log("Nachdem mehrere Elemente hinzugefügt wurden:", fruits);

// Speichert die neue Länge des Arrays
let newLength = fruits.unshift("orange");
console.log("Neue Arraylänge:", newLength);
console.log("Endgültiges Array:", fruits);

Führe nun das Skript aus, um die Ergebnisse zu sehen:

node ~/project/array-unshift.js

Beispielausgabe:

Ursprüngliches Array: [ 'banana', 'cherry', 'date' ]
Nachdem ein Element hinzugefügt wurde: [ 'apple', 'banana', 'cherry', 'date' ]
Nachdem mehrere Elemente hinzugefügt wurden: [ 'grape', 'kiwi', 'apple', 'banana', 'cherry', 'date' ]
Neue Arraylänge: 7
Endgültiges Array: [ 'orange', 'grape', 'kiwi', 'apple', 'banana', 'cherry', 'date' ]

Wichtige Punkte zu unshift():

Fügt ein oder mehrere Elemente am Anfang eines Arrays hinzu
Verändert das ursprüngliche Array
Gibt die neue Länge des Arrays zurück
Kann in einem einzelnen Aufruf mehrere Elemente hinzufügen
Verschiebt vorhandene Elemente auf höhere Indizes

Erstes Element mit shift() entfernen

In diesem Schritt lernst du, wie du die shift()-Methode in JavaScript verwenden kannst, um das erste Element aus einem Array zu entfernen. Die shift()-Methode verändert das ursprüngliche Array, indem sie das erste Element entfernt, und gibt das entfernte Element zurück.

Erstelle in das Verzeichnis ~/project eine neue Datei namens array-shift.js und füge den folgenden Code hinzu:

// Erstellt ein initiales Array mit Programmiersprachen
let languages = ["JavaScript", "Python", "Java", "C++", "Ruby"];
console.log("Ursprüngliches Array:", languages);

// Entfernt und speichert das erste Element
let removedLanguage = languages.shift();
console.log("Entfernte Sprache:", removedLanguage);
console.log("Array nach shift:", languages);

// Entfernt mehrere Elemente, indem man shift() mehrmals aufruft
let secondRemovedLanguage = languages.shift();
console.log("Zweite entfernte Sprache:", secondRemovedLanguage);
console.log("Array nach zweitem shift:", languages);

// Zeigt, was passiert, wenn das Array leer ist
let emptyArray = [];
let result = emptyArray.shift();
console.log("Shift von einem leeren Array:", result);
console.log("Leeres Array bleibt:", emptyArray);

Führe nun das Skript aus, um die Ergebnisse zu sehen:

node ~/project/array-shift.js

Beispielausgabe:

Ursprüngliches Array: [ 'JavaScript', 'Python', 'Java', 'C++', 'Ruby' ]
Entfernte Sprache: JavaScript
Array nach shift: [ 'Python', 'Java', 'C++', 'Ruby' ]
Zweite entfernte Sprache: Python
Array nach zweitem shift: [ 'Java', 'C++', 'Ruby' ]
Shift von einem leeren Array: undefined
Leeres Array bleibt: []

Wichtige Punkte zu shift():

Entfernt das erste Element aus einem Array
Verändert das ursprüngliche Array
Gibt das entfernte Element zurück
Gibt undefined zurück, wenn das Array leer ist
Verringert die Arraylänge um 1

Arrayelemente sortieren und umkehren

In diesem Schritt lernst du, wie du die sort()- und reverse()-Methoden in JavaScript verwenden kannst, um Arrayelemente zu manipulieren. Diese Methoden bieten einfache Möglichkeiten, die Inhalte von Arrays zu organisieren und neu zu ordnen.

Erstelle in das Verzeichnis ~/project eine neue Datei namens array-sort-reverse.js und füge den folgenden Code hinzu:

// Erstellt Arrays zur Sortierdemonstration
let numbers = [5, 2, 9, 1, 7];
let fruits = ["banana", "apple", "cherry", "date"];

// Standardmäßiges Sortieren (lexikografisch für Strings, aufsteigend für Zahlen)
console.log("Ursprüngliche Zahlen:", numbers);
numbers.sort();
console.log("Standardmäßiges Sortieren:", numbers);

// Numerisches Sortieren erfordert eine Vergleichsfunktion
numbers = [5, 2, 9, 1, 7];
numbers.sort((a, b) => a - b);
console.log("Numerisches Sortieren:", numbers);

// Umgekehrtes Sortieren
console.log("\nUrsprüngliche Früchte:", fruits);
fruits.sort().reverse();
console.log("Sortiert und umgekehrt:", fruits);

// Ein Array umkehren, ohne es zu sortieren
let colors = ["red", "green", "blue", "yellow"];
console.log("\nUrsprüngliche Farben:", colors);
colors.reverse();
console.log("Umgekehrte Farben:", colors);

Führe nun das Skript aus, um die Ergebnisse zu sehen:

node ~/project/array-sort-reverse.js

Beispielausgabe:

Ursprüngliche Zahlen: [ 5, 2, 9, 1, 7 ]
Standardmäßiges Sortieren: [ 1, 2, 5, 7, 9 ]
Numerisches Sortieren: [ 1, 2, 5, 7, 9 ]

Ursprüngliche Früchte: [ 'banana', 'apple', 'cherry', 'date' ]
Sortiert und umgekehrt: [ 'date', 'cherry', 'banana', 'apple' ]

Ursprüngliche Farben: [ 'red', 'green', 'blue', 'yellow' ]
Umgekehrte Farben: [ 'yellow', 'blue', 'green','red' ]

Wichtige Punkte zu sort() und reverse():

sort() verändert das ursprüngliche Array
Standardmäßiges sort() konvertiert Elemente zu Strings und sortiert lexikografisch
Verwende eine Vergleichsfunktion für numerisches oder benutzerdefiniertes Sortieren
reverse() kehrt die Reihenfolge der Elemente im Array um
Beide Methoden arbeiten in-place und ändern das ursprüngliche Array

Arrays transformieren und analysieren

In diesem Schritt erkundest du leistungsstarke Array-Methoden wie map(), filter() und reduce(), um Arrayelemente in JavaScript zu transformieren und zu analysieren. Diese Methoden bieten elegante Wege, um Arrays zu manipulieren und Informationen daraus zu extrahieren.

Erstelle in das Verzeichnis ~/project eine neue Datei namens array-transform.js und füge den folgenden Code hinzu:

// Beispielarray mit Studentennoten
const scores = [85, 92, 78, 65, 90, 55, 88];

// Verwende map(), um ein neues Array mit modifizierten Werten zu erstellen
const adjustedScores = scores.map((score) => score + 5);
console.log("Ursprüngliche Noten:", scores);
console.log("Angepasste Noten:", adjustedScores);

// Verwende filter(), um ein Array mit bestandenen Noten (über 70) zu erstellen
const passingScores = scores.filter((score) => score >= 70);
console.log("Bestandene Noten:", passingScores);

// Verwende reduce(), um die Gesamtsumme der Noten zu berechnen
const totalScore = scores.reduce((sum, score) => sum + score, 0);
const averageScore = totalScore / scores.length;
console.log("Gesamtpunktzahl:", totalScore);
console.log("Durchschnittliche Punktzahl:", averageScore.toFixed(2));

// Kombiniere Methoden: Bestimme den Durchschnitt der bestandenen Noten
const averagePassingScore =
  passingScores.reduce((sum, score) => sum + score, 0) / passingScores.length;
console.log(
  "Durchschnittliche bestandene Punktzahl:",
  averagePassingScore.toFixed(2)
);

// Transformiere ein Array von Namen
const names = ["alice", "bob", "charlie"];
const capitalizedNames = names.map(
  (name) => name.charAt(0).toUpperCase() + name.slice(1)
);
console.log("Ursprüngliche Namen:", names);
console.log("Verstärkte Namen:", capitalizedNames);

Führe nun das Skript aus, um die Ergebnisse zu sehen:

node ~/project/array-transform.js

Beispielausgabe:

Ursprüngliche Noten: [ 85, 92, 78, 65, 90, 55, 88 ]
Angepasste Noten: [ 90, 97, 83, 70, 95, 60, 93 ]
Bestandene Noten: [ 85, 92, 78, 90, 88 ]
Gesamtpunktzahl: 553
Durchschnittliche Punktzahl: 79.00
Durchschnittliche bestandene Punktzahl: 86.60
Ursprüngliche Namen: [ 'alice', 'bob', 'charlie' ]
Verstärkte Namen: [ 'Alice', 'Bob', 'Charlie' ]

Wichtige Punkte zu den Array-Transformationsmethoden:

map(): Erstellt ein neues Array, indem jedes Element transformiert wird
filter(): Erstellt ein neues Array mit Elementen, die einem Test bestehen
reduce(): Reduziert das Array zu einem einzelnen Wert durch eine Callback-Funktion
Diese Methoden verändern das ursprüngliche Array nicht
Können verkettet werden, um komplexe Transformationen durchzuführen

Zusammenfassung

In diesem Lab haben die Teilnehmer verschiedene Techniken zum Manipulieren von JavaScript-Arrays mit internen Methoden untersucht. Das Lab konzentrierte sich darauf, zu lernen, wie man Arrayelemente mit der slice()-Methode ausschneidet, die es ermöglicht, bestimmte Teile eines Arrays zu extrahieren, ohne das ursprüngliche Array zu verändern. Die Teilnehmer übten das Erstellen neuer Arrays durch die Auswahl von Elementen mit unterschiedlichen Indexbereichen, einschließlich positiver und negativer Indizes.

Das Lab hat auch Methoden wie unshift() zur Hinzufügung von Elementen am Anfang eines Arrays, shift() zum Entfernen des ersten Elements und Techniken zum Sortieren und Umkehren von Arrayelementen eingeführt. Durch praktische Codebeispiele haben die Lernenden praktische Erfahrungen bei der Transformation und Analyse von Arrays gewonnen und verstanden, wie diese Methoden effizient Daten aus Arraystrukturen in JavaScript modifizieren und extrahieren können.