Respostas

Gabarito Comentado: Praticando com Arrays em JavaScript

Nível 1: Os Fundamentos

1. Minha Lista de Compras 🛒

Dica do Mestre 💡: Lembre-se que os arrays começam a contar do zero! O primeiro item está na posição [0], o segundo na [1], e assim por diante.

// Criamos o array (a "caixinha") usando const, pois a referência ao array não vai mudar.
const listaDeCompras = ["Leite", "Pão", "Ovos"];

// Para acessar o SEGUNDO item, usamos o índice 1.
console.log(listaDeCompras[1]); // Saída esperada: "Pão"

2. Trocando de Filme Favorito 🎬

Dica do Mestre 💡: Para modificar um valor, basta acessar a posição desejada com os colchetes [] e usar o sinal de atribuição = para dar um novo valor a ela.

// Usamos 'let' porque o conteúdo do array será modificado, o que torna o código mais claro.
let filmesFavoritos = ["Matrix", "O Senhor dos Anéis", "Interestelar"];

// Acessamos a posição 1 (o segundo filme) e atribuímos um novo valor a ela.
filmesFavoritos[1] = "De Volta para o Futuro";

// Exibimos o array completo para ver a alteração.
console.log(filmesFavoritos); // Saída esperada: ["Matrix", "De Volta para o Futuro", "Interestelar"]

3. Aumentando a Playlist 🎵

Dica do Mestre 💡: push() empurra para o final. unshift() "desloca" (shift) tudo para a direita e adiciona no começo.

let playlist = ["Bohemian Rhapsody", "Stairway to Heaven"];

// push() adiciona o item ao FIM do array.
playlist.push("Hotel California");

// unshift() adiciona o item ao COMEÇO do array.
playlist.unshift("Imagine");

// Exibe o array modificado para conferir o resultado.
console.log(playlist); // Saída esperada: ["Imagine", "Bohemian Rhapsody", "Stairway to Heaven", "Hotel California"]

4. Tarefas Concluídas ✅

Dica do Mestre 💡: pop() "estoura" o último item fora do array. shift() remove o primeiro e "desloca" todos os outros para a esquerda.

let tarefas = ["Lavar a louça", "Estudar JavaScript", "Passear com o cachorro", "Fazer compras"];

// pop() remove e retorna o último elemento ("Fazer compras").
tarefas.pop();

// shift() remove e retorna o primeiro elemento ("Lavar a louça").
tarefas.shift();

// O array agora contém apenas os itens do meio.
console.log(tarefas); // Saída esperada: ["Estudar JavaScript", "Passear com o cachorro"]

5. Contando as Cores 🎨

Dica do Mestre 💡: O loop for clássico é perfeito para isso! for (let i = 0; i < array.length; i++) é um padrão que você usará muito.

const cores = ["Azul", "Verde", "Vermelho", "Amarelo", "Roxo"];

// Exibimos o número de itens usando a propriedade .length
console.log(`O array tem ${cores.length} cores.`);

// Criamos um loop que começa no índice 0 e vai até o último índice (cores.length - 1).
for (let i = 0; i < cores.length; i++) {
  // A cada volta (iteração), acessamos a cor na posição 'i' e a exibimos.
  console.log(`Cor: ${cores[i]}`);
}

6. Removendo um Convidado da Festa 🎉

Dica do Mestre 💡: splice() é super poderoso. A sintaxe é splice(índiceInicial, quantidadeARemover). Você precisa do índice de "Carla".

let convidados = ["Ana", "Bruno", "Carla", "Daniel"];

// "Carla" está no índice 2 ("Ana" é 0, "Bruno" é 1).
// Queremos remover 1 elemento a partir dessa posição.
convidados.splice(2, 1);

// O array é modificado permanentemente.
console.log(convidados); // Saída esperada: ["Ana", "Bruno", "Daniel"]

7. Encontrando e Removendo Frutas 🍎

