0Pricing
Frontend Academy · Aula

Métodos de array: map filter reduce find

Transforme, filtre e agregue arrays com métodos de ordem superior em vez de loops manuais. Encadeie-os para criar pipelines de dados expressivos.

Métodos de array: map filter reduce find é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

Por que usar métodos de Array?

Os laços for imperativos funcionam, mas ocultam a intenção. Os métodos de ordem superior de Array declaram o que deseja, em vez de como iterar. Eles produzem código mais limpo, testável e componível, que pode ser lido como prosa.

Array.map() — Transformar todos os elementos

map() retorna uma nova matriz na qual cada elemento foi transformado pela função de retorno. A matriz original não é alterada. Use-o sempre que precisar converter uma matriz em outra.

const names = ['alice', 'bob', 'carol'];
const upper = names.map(name => name.toUpperCase());
// ['ALICE', 'BOB', 'CAROL']

const prices = [10, 20, 30];
const withTax = prices.map(p => p * 1.2);
// [12, 24, 36]

Array.filter() — Selecionar elementos correspondentes

filter() retorna uma nova matriz contendo apenas os elementos para os quais a função de retorno retorna um valor verdadeiro. A função de retorno é uma função predicado.

const users = [
  { name: 'Alice', age: 22 },
  { name: 'Bob',   age: 17 },
  { name: 'Carol', age: 30 },
];
const adults = users.filter(u => u.age >= 18);
// [{ name: 'Alice', age: 22 }, { name: 'Carol', age: 30 }]

Array.reduce() — Acumular um valor

reduce(callback, initialValue) acumula todos os elementos em um único valor. A função de retorno recebe o acumulador e o elemento atual. O valor inicial é o valor inicial do acumulador.

const prices = [10, 20, 30, 40];
const total = prices.reduce((sum, price) => sum + price, 0);
// 100

const tallied = ['a', 'b', 'a', 'c', 'b', 'a'].reduce((acc, letter) => {
  acc[letter] = (acc[letter] || 0) + 1;
  return acc;
}, {});
// { a: 3, b: 2, c: 1 }

Array.find() — Primeira correspondência

find() retorna o primeiro elemento que corresponde ao predicado, ou undefined se não houver nenhum. Use-o para localizar um item por ID ou pelo valor de uma propriedade.

const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const bob = users.find(u => u.id === 2);
// { id: 2, name: 'Bob' }

const missing = users.find(u => u.id === 99);
// undefined

Array.findIndex()

findIndex() funciona como find(), mas retorna o índice do elemento correspondente ou -1 se ele não for encontrado. É útil para descobrir onde atualizar um elemento em uma matriz.

const idx = users.findIndex(u => u.id === 2);
// 1

Array.some() e Array.every()

some() retorna true se pelo menos um elemento passar no teste. every() retorna true somente se todos os elementos passarem. Ambos interrompem a execução assim que há um resultado conclusivo.

const hasAdult = users.some(u => u.age >= 18);  // true if any adult
const allAdults = users.every(u => u.age >= 18); // true only if all adults

Array.flatMap() — Mapear e depois achatar

flatMap() mapeia cada elemento e depois achata o resultado em um nível. É equivalente a .map(...).flat(), mas mais eficiente.

const sentences = ['Hello world', 'Foo bar'];
const words = sentences.flatMap(s => s.split(' '));
// ['Hello', 'world', 'Foo', 'bar']

Encadeando métodos de Array

Os métodos retornam novas matrizes, portanto é possível encadeá-los. Leia as cadeias da esquerda para a direita: primeiro filtre, depois transforme e, por fim, agregue.

const result = products
  .filter(p => p.inStock)
  .map(p => ({ ...p, price: p.price * 0.9 })) // 10% discount
  .sort((a, b) => a.price - b.price)
  .slice(0, 5); // top 5 cheapest in-stock products

Array.at() e Array.includes()

at(-1) obtém o último elemento. includes(value) verifica se um valor existe. É muito mais limpo do que arr[arr.length - 1] e arr.indexOf(v) !== -1.

const arr = [1, 2, 3, 4, 5];
arr.at(-1);        // 5
arr.at(-2);        // 4
arr.includes(3);   // true
arr.includes(99);  // false

Imutabilidade: não altere diretamente

map, filter e reduce retornam novas matrizes. push, pop e splice alteram a matriz original. No estado do React, sempre crie novas matrizes (com spread ou map), em vez de alterar o estado diretamente.

// Bad in React:
state.items.push(newItem); // mutates original

// Good:
const newItems = [...state.items, newItem]; // new array

Verificação rápida

Qual método de matriz retorna uma nova matriz com os elementos para os quais a função de retorno retorna true?

Recapitulação: métodos de Array

map() transforma cada elemento. filter() seleciona os elementos correspondentes. reduce() acumula tudo em um único valor. find() retorna a primeira correspondência. some()/every() testam a presença de elementos. As cadeias desses métodos substituem laços aninhados por fluxos de dados legíveis e declarativos.

Perguntas Frequentes

A aula “Métodos de array: map filter reduce find” é grátis?

Sim — o texto completo de “Métodos de array: map filter reduce find” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Métodos de array: map filter reduce find”?

Transforme, filtre e agregue arrays com métodos de ordem superior em vez de loops manuais. Encadeie-os para criar pipelines de dados expressivos. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Métodos de array: map filter reduce find”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Métodos de array: map filter reduce find
  2. Desestruturação e spread de objetos
  3. Literais de template e encadeamento opcional
  4. Módulos: import e export
← Voltar para Frontend Academy