Matriz - Como Criar, Inicializar, Exibir e Alterar

Neste tutorial de nossa apostila de JavaScript, vamos aprender a usar matrizes. Vamos ver como declarar, inicializar, exibir e alterar os itens de um array de arrays, ou seja, de uma matriz.

• Estudar Matriz pela Apostila JavaScript Progressivo

Como Declarar uma Matriz

Vamos declarar e inicializar a matriz do tutorial anterior, sobre o que são matrizes (aquela 3x3 que vai de 1 até 9).

Basta fazer:

var matriz = [ [1,2,3],

                      [4,5,6],

                      [7,8,9] ];

Ou seja, inserimos três arrays (um por linha), no array matriz.

Uma outra maneira seria primeiro inicializar a variável como um array de 3 elementos:

var matriz = new Array(3);

Agora vamos em cada elemento e inicializamos com vetores:

matriz[0] = [1,2,3];

matriz[1] = [4,5,6];

matriz[2] = [7,8,9];

Lembrando que podemos também criar e declarar uma matriz com elementos nulos e de qualquer tamanho de linhas ou colunas:

var matriz = new Array(2);

matriz[0] = new Array(3);

matriz[1] = new Array(3);

No código acima, declaramos uma matriz de duas linhas e três colunas, conseguiu captar a ideia?

Como acessar elementos de uma Matriz

Vamos supor uma matriz 3x4. Ou seja, três linhas e 4 colunas.
Seus itens são acessados assim:

               Coluna 0      Coluna 1    Coluna 2   Coluna 3
Linha 0   a[ 0 ][ 0 ]    a[ 0 ][ 1 ]    a[ 0 ][ 2 ]    a[ 0 ][ 3 ]
Linha 1   a[ 1 ][ 0 ]    a[ 1 ][ 1 ]    a[ 1 ][ 2 ]    a[ 1 ][ 3 ]
Linha 2   a[ 2 ][ 0 ]    a[ 2 ][ 1 ]    a[ 2 ][ 2 ]    a[ 2 ][ 3 ]



Cada um desses elementos é uma variável, como outra qualquer.
Então, se quiser que o elemento da linha 2 e coluna 3 receba o valor 10, só fazer:
matriz[1][2] = 10;

Como exibir uma Matriz

A maneira mais fácil e recomendada de exibir uma matriz, é usando dois laços for, aninhados.
No primeiro laço, uma variável percorre as linhas.
No segundo laço, o interno, outra variável percorre o número correspondente de cada coluna.

No script abaixo inicializamos o vetor 3x3 que demos de exemplo, em seguida exibimos:

function exibe()
{
 var matriz = [ [1,2,3],
                       [4,5,6],
                       [7,8,9] ];

    for(let lin=0 ; lin<3 ; lin++){
     for(let col=0; col<3 ; col++)
      document.write(matriz[lin][col] + "  ");
     

     document.write("<br />");
    }

}

Vamos lá, devagar.

O primeiro for vai ficar responsável pelo índice das linhas, através da variável lin.
Ela assume primeiro o valor 0. Então, entra no FOR aninhado.

Esse for de dentro é o responsável pelo índice de cada coluna. Começa em 0, depois 1 e por fim tem valor 2.

Dentro dele, printamos na tela cada elemento: matriz[lin][col]

Quando acaba esse FOR aninhado, é porque uma linha já foi impressa. Então, damos uma quebra de linha <br />

Agora de volta no laço FOR de cima. Agora a variável lin recebe o valor 1, então vai printar a segunda linha...de novo o FOR aninhado, que vai de coluna em coluna e exibe o respectivo elemento.