Dica do Mestre 💡: indexOf() retorna o índice de um item. Se não encontrar, retorna -1. É uma ótima prática verificar se o item existe antes de tentar removê-lo!

let frutas = ["Maçã", "Laranja", "Banana", "Uva"];

// Primeiro, encontramos o índice do item que queremos remover.
const indiceBanana = frutas.indexOf("Banana");

// Verificamos se o item foi encontrado (se o índice não é -1).
if (indiceBanana !== -1) {
  // Se foi encontrado, usamos splice para remover 1 item a partir desse índice.
  frutas.splice(indiceBanana, 1);
  console.log("Array atualizado:", frutas); // Saída esperada: ["Maçã", "Laranja", "Uva"]
} else {
  // Se não, informamos o usuário.
  console.log("Fruta não encontrada!");
}

Nível 2: Métodos Avançados e Boas Práticas

8. Dobrando os Números 🔢

Dica do Mestre 💡: map() cria um novo array. Ele passa por cada item e aplica uma função. O que essa função retorna é o que vai para o novo array.

const numeros = [1, 5, 10, 15, 20];

// map() recebe uma função (callback) que será executada para cada item do array.
// 'numero' é o parâmetro que representa cada item, um por vez.
// A seta (=>) indica o que a função deve retornar para cada item.
const numerosDobrados = numeros.map(numero => numero * 2);

console.log(numerosDobrados); // Saída esperada: [2, 10, 20, 30, 40]

9. Apenas Alunos Aprovados 🎓

Dica do Mestre 💡: filter() também cria um novo array. A função que você passa para ele deve retornar true (para manter o item) ou false (para descartar o item).

const notas = [8, 5, 9, 6.5, 7, 4, 10];

// filter() também recebe uma função de callback.
// Para cada 'nota', ele avalia a condição 'nota >= 7'.
// Se a condição for verdadeira, a nota é incluída no novo array.
const notasAprovadas = notas.filter(nota => nota >= 7);

console.log(notasAprovadas); // Saída esperada: [8, 9, 7, 10]

10. Somando o Carrinho de Compras 💰

Dica do Mestre 💡: reduce() é usado para "reduzir" um array a um único valor. Ele usa um "acumulador". A sintaxe é reduce((acumulador, valorAtual) => logica, valorInicialDoAcumulador).

const precos = [10.50, 5.00, 2.75, 8.00];

// 'total' é o acumulador. 'preco' é o valor atual.
// A cada iteração, somamos o 'preco' atual ao 'total'.
// O '0' no final é o valor inicial do acumulador 'total'.
const totalDaCompra = precos.reduce((total, preco) => total + preco, 0);

// toFixed(2) formata o número para ter 2 casas decimais, ideal para moeda.
console.log(`O total da compra é R$ ${totalDaCompra.toFixed(2)}`); // Saída esperada: O total da compra é R$ 26.25

11. Combo de Métodos: Pares e Quadrados ✨

Dica do Mestre 💡: Encadeamento de métodos! Você pode chamar um método logo após o outro. O resultado do primeiro (filter) se torna o array que o segundo (map) vai usar.

const numeros = [1, 2, 3, 4, 5, 6];

const quadradosDosPares = numeros
  // 1. Primeiro, filtramos para manter apenas os números pares.
  // O operador '%' (módulo) retorna o resto da divisão. Se for 0, o número é par.
  .filter(numero => numero % 2 === 0) // O resultado aqui é [2, 4, 6]
  
  // 2. Em seguida, pegamos esse resultado e aplicamos o map para elevar cada um ao quadrado.
  .map(numeroPar => numeroPar * numeroPar); // O resultado final é [4, 16, 36]

console.log(quadradosDosPares); // Saída esperada: [4, 16, 36]

12. Batalha Naval 🚢

Dica do Mestre 💡: Pense em coordenadas: array[linha][coluna]. Lembre-se que a contagem de linhas e colunas também começa em zero!

const tabuleiro = [
  ['🌊', '🚢', '🌊'], // Linha 0
  ['🌊', '🌊', '🚢'], // Linha 1
  ['🚢', '🌊', '🌊']  // Linha 2
];

