Aula 06 — Listas de coisas | Curso de JavaScript gustavoweb

// entendendo

Como funciona

Um array é uma caixa com várias gavetas numeradas. Uma variável só, vários valores:

let amigos = ["Ana", "Bruno", "Caio"];

As gavetas começam no zero:

amigos[0]  // "Ana"
amigos[2]  // "Caio"
amigos.length  // 3 — quantos itens tem

Comandos que você vai usar toda hora:

lista.push("novo") — adiciona no final
lista.pop() — remove o último
lista.includes("Ana") — true/false: está na lista?

E pra percorrer tudo, o jeito curto:

amigos.forEach(function (amigo) {
  console.log(amigo);
});

// mão na massa

Agora é com você

Os campos abaixo estão vazios de propósito. Escreva, clique em Rodar e veja o resultado. Errou? Ótimo — leia o erro e tente de novo. (Atalho: Ctrl+Enter roda o código.)

Sua playlist

Crie um array playlist com 4 músicas que você gosta. Mostre a lista inteira, depois só a primeira música e depois quantas músicas tem.

a6e1.js

// crie a playlist


// mostre: a lista, a primeira música e o total

Preciso de uma dica

Primeira música é playlist[0] (zero!). Total é playlist.length.

Observação: Confusão clássica: a lista tem 4 itens (length = 4), mas a última gaveta é a de número 3. Sempre length - 1.

Entrando e saindo da lista

Comece com uma lista de 3 jogadores numa partida. Adicione um quarto jogador, depois remova o último que entrou e mostre a lista final.

a6e2.js

let jogadores = ["Ana", "Bruno", "Caio"];

// adicione um jogador


// remova o último


// mostre o resultado

Preciso de uma dica

jogadores.push("Duda"); adiciona · jogadores.pop(); remove o último.

Observação: Repare que push e pop mudam o array original — não criam uma cópia. Isso vai importar bastante no projeto final.

Percorrendo tudo

Use forEach pra mostrar cada item da lista de tarefas numerado, tipo 1 - Estudar JS.

a6e3.js

let tarefas = ["Estudar JS", "Treinar", "Responder o professor"];

// mostre cada tarefa numerada

Preciso de uma dica

O forEach pode receber dois parâmetros: o item e a posição. tarefas.forEach(function (tarefa, i) { ... }) — e a numeração bonita é i + 1.

Observação: Esse padrão — percorrer uma lista e montar uma linha pra cada item — é literalmente como funciona o feed de qualquer rede social. Guarde bem, é o coração do projeto final.

// desafio

sorteio da sala

Desafio: sorteio da sala

Crie um array com 6 nomes da sua sala e sorteie um deles pra apresentar o trabalho. Mostre o nome sorteado.

a6d1.js DESAFIO

let alunos = [];

// sorteie um aluno e mostre o resultado

Preciso de uma dica

Duas peças: Math.random() dá um número entre 0 e 1, e Math.floor() arredonda pra baixo. Junte com alunos.length: Math.floor(Math.random() * alunos.length).

Observação: Rode várias vezes e veja mudar. Sorteio é a base de qualquer jogo — dano crítico, carta aleatória, item raro: tudo é Math.random() por trás.