Stela JavaScript Aulas Aula 10
Como guardar as notas de 40 alunos?
Arrays: uma lista inteira de dados dentro de uma variável só.
Guardar, percorrer, buscar e transformar listas de dados com arrays.
Ler sobre arrays na bibliografia básica. Se der, dê uma olhada no módulo 5 do curso.
Resolução dos exercícios no laboratório, com commit no GitHub.
Uma variável para cada aluno? Não vai dar.
Começamos com a correção comentada da prova. Depois, um desafio: a turma tem 40 alunos e precisamos guardar a nota de cada um. Com o que vimos até agora, ficaria assim:
1let nota1 = 8.5;2let nota2 = 7;3let nota3 = 9.2;4// ... mais 37 variáveis56// e a média? somar as 40 na mão?7let media = (nota1 + nota2 + nota3 /* + ... */) / 40;Spoiler: tem jeito melhor. Uma variável só, guardando a lista inteira. Isso é um array.
Cinco peças para dominar arrays
Criando um array
Um array é uma lista entre colchetes, com os itens separados por vírgula. Cada item tem uma posição, o índice.
O primeiro item fica na posição 0, não na 1. A propriedade length diz quantos itens a lista tem.
Pegadinha clássica: se o array tem 4 itens, o último está no índice 3.
1const notas = [8.5, 7, 9.2, 6.8];23console.log(notas[0]); // 8.5 (o primeiro)4console.log(notas.length); // 456notas[1] = 7.5; // trocando a 2ª nota7console.log(notas); // [8.5, 7.5, 9.2, 6.8]Percorrendo a lista
Percorrer é visitar item por item. Você já conhece o for da aula de laços. Agora ganha dois atalhos:
for...of entrega cada item direto, sem índice. forEach() chama uma função para cada item.
1// o for de sempre, com índice2for (let i = 0; i < notas.length; i++) {3 console.log(i, notas[i]);4}56// for...of: item por item7for (const nota of notas) {8 console.log(nota);9}1011// forEach: uma função para cada item12notas.forEach((nota) => console.log(nota));Colocando e tirando itens
A lista não é fixa: dá para colocar e tirar itens no começo, no fim ou no meio.
| Método | O que faz |
|---|---|
push() | coloca no fim |
pop() | tira do fim |
unshift() | coloca no começo |
shift() | tira do começo |
splice() | tira ou coloca no meio |
1const alunos = ["Ana", "Bruno"];23alunos.push("Caio"); // ["Ana", "Bruno", "Caio"]4alunos.unshift("Duda"); // ["Duda", "Ana", "Bruno", "Caio"]5alunos.pop(); // tira "Caio"6alunos.shift(); // tira "Duda"78// splice(posição, quantos tirar, o que colocar)9alunos.splice(1, 0, "Bia"); // ["Ana", "Bia", "Bruno"]Buscando e ordenando
indexOf() diz em que posição está um item (ou -1, se não achar). includes() responde só sim ou não. find() devolve o primeiro item que passa num teste.
sort() coloca a lista em ordem.
Cuidado com o sort em números: sozinho, ele ordena como texto, e 10 fica antes de 9. Para números, passe a regra: (a, b) => a - b.
1alunos.indexOf("Bia"); // 12alunos.includes("Zé"); // false34const notas = [10, 9, 5.5, 7];5notas.find((n) => n < 6); // 5.567notas.sort(); // [10, 5.5, 7, 9] ← ordem de texto!8notas.sort((a, b) => a - b); // [5.5, 7, 9, 10] ← agora simTransformando: map, filter e reduce
Os três métodos mais usados no dia a dia. Nenhum deles muda a lista original: cada um devolve um resultado novo.
map() transforma cada item. filter() escolhe alguns itens. reduce() junta tudo num valor só.
1const notas = [8.5, 5, 9.2, 6];23// map: ponto extra para todo mundo4const comBonus = notas.map((n) => n + 1);5// [9.5, 6, 10.2, 7]67// filter: só quem passou8const aprovados = notas.filter((n) => n >= 6);9// [8.5, 9.2, 6]1011// reduce: soma tudo, depois tira a média12const soma = notas.reduce((total, n) => total + n, 0);13console.log(soma / notas.length); // 7.175Transforma cada item
Mesma quantidade de itens, cada um mudado.
Escolhe alguns
Pode sair com menos itens, nunca com mais.
Junta tudo num valor
Entra uma lista, sai um resultado só.
Lançar as notas da turma de uma vez
Ator: Professora
Objetivo: Guardar as notas de todos os alunos e ver a média da turma, a maior e a menor nota.
Fluxo principal
- A professora lança a nota de cada aluno, uma depois da outra.
- O sistema guarda todas as notas numa lista só.
- Mostra quantas notas foram lançadas.
- Mostra a média da turma, a maior e a menor nota.
E se...
- A professora lançou uma nota errada: o sistema troca a nota daquela posição da lista.
- Um aluno saiu da turma: o sistema tira a nota dele da lista.
Para pensar
- Que método de array resolve cada passo (push, length, reduce, Math.max)?
- Por que 40 variáveis (nota1, nota2...) não resolveriam esse caso?
Mão na massa: a lista da turma
Use a lista de alunos do seu Cadastro de Alunos (aula 7) ou crie uma nova. Vá marcando os passos: o que você marcar fica salvo neste navegador.
Em grupo: no Whiteboard da turma, cada grupo desenha um cartão mostrando o que
map, filter e reduce fazem com uma lista de exemplo.
Arrays fora da tela
Matemática
Média, maior e menor nota são estatística. O reduce faz a mesma soma que você faria na calculadora, só que para 40 ou 4 mil números.
Eletrônica
Um ESP32 lendo um sensor de temperatura a cada minuto guarda as leituras num array. No fim do dia, é só calcular a média.
Arte
Uma paleta de cores também é um array: ["#d6b25e", "#9fd0b7", "#12261d"]. Muitos sites geram paletas assim.
Terminou antes? Tem mais.
Descubra a maior e a menor nota da turma sem usar sort(). Primeiro tente com
reduce(). Depois pesquise o que faz Math.max(...notas) e compare.
Para estudar e praticar
Arrays e objetos no curso interativo
Explicação, editor de código ao vivo e quiz sobre o tema de hoje.
JavaScriptpraticar
MDN Web Docs
Referência completa de Array
Todos os métodos, com exemplos, em português. A documentação que os profissionais usam.
DocumentaçãoconsultaEstruturas de dados e algoritmos com JavaScript
GRONER, Loiane. Novatec, 2021. E-book na biblioteca. Os capítulos sobre arrays caem como uma luva.
LivroleituraCommit do aula10.js no seu repositório
Até o fim da aula. Na próxima, a gente usa esses arrays para montar objetos e JSON no Cadastro de Alunos.