Gostou do nosso conteúdo? Te ajudou?
Nos ajude também! Faça um PIX, de qualquer valor:
programacao.progressiva@gmail.com

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.

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.

9 comentários:

  1. Estava atrás de um artigo simples e esclarecedor sobre matrizes e arrays. Achei este. Muito obrigada!

    ResponderExcluir
  2. declarar const matriz[1][2] = 10; no js não funciona não.

    ResponderExcluir
  3. Faltou abrir e fechar chaves {} no segundo for

    ResponderExcluir
    Respostas
    1. quando se treta de single line, não é necessário, pois não faz diferença alguma. abreços.

      Excluir
  4. Olá! Estou tentando entender matriz e me mandaram esse link. Tentei fazer os passos para entender e ao fazer os for's os numeros ficaram um abaixo do outro, só consegui deixar no formato de matriz fazendo lin <1 e chamando apenas matriz[coluna] + " ". Mas fiquei sem entender o porquê disso acontecer. Fiz em js

    ResponderExcluir
  5. Cadê o contexto? sem contexto e informação do que está acontecendo em cada linha fica impossível.

    ResponderExcluir