Erstelle und verarbeite Arrays in JavaScript

Einführung

In diesem Lab werden die Studierenden die grundlegenden Konzepte des Erstellens und Manipulierens von Arrays in JavaScript erkunden. Das Lab bietet eine umfassende Einführung in die Array-Initialisierung, das Zugreifen auf Array-Elemente und das Ausführen von grundlegenden Array-Operationen durch praktische Codierungsaufgaben. Die Teilnehmer lernen, wie Arrays mit verschiedenen Methoden erstellt werden, einschließlich der eckigen Klammernnotation und des Array-Konstruktors, und verstehen, wie mit Arrays umgegangen wird, die verschiedene Datentypen enthalten.

Das Lab behandelt Schlüsselfertigkeiten wie das Definieren von Arrays mit Zahlen, Zeichenketten und gemischten Elementen, das Zugreifen auf einzelne Array-Elemente mithilfe von Indexen und das Demonstrieren von grundlegenden Array-Manipulationsverfahren. Indem die Teilnehmer an praktischen Beispielen arbeiten, werden sie praktische Erfahrungen beim Erstellen, Zugreifen auf und Interagieren mit Arrays sammeln, die essentielle Datenstrukturen in der JavaScript-Programmierung sind.

Arraydefinition und -initialisierung verstehen

In diesem Schritt lernst du über Arrays in JavaScript, die grundlegende Datenstrukturen sind, die verwendet werden, um mehrere Werte in einer einzigen Variable zu speichern. Arrays ermöglichen es dir, verwandte Daten effizient zu sammeln und zu organisieren.

Lassen Sie uns beginnen, indem wir ein einfaches Array in JavaScript erstellen. Öffnen Sie die WebIDE und erstellen Sie in das Verzeichnis ~/project eine neue Datei namens arrays.js.

// Erstellen eines Arrays von Zahlen
let numbers = [1, 2, 3, 4, 5];

// Erstellen eines Arrays von Zeichenketten
let fruits = ["apple", "banana", "orange"];

// Erstellen eines leeren Arrays
let emptyArray = [];

// Erstellen eines Arrays mit gemischten Datentypen
let mixedArray = [42, "hello", true, null];

console.log("Numbers array:", numbers);
console.log("Fruits array:", fruits);
console.log("Empty array:", emptyArray);
console.log("Mixed array:", mixedArray);

Wenn Sie diesen Code ausführen, sehen Sie die folgende Beispielausgabe:

Numbers array: [1, 2, 3, 4, 5]
Fruits array: ['apple', 'banana', 'orange']
Empty array: []
Mixed array: [42, 'hello', true, null]

Wichtige Punkte zur Array-Initialisierung:

• Arrays werden mit eckigen Klammern [] erstellt
• Arrays können Elemente unterschiedlicher Typen enthalten
• Arrays können leer sein oder bereits mit Werten belegt sein
• Das erste Element eines Arrays befindet sich immer an Index 0

Sie können auch Arrays mit dem Array-Konstruktor erstellen:

// Verwenden des Array-Konstruktors
let numbersConstructor = new Array(1, 2, 3, 4, 5);
console.log("Array using constructor:", numbersConstructor);

Arrayelemente über Indizes zugreifen

In diesem Schritt lernst du, wie du auf einzelne Elemente in einem Array über ihren Index zugreifen kannst. In JavaScript beginnen Array-Indizes bei 0, was bedeutet, dass das erste Element am Index 0, das zweite am Index 1 und so weiter ist.

Öffne die Datei arrays.js im Verzeichnis ~/project und füge den folgenden Code hinzu:

// Erstellen eines Arrays von Farben
let colors = ["red", "green", "blue", "yellow", "purple"];

// Zugreifen auf Arrayelemente über den Index
console.log("Erste Farbe:", colors[0]); // Erstes Element
console.log("Dritte Farbe:", colors[2]); // Drittes Element
console.log("Letzte Farbe:", colors[colors.length - 1]); // Letztes Element

// Ändern von Arrayelementen
colors[1] = "orange"; // Ändere das zweite Element
console.log("Modifiziertes Farbenarray:", colors);

// Demonstration des Indexbereichs
console.log("Arraylänge:", colors.length);

