JavaScript-Arrays meistern: Ein umfassender Leitfaden zur Erstellung, Manipulation, Filterung und praktischen Anwendung

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Einführung

Was sind JavaScript-Arrays und warum sind sie wichtig?

JavaScript-Arrays gehören zu den grundlegenden Elementen, um Daten effizient zu verwalten und zu manipulieren. Mit Arrays können Sie mehrere Werte in einer einzigen Variablen speichern und bei Bedarf abrufen oder ändern.
Beispielsweise sind Arrays äußerst nützlich, wenn Sie eine Liste von Benutzernamen, eine Produktliste oder Berechnungsergebnisse speichern. Besonders in der Web‑Anwendungsentwicklung werden Arrays häufig beim Umgang mit Formulardaten oder Daten, die von APIs abgerufen werden, eingesetzt.

Praktische Anwendungsfälle von Arrays

• Listenverwaltung : Verwaltung von Warenkorbartikeln oder einer To‑Do‑Liste.
• Datenfilterung : Benutzersuche und Sortierfunktionen.
• Animationssteuerung : Verwaltung der Elementreihenfolge oder dynamischer Änderungen.

Arrays sind eine grundlegende Struktur für die Handhabung gruppierter Daten und ein unverzichtbares Thema beim Erlernen von JavaScript.

Was Sie in diesem Artikel lernen werden

Dieser Artikel erklärt systematisch JavaScript-Arrays und behandelt Themen wie:

1. Wie man Arrays deklariert und initialisiert
2. Wie man Elemente hinzufügt, entfernt und abruft
3. Sortier‑ und Filtertechniken
4. Methoden zum Zusammenführen und Aufteilen von Arrays
5. Anwendungsbeispiele mit Arrays

Der Inhalt ist für Anfänger bis Fortgeschrittene geeignet und erklärt alles von den Grundlagen bis zu praktischen Techniken.

Für wen dieser Artikel gedacht ist

• Anfänger : Die zum ersten Mal mit Arrays arbeiten.
• Fortgeschrittene Nutzer : Die fortgeschrittene Operationen erlernen oder effizienteren Code schreiben möchten.

Mit Code‑Beispielen und praktischen Anwendungsfällen können selbst Anfänger selbstbewusst lernen.

Was Sie durch das Erlernen von Arrays erreichen können

Sobald Sie JavaScript-Arrays beherrschen, verfügen Sie über folgende Fähigkeiten:

• Datenverwaltung & -manipulation : Daten einfach hinzufügen, entfernen oder sortieren.
• API-Integration : Daten, die von Web‑APIs abgerufen werden, effizient verarbeiten und anzeigen.
• Anwendungsentwicklung : Einfache Apps anhand praktischer Beispiele erstellen.

Nutzen Sie das Gelernte, um fortgeschrittenere JavaScript‑Anwendungen zu bauen.

2. Grundlagen von Arrays | Deklaration und Initialisierung

2.1 Definition und Rolle von Arrays

JavaScript-Arrays sind spezielle Objekte, die es ermöglichen, mehrere Daten­elemente gleichzeitig zu verwalten. Jedes Element besitzt einen Index, der seine Position bestimmt, wodurch das Abrufen und Manipulieren von Daten einfach wird.

Hauptrollen von Arrays

1. Listenverwaltung : Verwaltung gruppierter Daten wie Produktlisten oder Benutzerinformationen.
2. Datenmanipulation : Durchführung effizienter Aufgaben wie Sortieren oder Suchen.
3. Dynamische Datenverarbeitung : Verarbeitung und Transformation von Daten, die von APIs abgerufen werden.

Eigenschaften von Arrays

• Elementindizes beginnen bei 0.
• Werte verschiedener Datentypen können gemeinsam gespeichert werden.

  let mixedArray = [1, "hello", true];
  console.log(mixedArray[1]); // "hello"
  

2.2 Deklaration und Initialisierung von Arrays

Grundlegende Array-Deklaration

In JavaScript können Arrays auf zwei Arten deklariert werden:

1. Verwendung der Literalschreibweise (empfohlen)

   let fruits = ["apple", "banana", "grape"];
   