// Para a segunda linha, usamos o índice 1.
// Para a terceira coluna, usamos o índice 2.
const celula = tabuleiro[1][2];

console.log(celula); // Saída esperada: "🚢"

13. A Cópia Segura 🛡️

Dica do Mestre 💡: O operador spread ... "espalha" os itens do array original dentro de um novo array, criando uma cópia independente (rasa).

const original = [1, 2, 3];

// Cópia por referência (apenas aponta para o mesmo local na memória).
const copiaMalFeita = original;

// Cópia real usando o spread operator (cria um novo array com os mesmos valores).
const copiaSegura = [...original];

// Modificamos a cópia "mal feita".
copiaMalFeita.push(4);

console.log('Original:', original);             // Saída esperada: [1, 2, 3, 4] -> Foi alterado! 😱
console.log('Cópia Mal Feita:', copiaMalFeita); // Saída esperada: [1, 2, 3, 4]
console.log('Cópia Segura:', copiaSegura);       // Saída esperada: [1, 2, 3] -> Permaneceu intacto! ✅

14. Filtrando Produtos em Estoque 📦

Dica do Mestre 💡: filter funciona perfeitamente com arrays de objetos! Na sua função de callback, você pode acessar as propriedades de cada objeto.

const produtos = [
  { nome: "Celular", preco: 1500, emEstoque: true },
  { nome: "Tablet", preco: 1200, emEstoque: false },
  { nome: "Notebook", preco: 3500, emEstoque: true }
];

// A função do filter recebe cada objeto 'produto' por vez.
// Acessamos a propriedade 'emEstoque' de cada produto.
// A condição 'produto.emEstoque' já retorna true ou false, exatamente o que o filter precisa.
const produtosEmEstoque = produtos.filter(produto => produto.emEstoque);

console.log(produtosEmEstoque);
// Saída esperada: [{ nome: "Celular", ... }, { nome: "Notebook", ... }]

Nível 3: Dominando os Arrays

15. Organizando o Placar 🏆

Dica do Mestre 💡: Por padrão, sort() trata tudo como texto! Para números, você precisa fornecer uma função de comparação: (a, b) => a - b para ordem crescente e (a, b) => b - a para decrescente.

const pontuacoes = [100, 25, 78, 150, 9];

// O método sort() modifica o array original.
// A função de comparação (a, b) define a ordem.
// Se a - b resulta em um número negativo, 'a' vem antes de 'b'.
// Se resulta em positivo, 'b' vem antes de 'a'.
// Se resulta em 0, a ordem é mantida.
// Isso efetivamente ordena os números em ordem crescente.
pontuacoes.sort((a, b) => a - b);

console.log(pontuacoes); // Saída esperada: [9, 25, 78, 100, 150]

16. Encontrando o Primeiro Vencedor 🥇

Dica do Mestre 💡: find() é como um filter, mas ele para e retorna o primeiro elemento que satisfaz a condição. Se não encontrar ninguém, retorna undefined.

const jogadores = [
  { nome: "Lucas", pontos: 90 },
  { nome: "Maria", pontos: 110 },
  { nome: "João", pontos: 120 }
];

// A função de callback testa cada 'jogador'.
// A condição é verificar se a propriedade 'pontos' é maior que 100.
const primeiroVencedor = jogadores.find(jogador => jogador.pontos > 100);

// find() para na "Maria" e a retorna, ignorando o "João".
console.log(primeiroVencedor); // Saída esperada: { nome: 'Maria', pontos: 110 }

17. O Tradutor de Frases ✍️

Dica do Mestre 💡: split(' ') quebra a string nos espaços. join('-') junta os itens do array usando um hífen como "cola".

const frase = "Eu amo programar em JavaScript";

// 1. Quebra a string em um array, usando o espaço como delimitador.
const arrayDePalavras = frase.split(' ');
// Resultado: ["Eu", "amo", "programar", "em", "JavaScript"]