Wenn du diesen Code ausführst, siehst du die folgende Beispielausgabe:

Erste Farbe: red
Dritte Farbe: blue
Letzte Farbe: purple
Modifiziertes Farbenarray: ['red', 'orange', 'blue', 'yellow', 'purple']
Arraylänge: 5

Wichtige Punkte zu Array-Indexierung:

• Indizes beginnen bei 0
• Verwende eckige Klammern [], um auf Elemente zuzugreifen
• array.length gibt die Gesamtzahl der Elemente an
• Du kannst Elemente ändern, indem du einem bestimmten Index einen neuen Wert zuweist
• Um auf das letzte Element zuzugreifen, verwende array[array.length - 1]

Versuche, auf Elemente außerhalb des Arraybereichs zuzugreifen, um zu sehen, was passiert:

console.log(
  "Zugreifen auf einen außerhalb des Bereichs liegenden Index:",
  colors[10]
); // Gibt undefined zurück

Ein Array von Früchten erstellen

In diesem Schritt wirst du ein Array von Früchten erstellen und lernen, wie du damit umgehst. Öffne die Datei arrays.js im Verzeichnis ~/project und füge den folgenden Code hinzu:

// Erstellen eines Arrays von Früchten
let fruits = ["apple", "banana", "orange", "mango", "strawberry"];

// Zeige das gesamte Fruchtarray an
console.log("Fruchtarray:", fruits);

// Füge eine neue Frucht ans Ende des Arrays hinzu
fruits.push("grape");
console.log("Früchte nach Hinzufügung von Grape:", fruits);

// Erstelle ein Array mit verschiedenen Arten von Früchten
let tropicalFruits = ["pineapple", "coconut", "papaya"];

// Verbinde zwei Fruchtarrays
let allFruits = fruits.concat(tropicalFruits);
console.log("Alle Früchte:", allFruits);

// Überprüfe die Anzahl der Früchte
console.log("Gesamtzahl der Früchte:", allFruits.length);

Wenn du diesen Code ausführst, siehst du die folgende Beispielausgabe:

Fruchtarray: ['apple', 'banana', 'orange','mango','strawberry']
Früchte nach Hinzufügung von Grape: ['apple', 'banana', 'orange','mango','strawberry', 'grape']
Alle Früchte: ['apple', 'banana', 'orange','mango','strawberry', 'grape', 'pineapple', 'coconut', 'papaya']
Gesamtzahl der Früchte: 9

Wichtige Punkte bei der Erstellung und Manipulation von Fruchtarrays:

• Arrays können mit mehreren Elementen erstellt werden
• Du kannst neue Elemente hinzufügen, indem du push() verwendest
• Arrays können mit concat() kombiniert werden
• Die length-Eigenschaft zeigt die Gesamtzahl der Elemente an

Arrayelemente auf der Webseite ausgeben

In diesem Schritt lernst du, wie du Arrayelemente auf einer Webseite mit HTML und JavaScript anzeigen kannst. Zunächst erstelle eine HTML-Datei namens fruits.html im Verzeichnis ~/project:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Fruits Array Display</title>
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      #fruits-list {
        background-color: #f4f4f4;
        padding: 20px;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <h1>My Fruits Collection</h1>
    <div id="fruits-list"></div>

    <script>
      // Erstellen eines Arrays von Früchten
      let fruits = ["Apple", "Banana", "Orange", "Mango", "Strawberry"];

      // Hole den Container für die Fruchtliste
      let fruitsList = document.getElementById("fruits-list");

      // Erstelle eine ungeordnete Liste, um die Früchte anzuzeigen
      let ul = document.createElement("ul");

      // Gehe durch das Fruchtarray und erstelle Listenelemente
      fruits.forEach(function (fruit) {
        let li = document.createElement("li");
        li.textContent = fruit;
        ul.appendChild(li);
      });

      // Füge die Liste zur Seite hinzu
      fruitsList.appendChild(ul);
    </script>
  </body>
</html>

Dieses Beispiel zeigt mehrere Schlüsselkonzepte:

• Das Erstellen einer HTML-Struktur
• Das Verwenden von JavaScript, um den DOM zu manipulieren
• Das Anzeigen von Arrayelementen auf einer Webseite
• Das Verwenden von forEach(), um durch Arrayelemente zu iterieren

