Resumo : neste tutorial, você aprenderá como trabalhar com um array multidimensional JavaScript e manipular seus elementos de forma eficaz.
Introdução ao array multidimensional JavaScript
JavaScript não fornece o array multidimensional nativamente. No entanto, você pode criar um array multidimensional definindo um array de elementos, onde cada elemento também é outro array.
Por esta razão, podemos dizer que um array multidimensional JavaScript é um array de arrays. A maneira mais fácil de definir um array multidimensional é usar a notação literal de array.
Para declarar um array multidimensional vazio, você usa a mesma sintaxe da declaração de um array unidimensional:
let activities = [];Linguagem de código: JavaScript ( javascript )O exemplo a seguir define uma matriz bidimensional chamada activities:
let activities = [
['Work', 9],
['Eat', 1],
['Commute', 2],
['Play Game', 1],
['Sleep', 7]
];Linguagem de código: JavaScript ( javascript )Na activitiesmatriz, a primeira dimensão representa a atividade e a segunda mostra o número de horas gastas por dia para cada uma.
Para mostrar o activitiesarray no console, você usa o console.table()método a seguir:
console.table(activities);Linguagem de código: JavaScript ( javascript )O seguinte ilustra a saída:
┌─────────┬─────────────┬───┐
│ (index) │ 0 │ 1 │
├─────────┼─────────────┼───┤
│ 0 │ 'Work' │ 9 │
│ 1 │ 'Eat' │ 1 │
│ 2 │ 'Commute' │ 2 │
│ 3 │ 'Play Game' │ 1 │
│ 4 │ 'Sleep' │ 7 │
└─────────┴─────────────┴───┘Linguagem de código: texto simples ( texto simples )Observe que a (index)coluna é para a ilustração que indica os índices do array interno.
Para acessar um elemento da matriz multidimensional, primeiro você usa colchetes para acessar um elemento da matriz externa que retorna uma matriz interna; e então use outro colchete para acessar o elemento da matriz interna.
O exemplo a seguir retorna o segundo elemento da primeira matriz interna na activitiesmatriz acima:
console.log(activities[0][1]); // 9Linguagem de código: JavaScript ( javascript )Adicionando elementos ao array multidimensional JavaScript
Você pode usar os métodos Array como push()e splice()para manipular elementos de um array multidimensional.
Por exemplo, para adicionar um novo elemento no final do array multidimensional, você usa o push()método a seguir:
activities.push(['Study',2]);
console.table(activities);Linguagem de código: CSS ( css )┌─────────┬─────────────┬───┐
│ (index) │ 0 │ 1 │
├─────────┼─────────────┼───┤
│ 0 │ 'Work' │ 9 │
│ 1 │ 'Eat' │ 1 │
│ 2 │ 'Commute' │ 2 │
│ 3 │ 'Play Game' │ 1 │
│ 4 │ 'Sleep' │ 7 │
│ 5 │ 'Study' │ 2 │
└─────────┴─────────────┴───┘Linguagem de código: texto simples ( texto simples )Para inserir um elemento no meio do array, você usa o splice()método. O seguinte insere um elemento na segunda posição do array de atividades:
activities.splice(1, 0, ['Programming', 2]);
console.table(activities);Linguagem de código: 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 │
└─────────┴───────────────┴───┘Linguagem de código: texto simples ( texto simples )Este exemplo calcula a porcentagem de horas gastas em cada atividade e anexa a porcentagem à matriz interna.
activities.forEach(activity => {
let percentage = ((activity[1] / 24) * 100).toFixed();
activity[2] = percentage + '%';
});
console.table(activities);Linguagem de código: JavaScript ( javascript )O seguinte mostra a saída no 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%' │
└─────────┴───────────────┴───┴───────┘Linguagem de código: texto simples ( texto simples )Removendo elementos do array multidimensional JavaScript
Para remover um elemento de um array, você usa o método pop()ou splice().
Por exemplo, a instrução a seguir remove o último elemento da activitiesmatriz.
activities.pop();
console.table(activities);Linguagem de código: CSS ( css )Saída:
┌─────────┬───────────────┬───┬───────┐
│ (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%' │
└─────────┴───────────────┴───┴───────┘Linguagem de código: texto simples ( texto simples )Da mesma forma, você pode remover os elementos da matriz interna da matriz multidimensional usando o pop()método. O exemplo a seguir remove o elemento percentual das matrizes internas da activitiesmatriz.
activities.forEach((activity) => {
activity.pop(2);
});
console.table(activities);Linguagem de código: JavaScript ( javascript )Saída:
┌─────────┬───────────────┬───┐
│ (index) │ 0 │ 1 │
├─────────┼───────────────┼───┤
│ 0 │ 'Work' │ 9 │
│ 1 │ 'Programming' │ 2 │
│ 2 │ 'Eat' │ 1 │
│ 3 │ 'Commute' │ 2 │
│ 4 │ 'Play Game' │ 1 │
│ 5 │ 'Sleep' │ 7 │
└─────────┴───────────────┴───┘Linguagem de código: texto simples ( texto simples )Iterando sobre elementos do array multidimensional JavaScript
Para iterar uma matriz multidimensional, você usa um loop for aninhado como no exemplo a seguir.
// loop the outer array
for (let i = 0; i < activities.length; i++) {
// get the size of the inner array
var innerArrayLength = activities[i].length;
// loop the inner array
for (let j = 0; j < innerArrayLength; j++) {
console.log('[' + i + ',' + j + '] = ' + activities[i][j]);
}
}Linguagem de código: JavaScript ( javascript )O primeiro loop itera sobre os elementos da matriz externa e o loop aninhado itera sobre os elementos da matriz interna.
Veja a seguir a saída do script no console:
[0,0] = Work
[0,1] = 9
[1,0] = Eat
[1,1] = 1
[2,0] = Commute
[2,1] = 2
[3,0] = Play Game
[3,1] = 1
[4,0] = Sleep
[4,1] = 7
[5,0] = Study
[5,1] = 2Ou você pode usar o forEach()método duas vezes:
activities.forEach((activity) => {
activity.forEach((data) => {
console.log(data);
});
});Linguagem de código: JavaScript ( javascript )Saída:
Work
9
Eat
1
Commute
2
Play Game
1
Sleep
7
Study
2Linguagem de código: texto simples ( texto simples )Neste tutorial, você aprendeu como usar um array de arrays para criar um array multidimensional JavaScript.