2. Verwendung des Array‑Konstruktors

   let fruits = new Array("apple", "banana", "grape");
   

Erstellen eines leeren Arrays

let emptyArray = [];

2.3 Deklaration mehrdimensionaler Arrays

Ein mehrdimensionales Array ist ein Array, das weitere Arrays enthält. Es ist nützlich, wenn hierarchische Datenstrukturen verwaltet werden.

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matrix[1][2]); // 6

2.4 Hinweise zur Initialisierung

Mischen von Datentypen

JavaScript-Arrays können Werte verschiedener Datentypen speichern, was bei unsachgemäßer Handhabung zu unerwarteten Fehlern führen kann.

let mixed = [1, "text", true];
console.log(typeof mixed[0]); // "number"
console.log(typeof mixed[1]); // "string"
console.log(typeof mixed[2]); // "boolean"

2.5 Grundlegende Beispiele für Array-Operationen

let animals = ["dog", "cat", "bird"];
console.log(animals[0]); // "dog"

animals.push("rabbit");
console.log(animals); // ["dog", "cat", "bird", "rabbit"]

animals[1] = "lion";
console.log(animals); // ["dog", "lion", "bird", "rabbit"]

Zusammenfassung

In diesem Abschnitt wurden die folgenden Konzepte zu JavaScript-Arrays erklärt:

1. Definition und Rollen von Arrays
2. Grundsyntax für Deklaration und Initialisierung
3. Mehrdimensionale Arrays und Längenbehandlung
4. Wichtige Überlegungen bei der Initialisierung mit Codebeispielen

Mit diesem Wissen sind Sie besser auf den nächsten Schritt vorbereitet: „Grundlegende Array-Operationen.“

3. Grundlegende Array-Operationen | Hinzufügen, Entfernen und Abrufen von Elementen

3.1 Methoden zum Hinzufügen von Elementen

Elemente am Ende hinzufügen – push()

let fruits = ["apple", "banana"];
fruits.push("orange");
console.log(fruits); // ["apple", "banana", "orange"]

Elemente am Anfang hinzufügen – unshift()

let animals = ["cat", "dog"];
animals.unshift("rabbit");
console.log(animals); // ["rabbit", "cat", "dog"]

3.2 Methoden zum Entfernen von Elementen

Das letzte Element entfernen – pop()

let colors = ["red", "blue", "green"];
let removed = colors.pop();
console.log(colors); // ["red", "blue"]
console.log(removed); // "green"

Das erste Element entfernen – shift()

let numbers = [1, 2, 3, 4];
let removedNumber = numbers.shift();
console.log(numbers); // [2, 3, 4]
console.log(removedNumber); // 1

Elemente an beliebiger Position entfernen – splice()

let sports = ["soccer", "baseball", "basketball", "tennis"];
sports.splice(1, 2);
console.log(sports); // ["soccer", "tennis"]

3.3 Methoden zum Abrufen von Elementen

Nach Index abrufen

let drinks = ["water", "tea", "coffee"];
console.log(drinks[0]); // "water"
console.log(drinks[2]); // "coffee"

Das letzte Element abrufen

let cities = ["Tokyo", "Osaka", "Kyoto"];
console.log(cities[cities.length - 1]); // "Kyoto"

Das erste passende Element abrufen – find()

let numbers = [10, 20, 30, 40];
let result = numbers.find(num => num > 25);
console.log(result); // 30

Zusammenfassung

In diesem Abschnitt haben wir die folgenden JavaScript-Array-Operationen erklärt:

1. Wie man Elemente hinzufügt (push() und unshift())
2. Wie man Elemente entfernt (pop(), shift(), splice())
3. Wie man Elemente abruft (Indexzugriff, find(), includes())

Durch die Kombination dieser Grundoperationen können Sie Arrays frei manipulieren.

4. Sortieren und Filtern von Arrays

4.1 Methoden zum Sortieren von Arrays

Aufsteigend oder absteigend sortieren – sort()

let numbers = [40, 10, 30, 20];
numbers.sort((a, b) => a - b);
console.log(numbers); // [10, 20, 30, 40]

Die Reihenfolge umkehren – reverse()

