Arrays Multidimensionais (matrizes)

O que é?

É um array que guarda outros arrays. Em outras linguagens se chama matriz. Pense numa planilha:

                 coluna 0   coluna 1   coluna 2
                 (nome)     (idade)    (salário)
linha 0  ->   [  "João",    24,        1800  ]
linha 1  ->   [  "Maria",   30,        3000  ]
linha 2  ->   [  "Pedro",   28,        4100  ]

• Array simples: um colchete, carros[1].
• Array de arrays: dois colchetes, funcionarios[linha][coluna].
• Uma matriz 5x5 tem 5 linhas com 5 colunas cada: 25 valores.

Duas formas de criar

// Forma 1: cria cada array e depois junta todos num array só
const pessoa1 = ["João", 24, 1800];
const pessoa2 = ["Maria", 30, 3000];
const pessoa3 = ["Pedro", 28, 4100];

const funcionarios = [pessoa1, pessoa2, pessoa3];

// Forma 2: escreve os arrays direto dentro do array (mais usada)
const funcionarios = [
  ["João", 24, 1800],
  ["Maria", 30, 3000],
  ["Pedro", 28, 4100],
  ["Letícia", 31, 2800],
  ["Lara", 29, 3500],
];

As duas dão o mesmo resultado. Repare na vírgula depois de cada ] de dentro.

Ver como tabela: console.table

console.log mostra tudo numa linha; console.table mostra linhas e colunas com os índices. Este botão imita o console.table:

Código desta seção: js/matrizes.js, seções 1 e 2.

Acessar um valor: [linha][coluna]

console.log(funcionarios[0][2]); // 1800
// [0] escolhe a linha do João; [2] escolhe a coluna do salário

Teste: linha 0 e coluna 2 dá o salário do João. Linha 4 e coluna 0 dá o nome da Lara.

Código desta seção: js/matrizes.js, seção 3.

Percorrer tudo: for dentro de for

for (let i = 0; i < funcionarios.length; i++) {        // linhas
  for (let j = 0; j < funcionarios[i].length; j++) {   // colunas da linha i
    console.log(funcionarios[i][j]);
  }
}

• O for de fora anda pelas linhas (i).
• Para cada linha, o for de dentro roda inteiro pelas colunas (j = 0, 1, 2).
• É como ler um livro: linha por linha, e em cada linha, palavra por palavra.

Para um valor só, use console.log; o console.table é para listas. Código desta seção: js/matrizes.js, seção 4.

Array de objetos

Este exemplo junta os três tipos que já vimos: array simples, array de arrays e objeto. O novo é a lista de objetos:

const idades = [18, 20, 24, 30, 36];   // array simples

const notas = [                         // array de arrays
  [5, 10, 9, 4],
  [6, 5, 2, 10],
  [8, 6, 3, 3]
];

const pessoa = { nome: "Pedroka", telefone: "(55) 996077-4321", endereco: "ABC" }; // objeto

const pessoas = [                       // array de OBJETOS
  { nome: "Pedroka",     telefone: "(55) 99607-4321", endereco: "ABC" },
  { nome: "Maria",       telefone: "(61) 98765-4566", endereco: "DEF" },
  { nome: "José",        telefone: "(61) 98765-7777", endereco: "GHI" },
  { nome: "Antônio",     telefone: "(61) 98765-8888", endereco: "JKL" }
];

console.log(notas[2][2]);          // 3      (linha 2, coluna 2)
console.table(pessoas[2].nome);    // "José" (posição 2, propriedade nome)
console.table(pessoas[2]["nome"]); // "José" (mesma coisa com colchetes)

• Array de arrays: dois números, notas[linha][coluna]. Você precisa lembrar o que é cada coluna.
• Array de objetos: número + nome, pessoas[2].nome. Mais fácil de ler: o nome diz o que é o dado. É o formato mais usado no dia a dia.
• .nome e ["nome"] fazem o mesmo. Os colchetes são obrigatórios quando o nome está numa variável (como no for...in).
• console.table com um valor só ("José") não vira tabela. Para ver a tabela: console.table(pessoas).

Código desta seção: js/matrizes.js, seção 5.

Desafio: incluir e excluir

Para praticar: push, pop, shift, unshift e splice também funcionam no array de arrays. Tente:

1. Incluir um funcionário novo no fim da lista.
2. Incluir um funcionário no começo.
3. Excluir a Maria (linha 1).
4. Trocar o salário do Pedro para 4500.

Escreva sua resposta em js/matrizes.js, seção 6 (está em branco). Dica: cada item do array externo é um array inteiro, então o que você adiciona também é um array: ["Nome", idade, salário].

// sua resposta aqui

Quando quiser a solução, é só pedir.