capitulo_08_array_methods

Capítulo 08: Métodos de Array (Map e Filter) 🔴⚪

Neste capítulo, vamos aprender a usar métodos incríveis do JavaScript para transformar e filtrar listas de dados, com o tema Pokémon!

---

📖 Métodos Modernos de Array

Em vez de usar laços for tradicionais para tudo, o JavaScript moderno nos dá métodos como:

• filter(): Cria um novo array apenas com os itens que passam em um teste.
• map(): Cria um novo array aplicando uma função a cada item do array original.

---

📖 Exemplo Guiado: Filtrando e Evoluindo Pokémons

Vamos criar uma lista de Pokémons e usar filter para achar os de fogo, e map para aumentar o nível deles!

1. Crie o arquivo pokemon_methods.js na pasta src/:

const pokedex = [
    { nome: "Charmander", tipo: "Fogo", nivel: 10 },
    { nome: "Squirtle", tipo: "Agua", nivel: 12 },
    { nome: "Bulbasaur", tipo: "Planta", nivel: 10 },
    { nome: "Vulpix", tipo: "Fogo", nivel: 15 }
];
 
// 1. Filter: Apenas Pokémons de Fogo
const pokemonsFogo = pokedex.filter(p => p.tipo === "Fogo");
 
console.log("--- Pokemons de Fogo ---");
console.log(pokemonsFogo);
 
// 2. Map: Subir o nível de todos em +5
const pokemonsUpar = pokedex.map(p => {
    return {
        nome: p.nome,
        nivel: p.nivel + 5
    };
});
 
console.log("\n--- Pokemons Apos Treinamento (Nivel +5) ---");
console.log(pokemonsUpar);

🕹️ Como Executar e Testar no VS Code

1. Abra o terminal integrado.
2. Execute: node pokemon_methods.js

Resultado Esperado:

--- Pokemons de Fogo ---
[
  { nome: 'Charmander', tipo: 'Fogo', nivel: 10 },
  { nome: 'Vulpix', tipo: 'Fogo', nivel: 15 }
]
 
--- Pokemons Apos Treinamento (Nivel +5) ---
[
  { nome: 'Charmander', nivel: 15 },
  { nome: 'Squirtle', nivel: 17 },
  { nome: 'Bulbasaur', nivel: 15 },
  { nome: 'Vulpix', nivel: 20 }
]

---

📊 Ilustração Visual: Funcionamento do Filter e Map

Veja como os dados são processados:

graph TD
    A[Array Original] -->|Filter: tipo === Fogo| B[Novo Array Filtrado]
    A -->|Map: nivel + 5| C[Novo Array Transformado]

---

🛠️ Prática Obrigatória 1: Pokémons Fortes

Crie um programa chamado pokemons_fortes.js que use o método filter para listar apenas os Pokémons com nível maior que 11 da lista do exemplo guiado.

---

🔑 Gabarito de Código

Prática 1: pokemons_fortes.js

const pokedex = [
    { nome: "Charmander", tipo: "Fogo", nivel: 10 },
    { nome: "Squirtle", tipo: "Agua", nivel: 12 },
    { nome: "Bulbasaur", tipo: "Planta", nivel: 10 },
    { nome: "Vulpix", tipo: "Fogo", nivel: 15 }
];
 
const fortes = pokedex.filter(p => p.nivel > 11);
 
console.log("Pokemons com nivel maior que 11:");
console.log(fortes);

---

📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)

(Siga o padrão estabelecido no Guia)

---

← Capitulo Anterior | Proximo Capitulo →