let letters = ["a", "b", "c", "d"];
letters.reverse();
console.log(letters); // ["d", "c", "b", "a"]

4.2 Methoden zum Filtern von Arrays

Elemente extrahieren, die einer Bedingung entsprechen – filter()

let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

Das erste Element, das einer Bedingung entspricht, abrufen – find()

let ages = [15, 20, 25, 30];
let firstAdult = ages.find(age => age >= 20);
console.log(firstAdult); // 20

Index des ersten passenden Elements erhalten – findIndex()

let scores = [50, 70, 85, 40];
let highScoreIndex = scores.findIndex(score => score > 80);
console.log(highScoreIndex); // 2

Zusammenfassung

In diesem Abschnitt wurde erklärt, wie man Arrays in JavaScript sortiert und filtert:

1. Sortieren: Verwendung von sort() und reverse(), um die Reihenfolge zu steuern.
2. Filtern: Verwendung von filter(), um passende Elemente zu extrahieren.
3. Suchen: Verwendung von find() und findIndex(), um Elemente zu finden.

5. Zusammenführen, Aufteilen und Transformieren von Arrays

5.1 Methoden zum Zusammenführen von Arrays

Arrays zusammenführen – concat()

let fruits = ["apple", "banana"];
let vegetables = ["carrot", "spinach"];
let combined = fruits.concat(vegetables);
console.log(combined); // ["apple", "banana", "carrot", "spinach"]

Zusammenführen mit der Spread‑Syntax

let fruits = ["apple", "banana"];
let vegetables = ["carrot", "spinach"];
let combined = [...fruits, ...vegetables];
console.log(combined); // ["apple", "banana", "carrot", "spinach"]

5.2 Methoden zum Aufteilen von Arrays

Teil extrahieren – slice()

let colors = ["red", "blue", "green", "yellow", "purple"];
let selectedColors = colors.slice(1, 4);
console.log(selectedColors); // ["blue", "green", "yellow"]

Elemente entfernen oder ersetzen – splice()

let languages = ["JavaScript", "Python", "Ruby", "Java"];
languages.splice(1, 2);
console.log(languages); // ["JavaScript", "Java"]

5.3 Methoden zur Transformation von Arrays

Array in Zeichenkette umwandeln – join()

let items = ["apple", "banana", "grape"];
let result = items.join(", ");
console.log(result); // "apple, banana, grape"

Zeichenkette in Array umwandeln – split()

let str = "apple,banana,grape";
let arr = str.split(",");
console.log(arr); // ["apple", "banana", "grape"]

Mehrdimensionales Array flach machen – flat()

let numbers = [1, [2, 3], [4, [5, 6]]];
let flatNumbers = numbers.flat(2);
console.log(flatNumbers); // [1, 2, 3, 4, 5, 6]

Zusammenfassung

Dieser Abschnitt erklärte verschiedene JavaScript‑Array‑Methoden zum Zusammenführen, Aufteilen und Transformieren von Arrays:

1. Zusammenführen von Arrays: concat() und Spread‑Syntax
2. Aufteilen von Arrays: slice() zum Extrahieren und splice() zum Entfernen oder Ersetzen
3. Transformieren von Arrays: join() und split() für die Zeichenkettenkonvertierung
4. Flachmachen: flat() zum Umwandeln verschachtelter Arrays in eine eindimensionale Struktur

6. Durchlaufen von Arrays und fortgeschrittene Techniken

6.1 Methoden zum Durchlaufen von Arrays

Grundlegendes Durchlaufen mit for

