JavaScript multidimensionale array

Samenvatting: in deze tutorial leert u werken met JavaScript multidimensionale array.

Inleiding tot JavaScript multidimensionale array

JavaScript biedt niet de multidimensionale array van nature. Je kunt echter wel een multidimensionale array maken door een array van elementen te definiëren, waarbij elk element ook weer een andere array is.

Om deze reden kunnen we zeggen dat een JavaScript multidimensionale array een array van arrays is. De eenvoudigste manier om een multidimensionale array te definiëren is door gebruik te maken van de array literal notatie.

Om een lege multidimensionale matrix te declareren, gebruikt u dezelfde syntaxis als bij de declaratie van een eendimensionale matrix:

let activities = ;
Code language: JavaScript (javascript)

Het volgende voorbeeld definieert een tweedimensionale matrix met de naam activities:

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

In de activities array geeft de eerste dimensie de activiteit weer en de tweede het aantal uren dat per dag aan elke activiteit is besteed.

Om de activities array in de console te tonen, gebruikt u de console.table() methode als volgt:

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

Het volgende illustreert de uitvoer:

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

Merk op dat de (index) kolom ter illustratie de indices van de binnenste array aangeeft.

Om toegang te krijgen tot een element van de multidimensionale matrix, gebruikt u eerst vierkante haakjes om toegang te krijgen tot een element van de buitenste matrix die een binnenste matrix teruggeeft; en vervolgens gebruikt u nog een vierkant haakje om toegang te krijgen tot het element van de binnenste matrix.

Het volgende voorbeeld geeft het tweede element van de eerste binnenarray in de activities array hierboven:

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

Elementen toevoegen aan de JavaScript multidimensionale array

U kunt de Array methoden gebruiken zoals push() en splice() om elementen van een multidimensionale array te manipuleren.

Om bijvoorbeeld een nieuw element aan het eind van de multidimensionale matrix toe te voegen, gebruikt u de methode push() als volgt:

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)

Om een element in het midden van de array in te voegen, gebruikt u de methode splice(). Het volgende voegt een element in op de tweede positie van de activiteiten-array:

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

Hier volgt de uitvoer:

┌─────────┬───────────────┬───┐│ (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)

Dit voorbeeld berekent het percentage van de uren die aan elke activiteit zijn besteed en voegt dat percentage toe aan de binnenste array.

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

Het volgende toont de uitvoer in de console:

┌─────────┬───────────────┬───┬───────┐│ (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)

Elementen uit de multidimensionale JavaScript-array verwijderen

Om een element uit een array te verwijderen, gebruikt u de pop() of splice() methode.

Voorbeeld: het volgende statement verwijdert het laatste element van de activities array.

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

Uitvoer:

┌─────────┬───────────────┬───┬───────┐│ (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)

Op dezelfde manier kunt u de elementen uit de binnenste array van de multidimensionale array verwijderen door de methode pop() te gebruiken. Het volgende voorbeeld verwijdert het percentage-element uit de binnenste arrays van de activities array.

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

Output:

┌─────────┬───────────────┬───┐│ (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)

Itereren over elementen van de multidimensionale JavaScript-array

Om een multidimensionale array te itereren, gebruikt u een geneste for-lus zoals in het volgende voorbeeld.

// 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)

De eerste lus itereert over de elementen van de buitenste array en de geneste lus itereert over de elementen van de binnenste array.

Het volgende toont de uitvoer van het script in de console:

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

Of u kunt de methode forEach() tweemaal gebruiken:

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

Uitvoer:

Work9Eat1Commute2Play Game1Sleep7Study2

In deze tutorial heb je geleerd hoe je een array van arrays kunt gebruiken om een JavaScript multidimensionale array te maken.