JavaScript Multidimensional Array

Sumário: neste tutorial, aprenderá como trabalhar com JavaScript multidimensional array.

Introdução ao JavaScript multidimensional array

JavaScript não fornece o array multidimensional nativamente. Contudo, é possível criar um array multidimensional definindo um array de elementos, onde cada elemento é também um outro array.

Por esta razão, podemos dizer que um array multidimensional JavaScript é um array de arrays. A forma mais fácil de definir um array multidimensional é utilizar a notação literal do array.

Para declarar um array multidimensional vazio, usa-se a mesma sintaxe que declarar um array unidimensional:

let activities = ;
Code language: JavaScript (javascript)

O exemplo seguinte define um array bidimensional chamado activities:

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

Na matriz activities, a primeira dimensão representa a actividade e a segunda mostra o número de horas gastas por dia para cada uma.

Para mostrar o activities array na consola, usa-se o método console.table() da seguinte forma:

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

O seguinte ilustra o output:

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

Nota que a coluna (index) é para a ilustração que indica os índices da matriz interna.

Para aceder a um elemento da matriz multidimensional, usa-se primeiro colchetes para aceder a um elemento da matriz externa que devolve uma matriz interna; e depois usa-se outro colchete para aceder ao elemento da matriz interna.

O exemplo seguinte devolve o segundo elemento da primeira matriz interna no activities matriz acima:

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

Adicionando elementos ao array multidimensional JavaScript

É possível usar os métodos Array como push() e splice() para manipular elementos de um array multidimensional.

Por exemplo, para adicionar um novo elemento no fim da matriz multidimensional, usa-se o método push() como se segue:

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)

Para inserir um elemento no meio do array, usa-se o método splice(). O seguinte insere um elemento na segunda posição da matriz de actividades:

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

Aqui está a saída:

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

Este exemplo calcula a percentagem das horas gastas em cada actividade e anexa a percentagem à matriz interna.

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

O seguinte mostra a saída na consola:

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

Remover elementos do array multidimensional JavaScript

Para remover um elemento de um array, usa-se o método pop() ou splice().

Por exemplo, a seguinte afirmação remove o último elemento do activities array.

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

Output:

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

Simplesmente, é possível remover os elementos da matriz interna da matriz multidimensional utilizando o método pop(). O exemplo seguinte remove o elemento percentual das matrizes internas do 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)

Iterating over elements of the JavaScript multidimensional array

Para iterar um array multidimensional, utiliza-se um aninhado para loop como no exemplo seguinte.

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

A primeira iteração de loop sobre os elementos da matriz externa e a iteração de loop aninhado sobre os elementos da matriz interna.

O seguinte mostra a saída do script na consola:

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

Or pode usar o método forEach() duas vezes:

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

Output:

Work9Eat1Commute2Play Game1Sleep7Study2

Neste tutorial, aprendeu a utilizar uma matriz de matrizes para criar uma matriz multidimensional JavaScript.