let fruits = ["apple", "banana", "grape"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
// Output: apple, banana, grape

Vereinfachtes Durchlaufen mit for...of

let colors = ["red", "blue", "green"];
for (let color of colors) {
  console.log(color);
}
// Output: red, blue, green

Durchlaufen mit der Methode forEach()

let animals = ["cat", "dog", "bird"];
animals.forEach((animal, index) => {
  console.log(`${index}: ${animal}`);
});
// Output: 0: cat, 1: dog, 2: bird

Ein neues Array mit map() erstellen

let numbers = [1, 2, 3, 4];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

6.2 Fortgeschrittene Techniken

Duplikate entfernen

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Ein Array flach machen – flat()

let nested = [1, [2, 3], [4, [5, 6]]];
let flatArray = nested.flat(2);
console.log(flatArray); // [1, 2, 3, 4, 5, 6]

Zusammenfassung

Dieser Abschnitt erklärte Methoden zum Durchlaufen von Arrays und fortgeschrittene Techniken:

1. Grundlegende Schleifen: Effiziente Iteration mit for und for...of.
2. Methodenbasierte Schleifen: Verwendung von forEach() und map() für sauberere und funktionalere Verarbeitung.
3. Fortgeschrittene Datenmanipulation: Entfernen von Duplikaten und Flachmachen verschachtelter Arrays.

7. Praktisches Beispiel | Aufbau einer einfachen Anwendung mit Arrays

7.1 Erstellung einer To‑Do‑Listen‑Anwendung

Funktionsübersicht

Diese einfache To‑Do‑Listen‑App enthält die folgenden Funktionen:

1. Neue Aufgaben hinzufügen
2. Erledigte Aufgaben entfernen
3. Aktuelle Aufgabenliste anzeigen

Code‑Beispiel

let tasks = [];

// Function to add a new task
function addTask(task) {
  tasks.push(task);
  console.log(`Added: ${task}`);
  displayTasks();
}

// Function to remove a task
function removeTask(index) {
  if (index >= 0 && index < tasks.length) { let removed = tasks.splice(index, 1); console.log(`Removed: ${removed[0]}`); displayTasks(); } else { console.log("Invalid index"); } } // Function to display current tasks function displayTasks() { console.log("Current Tasks:"); tasks.forEach((task, index) => {
    console.log(`${index + 1}: ${task}`);
  });
}

// Test execution
addTask("Study JavaScript");
addTask("Create shopping list");
addTask("Check email");

removeTask(1); // Remove the second task

Beispielausgabe

Added: Study JavaScript
Added: Create shopping list
Added: Check email
Current Tasks:
1: Study JavaScript
2: Create shopping list
3: Check email
Removed: Create shopping list
Current Tasks:
1: Study JavaScript
2: Check email

Zusammenfassung

Dieser Abschnitt stellte eine praktische Anwendung mit Array-Operationen vor:

1. To-Do-Listen-Anwendung : Geübtes Hinzufügen, Entfernen und Anzeigen von Aufgaben.
2. Suche und Datenanalyse : Demonstriert, wie man flexible Suche und Datenaggregation mit Array-Operationen implementiert.

8. Zusammenfassung | Beherrschung von Array-Operationen

JavaScript-Arrays sind leistungsstarke Werkzeuge, die helfen, Datenverwaltung und -manipulation zu optimieren. Dieser Artikel behandelte alles von grundlegenden Operationen bis hin zu fortgeschrittenen Techniken und praktischen Beispielen.

8.1 Rückblick auf diesen Artikel

1. Grundlegende Array-Operationen

• Deklaration und Initialisierung : Erlernt, wie man Arrays erstellt und mehrdimensionale Arrays handhabt.
• Hinzufügen, Entfernen und Abrufen von Elementen : Geübte dynamische Datenmanipulation mit Methoden wie push(), pop() und anderen.

2. Sortieren und Filtern von Arrays

• Sortieren : Erklärt, wie man die Reihenfolge von Arrays mit sort() und reverse() ändert.
• Filtern : Erlernt, wie man Daten mit filter() und find() extrahiert.

3. Verbinden, Aufteilen und Transformieren von Arrays

• Verbinden : Verstanden, wie man Arrays mit concat() und Spread-Syntax zusammenführt.
• Aufteilen & Transformieren : Verwendet slice(), splice(), join() und split() für flexible Datenhandhabung.

4. Schleifen und fortgeschrittene Techniken

• Schleifen : Verwendet for, forEach() und map() für effiziente Iteration.
• Fortgeschrittene Techniken : Erlernt, Duplikate zu entfernen und verschachtelte Arrays zu flatten.

5. Praktische Beispiele

• To-Do-Listen-App : Angewendet von Array-Operationen zum Erstellen einer funktionalen App.
• Suche & Datenaggregation : Demonstrierte praktische Datenfilterung und -analyse.