// 2. Junta os elementos do array em uma nova string, usando '-' como separador.
const fraseComHifen = arrayDePalavras.join('-');

console.log(fraseComHifen); // Saída esperada: "Eu-amo-programar-em-JavaScript"

18. Achatando Listas de Tarefas 📚

Dica do Mestre 💡: flat() é o método perfeito para "desempacotar" arrays que estão dentro de outros arrays, criando um novo array de nível único.

const tarefasAninhadas = [["Estudar"], ["Ler", "Escrever"], ["Correr"]];

// Por padrão, flat() "achata" apenas um nível de profundidade,
// que é exatamente o que precisamos aqui.
const listaUnica = tarefasAninhadas.flat();

console.log(listaUnica); // Saída esperada: ["Estudar", "Ler", "Escrever", "Correr"]

19. A Foto vs. a Edição 🖼️✂️

Dica do Mestre 💡: Lembre-se da analogia: slice() é como tirar uma foto de uma parte do álbum (o original não se altera). splice() é como usar uma tesoura e cortar o álbum de verdade (a mudança é permanente). Fique atento aos parâmetros: slice(inicio, fim) vs. splice(inicio, quantidade_a_remover).

const albumDeViagem = ["praia.jpg", "cidade.png", "montanha.gif", "cachoeira.jpg", "floresta.png"];

console.log("--- Passo 1: Usando slice (Imutável) ---");

// slice(1, 4) extrai os itens DO índice 1 ATÉ o índice 4 (o 4 não é incluído).
// Ele cria um NOVO array com os itens selecionados.
const fotosParaPostar = albumDeViagem.slice(1, 4);

// Exibimos a seleção criada.
console.log("Fotos para postar:", fotosParaPostar);
// Saída esperada: ["cidade.png", "montanha.gif", "cachoeira.jpg"]

// Exibimos o álbum original para provar que ele NÃO FOI MODIFICADO.
console.log("Álbum Original (após slice):", albumDeViagem);
// Saída esperada: ["praia.jpg", "cidade.png", "montanha.gif", "cachoeira.jpg", "floresta.png"]


console.log("\n--- Passo 2: Usando splice (Mutável) ---");

// splice(1, 2) MODIFICA o array original.
// Ele remove 2 itens, começando DO índice 1.
const fotosRemovidas = albumDeViagem.splice(1, 2);

// Opcional: splice também retorna os itens que foram removidos.
console.log("Fotos que foram removidas:", fotosRemovidas);
// Saída esperada: ["cidade.png", "montanha.gif"]

// Exibimos o álbum original novamente para provar que ele FOI PERMANENTEMENTE ALTERADO.
console.log("Álbum Original (após splice):", albumDeViagem);
// Saída esperada: ["praia.jpg", "cachoeira.jpg", "floresta.png"]

20. Desafio Final do Ninja 🥷

Dica do Mestre 💡: Este é o ápice do encadeamento de métodos. filter primeiro, para reduzir a lista. map em seguida, para transformar os itens restantes.

const alunos = [
  { nome: "Ana", nota: 9 },
  { nome: "Bruno", nota: 6 },
  { nome: "Carla", nota: 8 },
  { nome: "Daniel", nota: 5 }
];

const mensagensAprovados = alunos
  // 1. Filtramos: o resultado é um array com os objetos de Ana e Carla.
  .filter(aluno => aluno.nota >= 7)
  
  // 2. Mapeamos: para cada objeto de aluno aprovado, retornamos a string formatada.
  // Usamos template literals (` `) para facilitar a inserção da variável ${aluno.nome}.
  .map(aluno => `Parabéns, ${aluno.nome}, você foi aprovado(a)!`);

console.log(mensagensAprovados);
// Saída esperada:
// [
//   "Parabéns, Ana, você foi aprovado(a)!",
//   "Parabéns, Carla, você foi aprovado(a)!"
// ]

PreviousAtividades Next7.6 - Estruturas de repetição

Last updated 1 month ago