JavaScript mehrdimensionales Array

Zusammenfassung: In diesem Tutorial lernen Sie, wie man mit JavaScript mehrdimensionales Array arbeitet.

Einführung in JavaScript mehrdimensionales Array

JavaScript bietet das mehrdimensionale Array nicht nativ an. Sie können jedoch ein mehrdimensionales Array erstellen, indem Sie ein Array von Elementen definieren, wobei jedes Element auch ein anderes Array ist.

Aus diesem Grund können wir sagen, dass ein JavaScript mehrdimensionales Array ein Array von Arrays ist. Der einfachste Weg, ein mehrdimensionales Array zu definieren, ist die Verwendung der Array-Literal-Notation.

Um ein leeres mehrdimensionales Array zu deklarieren, verwenden Sie die gleiche Syntax wie bei der Deklaration eines eindimensionalen Arrays:

let activities = ;
Code language: JavaScript (javascript)

Das folgende Beispiel definiert ein zweidimensionales Array namens activities:

let activities = , , , , ];
Code language: JavaScript (javascript)

In dem activities-Array stellt die erste Dimension die Aktivität dar und die zweite die Anzahl der Stunden, die pro Tag dafür aufgewendet werden.

Um das activities-Array in der Konsole anzuzeigen, verwenden Sie die console.table()-Methode wie folgt:

console.table(activities);
Code language: JavaScript (javascript)

Das folgende Beispiel zeigt die Ausgabe:

┌─────────┬─────────────┬───┐│ (index) │ 0 │ 1 │├─────────┼─────────────┼───┤│ 0 │ 'Work' │ 9 ││ 1 │ 'Eat' │ 1 ││ 2 │ 'Commute' │ 2 ││ 3 │ 'Play Game' │ 1 ││ 4 │ 'Sleep' │ 7 │└─────────┴─────────────┴───┘
Code language: JavaScript (javascript)

Beachten Sie, dass die Spalte (index) zur Veranschaulichung dient, die die Indizes des inneren Arrays anzeigt.

Um auf ein Element des mehrdimensionalen Arrays zuzugreifen, verwenden Sie zunächst eckige Klammern, um auf ein Element des äußeren Arrays zuzugreifen, das ein inneres Array zurückgibt; und verwenden dann eine weitere eckige Klammer, um auf das Element des inneren Arrays zuzugreifen.

Das folgende Beispiel gibt das zweite Element des ersten inneren Arrays im obigen activities-Array zurück:

console.log(activities); // 9
Code language: JavaScript (javascript)

Elemente zum mehrdimensionalen JavaScript-Array hinzufügen

Sie können die Array-Methoden wie push() und splice() verwenden, um Elemente eines mehrdimensionalen Arrays zu manipulieren.

Um zum Beispiel ein neues Element am Ende des mehrdimensionalen Arrays hinzuzufügen, verwenden Sie die Methode push() wie folgt:

activities.push();console.table(activities);
Code language: CSS (css)

┌─────────┬─────────────┬───┐│ (index) │ 0 │ 1 │├─────────┼─────────────┼───┤│ 0 │ 'Work' │ 9 ││ 1 │ 'Eat' │ 1 ││ 2 │ 'Commute' │ 2 ││ 3 │ 'Play Game' │ 1 ││ 4 │ 'Sleep' │ 7 ││ 5 │ 'Study' │ 2 │└─────────┴─────────────┴───┘
Code language: JavaScript (javascript)

Um ein Element in der Mitte des Arrays einzufügen, verwenden Sie die Methode splice(). Das folgende fügt ein Element an der zweiten Position des Aktivitäten-Arrays ein:

activities.splice(1, 0, );console.table(activities);
Code language: CSS (css)

Hier ist die Ausgabe:

┌─────────┬───────────────┬───┐│ (index) │ 0 │ 1 │├─────────┼───────────────┼───┤│ 0 │ 'Work' │ 9 ││ 1 │ 'Programming' │ 2 ││ 2 │ 'Eat' │ 1 ││ 3 │ 'Commute' │ 2 ││ 4 │ 'Play Game' │ 1 ││ 5 │ 'Sleep' │ 7 ││ 6 │ 'Study' │ 2 │└─────────┴───────────────┴───┘
Code language: JavaScript (javascript)