8.2 Bedeutung von Array-Operationen und Anwendungsfälle

Warum sind Array-Operationen wichtig?

Array-Manipulation ist entscheidend für das Organisieren, Analysieren und Anzeigen von Daten. Häufige Szenarien umfassen:

1. Datenverwaltung und Anzeige : Filtern von API-Daten und Anzeigen der Ergebnisse in Tabellen.
2. Formular- und Benutzereingabe-Verarbeitung : Dynamisches Aktualisieren von Listen oder Verarbeiten von Eingabewerten.
3. Such- und Sortierfunktionen : Effiziente Handhabung großer Datensätze.
4. Anwendungsentwicklung : Erstellen von UI-Funktionen wie Warenkörben und Aufgabenmanagern.

8.3 Nächste Schritte beim Lernen

1. Weiterer Einsatz von Array-Methoden

• Vorgeschlagene Aufgabe : Erstelle eine App, die API-Daten abruft und die Ergebnisse mit Array-Operationen filtert.

2. Andere Datenstrukturen vergleichen und verwenden

• Lerne Objects, Set und Map, um die passende Struktur für jedes Szenario zu wählen.

3. Wissen in JavaScript-Frameworks anwenden

• Nutze Array-Fähigkeiten in Frameworks wie React oder Vue.js für die Entwicklung in der Praxis.

8.4 Referenzlinks und Ressourcen

• MDN Web Docs: Array Object https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array
• JavaScript.info: Arrays and Methods https://javascript.info/

8.5 Abschließende Gedanken und Ratschläge für die Leser

JavaScript-Array-Operationen sind unerlässlich, um ein solides Programmierfundament aufzubauen. Dieser Artikel bietet einen strukturierten Ansatz von den Grundlagen bis zu fortgeschrittenen Konzepten.

Ratschläge

1. Übung durch Schreiben von Code : Testen Sie jede Methode, um Ihr Verständnis zu vertiefen.
2. Entwickeln Sie Problemlösungsfähigkeiten : Wandeln Sie reale Aufgaben in Programme um, um praktische Expertise zu erweitern.
3. Weiterlernen : Erlernen Sie neue Frameworks und aktuelle Technologien, um Ihre Fähigkeiten zu verbessern.

Machen Sie den nächsten Schritt!

Nutzen Sie diesen Artikel als Grundlage, um komplexere Anwendungen zu erstellen oder moderne Frameworks zu erlernen.

FAQ | Häufig gestellte Fragen

Q1. Was ist der Unterschied zwischen map() und forEach()?

• map() : Gibt ein neues Array zurück, nachdem eine Funktion auf jedes Element angewendet wurde.
• forEach() : Führt eine Funktion für jedes Element aus, gibt jedoch kein neues Array zurück.

Beispiel:

let numbers = [1, 2, 3];

// map()
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

// forEach()
numbers.forEach(num => console.log(num * 2));
// Output: 2, 4, 6

Q2. Wie sortiere ich Zahlen korrekt?

Standardmäßig vergleicht sort() Werte als Zeichenketten. Um Zahlen numerisch zu sortieren, müssen Sie eine Vergleichsfunktion übergeben.
Beispiel:

let numbers = [40, 100, 1, 5, 25];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 5, 25, 40, 100]

Q3. Wie kann ich Duplikate aus einem Array entfernen?

Verwenden Sie das Set-Objekt, um Duplikate einfach zu entfernen.
Beispiel:

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Q4. Wie prüfe ich, ob ein Element in einem Array existiert?

Verwenden Sie die Methode includes(), um festzustellen, ob das Array einen bestimmten Wert enthält.
Beispiel:

let fruits = ["apple", "banana", "grape"];
console.log(fruits.includes("banana")); // true
console.log(fruits.includes("melon")); // false

Q5. Wie flache ich ein mehrdimensionales Array ab?

Verwenden Sie die Methode flat(), um ein verschachteltes Array in ein eindimensionales Array zu konvertieren.
Beispiel:

let nested = [1, [2, 3], [4, [5, 6]]];
let flatArray = nested.flat(2);
console.log(flatArray); // [1, 2, 3, 4, 5, 6]