Wenn du diese HTML-Datei in einem Webbrowser öffnest, siehst du auf der Seite eine Liste von Früchten angezeigt.

Alternative Methode mit innerHTML:

// Alternative Methode, um die Früchte anzuzeigen
let fruitsList = document.getElementById("fruits-list");
fruitsList.innerHTML = fruits.map((fruit) => `<li>${fruit}</li>`).join("");

Grundlegende Array-Operationen erkunden

In diesem Schritt lernst du über häufige Array-Operationen in JavaScript. Öffne die Datei arrays.js im Verzeichnis ~/project und füge den folgenden Code hinzu:

// Erstellen eines Arrays von Zahlen
let numbers = [5, 2, 8, 1, 9, 3];

// Elemente hinzufügen
numbers.push(10); // Fügt ein Element am Ende hinzu
numbers.unshift(0); // Fügt ein Element am Anfang hinzu
console.log("Nachdem Elemente hinzugefügt wurden:", numbers);

// Elemente entfernen
let lastNumber = numbers.pop(); // Entfernt das letzte Element
let firstNumber = numbers.shift(); // Entfernt das erste Element
console.log("Nachdem Elemente entfernt wurden:", numbers);

// Das Array sortieren
numbers.sort((a, b) => a - b); // Aufsteigende Reihenfolge
console.log("Sortiertes Array:", numbers);

// Das Array umkehren
numbers.reverse();
console.log("Umgekehrtes Array:", numbers);

// Elemente finden
let index = numbers.indexOf(8);
console.log("Index von 8:", index);

// Das Array schneiden
let slicedNumbers = numbers.slice(1, 4);
console.log("Geschnittenes Array:", slicedNumbers);

// Das Array filtern
let evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log("Gerade Zahlen:", evenNumbers);

// Das Array abbilden
let squaredNumbers = numbers.map((num) => num * num);
console.log("Quadrierte Zahlen:", squaredNumbers);

Wenn du diesen Code ausführst, siehst du die folgende Beispielausgabe:

Nachdem Elemente hinzugefügt wurden: [0, 5, 2, 8, 1, 9, 3, 10]
Nachdem Elemente entfernt wurden: [5, 2, 8, 1, 9, 3, 10]
Sortiertes Array: [1, 2, 3, 5, 8, 9, 10]
Umgekehrtes Array: [10, 9, 8, 5, 3, 2, 1]
Index von 8: 2
Geschnittenes Array: [9, 8, 5]
Gerade Zahlen: [10, 8, 2]
Quadrierte Zahlen: [100, 81, 64, 25, 9, 4, 1]

Dargestellte wichtige Array-Operationen:

• push() und unshift() zum Hinzufügen von Elementen
• pop() und shift() zum Entfernen von Elementen
• sort() zur Anordnung von Elementen
• reverse() zum Umkehren der Array-Reihenfolge
• indexOf() zur Suche nach der Elementposition
• slice() zum Extrahieren eines Teils eines Arrays
• filter() zum Erstellen eines neuen Arrays mit bestimmten Elementen
• map() zur Transformation von Arrayelementen

Zusammenfassung

In diesem Lab haben die Teilnehmer die Grundlagen des Umgangs mit Arrays in JavaScript untersucht und gelernt, wie man Array-Datenstrukturen erstellt, initialisiert und manipuliert. Das Lab hat Schlüsselkonzepte wie das Definieren von Arrays mit eckigen Klammern und dem Array-Konstruktor behandelt und die Fähigkeit demonstriert, Arrays mit verschiedenen Elementtypen zu erstellen, darunter Zahlen, Strings und gemischte Datentypen.

Die Teilnehmer haben praktische Fertigkeiten im Zugreifen auf Arrayelemente über den Index gewonnen, verstanden, dass Array-Indizes bei 0 beginnen, und gelernt, wie man grundlegende Array-Operationen durchführt. Der praxisorientierte Ansatz hat den Lernenden ermöglicht, Arrays zu erstellen, deren Inhalt auszugeben und die Flexibilität von JavaScript-Arrays bei der effizienten Speicherung und Organisation von Daten zu erkunden.