Dieses Beispiel berechnet den prozentualen Anteil der Stunden, die für jede Aktivität aufgewendet wurden und hängt den Prozentsatz an das innere Array an.

activities.forEach(activity => { let percentage = ((activity / 24) * 100).toFixed(); activity = percentage + '%';});console.table(activities);
Code language: JavaScript (javascript)

Das Folgende zeigt die Ausgabe in der Konsole:

┌─────────┬───────────────┬───┬───────┐│ (index) │ 0 │ 1 │ 2 │├─────────┼───────────────┼───┼───────┤│ 0 │ 'Work' │ 9 │ '38%' ││ 1 │ 'Programming' │ 2 │ '8%' ││ 2 │ 'Eat' │ 1 │ '4%' ││ 3 │ 'Commute' │ 2 │ '8%' ││ 4 │ 'Play Game' │ 1 │ '4%' ││ 5 │ 'Sleep' │ 7 │ '29%' ││ 6 │ 'Study' │ 2 │ '8%' │└─────────┴───────────────┴───┴───────┘
Code language: JavaScript (javascript)

Elemente aus dem mehrdimensionalen JavaScript-Array entfernen

Um ein Element aus einem Array zu entfernen, verwenden Sie die Methode pop() oder splice().

Die folgende Anweisung entfernt zum Beispiel das letzte Element des activities-Arrays.

activities.pop();console.table(activities);
Code language: CSS (css)

Ausgabe:

┌─────────┬───────────────┬───┬───────┐│ (index) │ 0 │ 1 │ 2 │├─────────┼───────────────┼───┼───────┤│ 0 │ 'Work' │ 9 │ '38%' ││ 1 │ 'Programming' │ 2 │ '8%' ││ 2 │ 'Eat' │ 1 │ '4%' ││ 3 │ 'Commute' │ 2 │ '8%' ││ 4 │ 'Play Game' │ 1 │ '4%' ││ 5 │ 'Sleep' │ 7 │ '29%' │└─────────┴───────────────┴───┴───────┘
Code language: JavaScript (javascript)

In ähnlicher Weise können Sie die Elemente aus dem inneren Array des mehrdimensionalen Arrays entfernen, indem Sie die Methode pop() verwenden. Das folgende Beispiel entfernt das Prozent-Element aus den inneren Arrays des activities-Arrays.

activities.forEach((activity) => { activity.pop(2);});console.table(activities);
Code language: JavaScript (javascript)

Ausgabe:

┌─────────┬───────────────┬───┐│ (index) │ 0 │ 1 │├─────────┼───────────────┼───┤│ 0 │ 'Work' │ 9 ││ 1 │ 'Programming' │ 2 ││ 2 │ 'Eat' │ 1 ││ 3 │ 'Commute' │ 2 ││ 4 │ 'Play Game' │ 1 ││ 5 │ 'Sleep' │ 7 │└─────────┴───────────────┴───┘
Code language: JavaScript (javascript)

Iterieren über Elemente des mehrdimensionalen JavaScript-Arrays

Um ein mehrdimensionales Array zu iterieren, verwenden Sie eine verschachtelte for-Schleife wie im folgenden Beispiel.

// loop the outer arrayfor (let i = 0; i < activities.length; i++) { // get the size of the inner array var innerArrayLength = activities.length; // loop the inner array for (let j = 0; j < innerArrayLength; j++) { console.log(' = ' + activities); }}
Code language: JavaScript (javascript)

Die erste Schleife iteriert über die Elemente des äußeren Arrays und die verschachtelte Schleife iteriert über die Elemente des inneren Arrays.

Das Folgende zeigt die Ausgabe des Skripts in der Konsole:

 = Work = 9 = Eat = 1 = Commute = 2 = Play Game = 1 = Sleep = 7 = Study = 2

Oder Sie können die Methode forEach() zweimal verwenden:

activities.forEach((activity) => { activity.forEach((data) => { console.log(data); });});
Code language: JavaScript (javascript)

Ausgabe:

Work9Eat1Commute2Play Game1Sleep7Study2

In diesem Tutorial haben Sie gelernt, wie man mit einem Array von Arrays ein mehrdimensionales JavaScript-Array erstellt.