Transforme listas em resultados úteis
Use map, filter e find em catálogos, painéis e resultados de busca.
- Escolher map, filter ou find para uma tarefa
- Ler funções de callback e os resultados de arrays
- Evitar mudar a lista original sem querer
As páginas reais lidam com listas: produtos numa loja, mensagens numa caixa de entrada e linhas num relatório. map transforma cada item num novo array. filter mantém todos os itens que correspondem num novo array. find devolve a primeira correspondência ou undefined. Cada um recebe uma função de callback que roda para um item.
1const products = [
2 { name: "Notebook", stock: 4 },
3 { name: "Pen", stock: 0 },
4 { name: "Marker", stock: 2 },
5];
6const available = products.filter((product) => product.stock > 0);
7console.log(available.map((product) => product.name).join(", "));
8console.log(products.length);Notebook, Marker 3
Experimente
Até 15 XPEscolha o método de array
Associe cada tarefa ao método que devolve o resultado de que você precisa.
“Obter o nome de todos os produtos”
“Manter todos os produtos em estoque”
“Obter o primeiro produto com um ID correspondente”
Estes métodos não alteram o array original. map e filter devolvem novos arrays. find pode devolver undefined, então verifique antes de ler as propriedades. reduce pode combinar os itens num único valor, mas um laço claro costuma ser mais fácil de ler para quem está começando.
Principais conclusões
map transforma; filter mantém todas as correspondências; find escolhe a primeira.
Um callback descreve o que acontece com cada item.
Verifique o resultado de find antes de usar as propriedades dele.
Quiz da aula
4 perguntas · aprovação com 3 acertos · até 50 XP
Ao passar, você conclui a aula e mantém sua sequência. As perguntas erradas voltarão em sessões de revisão.
Pratique: escreva código em JavaScript
Escreva o programa, execute-o com os casos de teste e use o retorno para desenvolver suas habilidades em JavaScript.
Monte uma lista de itens em estoque
A entrada é um JSON com um array de produtos com name e stock. Mantenha os produtos com estoque acima de zero, transforme-os nos nomes deles, ordene em ordem alfabética e imprima os nomes unidos por , . Se nenhum estiver disponível, imprima No items in stock.
- Alguns disponíveis
- Nada disponível
O JavaScript roda em um frame isolado do navegador, com limite de 1,5 segundo. A entrada fica disponível na variável de string input.
Dúvidas sobre esta lição
Travou em algum ponto? Pergunte. Descobriu algo? Compartilhe. Explicar também é uma ótima forma de aprender.
Carregando publicações…