JavaScript-Arrays erklärt: Grundlagen, Operationen und praktische Beispiele

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

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

1. Einführung

Was sind JavaScript-Arrays und warum sind sie wichtig?

JavaScript-Arrays sind eines der wesentlichen Elemente, um Daten effizient zu verwalten und zu manipulieren. Durch die Verwendung von 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 Listen von Benutzernamen, Produktkataloge oder Berechnungsergebnisse gespeichert werden. In der Web‑Anwendungsentwicklung werden Arrays häufig beim Umgang mit Formulardaten oder Daten, die von APIs abgerufen werden, eingesetzt.

Praktische Anwendungsfälle für Arrays

• Listenverwaltung : Verwaltung von Warenkorbelementen oder To‑Do‑Listen.
• Datenfilterung : Benutzersuchen und Sortierfunktionen.
• Animationssteuerung : Steuerung der Elementreihenfolge und dynamische Updates.

Auf diese Weise sind Arrays 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 anhand der folgenden Themen:

1. Wie man Arrays deklariert und initialisiert
2. Hinzufügen, Entfernen und Abrufen von Elementen
3. Sortier‑ und Filtertechniken
4. Methoden zum Zusammenführen und Aufteilen von Arrays
5. Praktische Anwendungsbeispiele mit Arrays

Der Inhalt ist sowohl für Anfänger als auch für Fortgeschrittene konzipiert und deckt sorgfältig alles von Grundoperationen bis zu fortgeschrittenen Techniken ab.

Zielgruppe

• Anfänger : Personen, die zum ersten Mal mit Arrays arbeiten.
• Fortgeschrittene Entwickler : Personen, die fortgeschrittene und effiziente Array‑Operationen erlernen möchten.

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

Was Sie durch das Erlernen von Arrays erreichen können

Durch das Beherrschen von JavaScript-Arrays erwerben Sie folgende Fähigkeiten:

• Datenverwaltung und -manipulation : Daten einfach hinzufügen, entfernen und sortieren.
• API-Integration : Daten, die von Web‑APIs abgerufen werden, effizient verarbeiten und anzeigen.
• Anwendungsentwicklung : Einfache Anwendungen basierend auf praktischen Beispielen erstellen.

Nutzen Sie das hier erworbene Wissen, um fortgeschrittenere Programme mit JavaScript zu erstellen.

2. Grundlagen von Arrays: Deklaration und Initialisierung

2.1 Definition und Rolle von Arrays

In JavaScript ist ein Array ein spezielles Objekt, das Ihnen ermöglicht, mehrere Werte gleichzeitig zu verwalten. Jedes Element hat eine Reihenfolge (Index), was das Abrufen und Manipulieren von Daten erleichtert.

Hauptaufgaben von Arrays

1. Listenverwaltung : Organisation von Produktlisten oder Benutzerinformationen.
2. Datenmanipulation : Effiziente Verarbeitung wie Sortieren und Suchen.
3. Dynamische Datenverarbeitung : Transformieren und Verarbeiten von Daten, die von APIs abgerufen werden.

Eigenschaften von Arrays

• Indizes beginnen bei 0.
• Elemente unterschiedlicher Datentypen können im selben Array koexistieren.

  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 mit den folgenden beiden Methoden deklariert werden.

1. Verwendung von Array‑Literalen (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 speichert Arrays innerhalb eines Arrays. Es ist nützlich beim Umgang mit hierarchischen Datenstrukturen.

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

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

2.4 Wichtige Hinweise beim Initialisieren von Arrays

Mischen von Datentypen

Da JavaScript‑Arrays verschiedene Datentypen enthalten können, kann dies zu unbeabsichtigten Fehlern führen, wenn es nicht sorgfältig behandelt wird.

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 haben wir die folgenden Themen im Zusammenhang mit JavaScript-Arrays behandelt:

1. Die Definition und Rolle von Arrays
2. Grundlegende Syntax für Deklaration und Initialisierung
3. Mehrdimensionale Arrays und Indizierung
4. Wichtige Überlegungen und praktische Codebeispiele

Durch das Beherrschen dieser Grundlagen können Sie nahtlos zum nächsten Schritt übergehen: grundlegende Array-Operationen.

3. Grundlegende Array-Operationen: Hinzufügen, Entfernen und Abrufen

3.1 Wie man Elemente hinzufügt

Ein Element am Ende hinzufügen – push()

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

Ein Element am Anfang hinzufügen – unshift()

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

3.2 Wie man Elemente entfernt

Ein Element vom Ende entfernen – pop()

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

Ein Element vom Anfang entfernen – shift()

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

Elemente von beliebiger Position entfernen – splice()

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

3.3 Wie man Elemente abruft

Nach Index abrufen

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

Das letzte Element eines Arrays erhalten

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

Ein Element, das einer Bedingung entspricht, 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 wichtigsten Punkte zu JavaScript-Array-Operationen behandelt:

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

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

4. Sortieren und Filtern von Arrays

4.1 Wie man Arrays sortiert

Auf- bzw. Absteigend sortieren – sort()

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

Reihenfolge umkehren – reverse()

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

4.2 Wie man Arrays filtert

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 erhalten, das einer Bedingung entspricht – find()

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

Den 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 haben wir erklärt, wie man JavaScript-Arrays detailliert sortiert und filtert.

1. Sortieren: Reihenfolge mit sort() und reverse() steuern.
2. Filtern: Verwenden Sie filter() , um nur Elemente zu extrahieren, die einer Bedingung entsprechen.
3. Suchen: Finden Sie bestimmte Elemente mit find() und findIndex() .

5. Zusammenführen, Aufteilen und Transformieren von Arrays

5.1 Wie man Arrays zusammenführt

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 Wie man Arrays aufteilt

Einen 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 Wie man Arrays transformiert

Ein Array in einen String konvertieren – join()

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

Einen String in ein Array konvertieren – split()

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

Ein 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

In diesem Abschnitt haben wir Methoden zum Zusammenführen, Aufteilen und Transformieren von JavaScript‑Arrays untersucht.

1. Arrays zusammenführen mit concat() und der Spread‑Syntax.
2. Arrays aufteilen mit slice() und sie mit splice() modifizieren.
3. Arrays und Strings transformieren mit join() und split() .
4. Verschachtelte Arrays flach machen mit flat() .

6. Durchlaufen von Arrays und fortgeschrittene Techniken

6.1 Methoden zum Durchlaufen von Arrays

Grundlegendes Durchlaufen mit einer for‑Anweisung

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

Prägnantes Durchlaufen mit for...of

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

Durchlaufen mit forEach()

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

Erzeugen eines neuen Arrays mit map()

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

In diesem Abschnitt haben wir Durchlauftechniken und fortgeschrittene Array‑Verwendung behandelt.

1. Grundlegende Schleifen mit for und for...of .
2. Effiziente Verarbeitung und Array‑Erstellung mit forEach() und map() .
3. Fortgeschrittene Techniken wie das Entfernen von Duplikaten und das Flachmachen von Arrays.

7. Praktisches Beispiel: Eine einfache Anwendung mit Arrays erstellen

7.1 Erstellen einer Todo‑Listen‑Anwendung

Funktionsübersicht

Diese Anwendung ist eine einfache Todo‑Liste mit den folgenden Funktionen:

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

Code‑Beispiel

let tasks = [];

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

javascript // Funktion zum Entfernen einer Aufgabe function removeTask(index) { if (index >= 0 && index < tasks.length) { let removed = tasks.splice(index, 1); console.log(Entfernt: ${removed[0]}); displayTasks(); } else { console.log(„Ungültiger Index“); } }

// Funktion zur Anzeige der aktuellen Aufgaben function displayTasks() { console.log(„Aktuelle Aufgaben:“); tasks.forEach((task, index) => { console.log(${index + 1}: ${task}); }); }

// Testausführung addTask(„Study JavaScript“); addTask(„Create a shopping list“); addTask(„Check emails“);

removeTask(1); // Entfernt die zweite Aufgabe

### Sample Output

Hinzugefügt: Study JavaScript Hinzugefügt: Create a shopping list Hinzugefügt: Check emails Aktuelle Aufgaben: 1: Study JavaScript 2: Create a shopping list 3: Check emails Entfernt: Create a shopping list Aktuelle Aufgaben: 1: Study JavaScript 2: Check emails

### Summary



In this section, we introduced a practical application that leverages array operations.



1. **Todo List Application** : Practiced adding, removing, and displaying elements using arrays.
2. **Search and Data Aggregation** : Demonstrated flexible data handling through array manipulation.







## 8. Conclusion: Mastering Array Operations



JavaScript arrays are powerful tools for efficiently managing and manipulating data. This article comprehensively covered everything from basic operations to advanced techniques and practical examples.



### 8.1 Article Recap



#### 1. Basic Array Operations



* **Declaration and initialization** : Learned how to create arrays and work with multidimensional structures.
* **Adding, removing, and retrieving elements** : Practiced dynamic data manipulation using methods such as `push()` and `pop()` .



#### 2. Sorting and Filtering Arrays



* **Sorting** : Explained how to change element order using `sort()` and `reverse()` .
* **Filtering** : Demonstrated how to extract data that meets specific conditions using `filter()` and `find()` .



#### 3. Merging, Splitting, and Transforming Arrays



* **Merging** : Mastered flexible merging using `concat()` and the spread syntax.
* **Splitting and transforming** : Manipulated data using `slice()` , `splice()` , `join()` , and `split()` .



#### 4. Looping and Advanced Techniques



* **Looping** : Improved efficiency with `for` , `forEach()` , and `map()` .
* **Advanced techniques** : Learned duplicate removal and array flattening.



#### 5. Practical Example



* **Todo List Application** : Experienced how array operations are applied in real-world applications.
* **Search and data aggregation** : Implemented flexible searching and data processing.



### 8.2 Why Array Operations Matter



#### Why Are Array Operations Important?



Array operations are essential skills for organizing, analyzing, and displaying data. They are frequently used in the following scenarios:

1. **Datenverwaltung und -präsentation** : API-Daten filtern und in Tabellen anzeigen.  
2. **Formular- und Benutzereingabenverarbeitung** : Listen dynamisch verwalten und Eingaben verarbeiten.  
3. **Such- und Sortierfunktionen** : Große Datensätze effizient handhaben.  
4. **Grundlagen der Anwendungsentwicklung** : UI‑Komponenten wie Warenkörbe und Aufgabenverwaltungssysteme bauen.  

### 8.3 Nächste Schritte im Lernen  

#### 1. Weiterer Einsatz von Array‑Methoden  

* **Vorgeschlagene Herausforderung** : Erstelle eine Anwendung, die API‑Daten anzeigt und filtert, indem sie Array‑Operationen nutzt.  

#### 2. Vergleich und Auswahl anderer Datenstrukturen  

* Lerne **Objekte**, **Set** und **Map**, um die passende Struktur für jeden Anwendungsfall zu wählen.  

#### 3. Praktische Anwendung in JavaScript‑Frameworks  

* Setze diese Fähigkeiten in Frameworks wie React oder Vue.js ein.  

### 8.4 Referenzlinks und Ressourcen  

* **MDN Web Docs: Array‑Objekt**  <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array>  
* **JavaScript.info: Arrays und Methoden**  <https://javascript.info/>  

### 8.5 Abschließender Rat für Leser  

JavaScript-Array-Operationen sind entscheidend für den Aufbau einer soliden Programmiergrundlage. Dieser Artikel führte Sie durch grundlegende und fortgeschrittene Techniken.

Ratschläge

1. Praktisches Üben : Schreiben und testen Sie Code, um Ihr Verständnis zu festigen.
2. Entwickeln Sie Problemlösungsfähigkeiten : Übersetzen Sie reale Probleme in Code.
3. Verpflichten Sie sich zum kontinuierlichen Lernen : Bleiben Sie mit modernen Techniken und Frameworks auf dem Laufenden.

Gehen Sie zum nächsten Schritt!

Verwenden Sie diesen Artikel als Grundlage und bauen Sie weiter fortgeschrittene Anwendungen und lernen Sie moderne Frameworks.

FAQ: Häufig gestellte Fragen

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

• map() : Gibt ein neues Array zurück. Es wendet eine Transformation auf jedes Element an und sammelt die Ergebnisse.
• forEach() : Gibt kein neues Array zurück und führt einfach eine Funktion für jedes Element aus.

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 kann ich Zahlen korrekt sortieren?

Die sort()-Methode vergleicht standardmäßig Elemente als Zeichenketten. Um Zahlen korrekt zu sortieren, müssen Sie eine Vergleichsfunktion bereitstellen.

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 doppelte Elemente aus einem Array entfernen?

Sie können Duplikate einfach entfernen, indem Sie das Set-Objekt verwenden.

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 kann ich prüfen, ob ein Element in einem Array existiert?

Verwenden Sie die includes()-Methode, um festzustellen, ob ein bestimmtes Element in einem Array existiert.

Beispiel:

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

Q5. Wie kann ich ein mehrdimensionales Array in ein eindimensionales Array umwandeln?

Verwenden Sie die flat()-Methode, um verschachtelte Arrays zu glätten.

Beispiel:

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