JavaScript: Arrays Avançados em JavaScript

Última atualização: 2026-10-13

Na lição anterior, você aprendeu operações básicas com arrays. Agora vamos subir de nível com "movimentos de poder" dos arrays — métodos de ordem superior. Estes permitem fazer mais com menos código e são habilidades essenciais no desenvolvimento JavaScript moderno.

Métodos de array relacionados：findIndex forEach filter reduce every find push some sort map

1. map — Transformar Cada Elemento

map executa uma função em cada elemento e retorna um novo array — o original permanece inalterado. Pense nele como uma linha de montagem: cada elemento entra, é transformado e sai como parte de um novo produto.

<script>
let prices = [10, 20, 30];
let doubled = prices.map(p => p * 2);   // [20, 40, 60]
</script>

O callback recebe três argumentos: (elemento, índice, arrayOriginal). Na maioria das vezes você só precisa do primeiro.

filter mantém elementos que passam em um teste e retorna um novo array — o original não é tocado. Como um ponto de segurança: itens que atendem aos critérios passam; o resto é filtrado.

<script>
let scores = [45, 80, 92, 55, 78, 98];
let passed = scores.filter(s => s >= 60);  // [80, 92, 78, 98]
</script>

Elementos onde o callback retorna true são mantidos; aqueles que retornam false são descartados.

3. reduce — Acumular em Um Valor Só

reduce "comprime" um array em um único valor. O caso de uso mais comum é somar:

<script>
let nums = [1, 2, 3, 4, 5];
let sum = nums.reduce((acc, cur) => acc + cur, 0);  // 15
</script>

O que os parâmetros significam:

• acc (acumulador): o total parcial, carregado da iteração anterior
• cur (atual): o elemento atual
• O segundo argumento 0 é o valor inicial do acumulador

▶ Exemplo: Combinando map, filter e reduce

4. find e findIndex

• find — retorna o primeiro elemento que corresponde
• findIndex — retorna o índice da primeira correspondência

Se nada for encontrado, find retorna undefined e findIndex retorna -1.

<script>
let users = [
  { name: 'Alice', age: 20 },
  { name: 'Bob', age: 17 },
  { name: 'Charlie', age: 25 }
];

users.find(u => u.age > 22);       // { name: 'Charlie', age: 25 }
users.findIndex(u => u.age < 18);  // 1 (índice do Bob)
</script>

5. sort — Ordenar Elementos

sort organiza o array no local (modifica o original!). Por padrão, ordena como strings, o que engana muitos iniciantes:

<script>
let nums = [10, 1, 21, 2];
nums.sort();           // [1, 10, 2, 21]  ← Ordenação de string! "10" < "2"

// Correto: ordenação numérica requer uma função comparadora
nums.sort((a, b) => a - b);   // [1, 2, 10, 21]  ← Crescente
nums.sort((a, b) => b - a);   // [21, 10, 2, 1]  ← Decrescente
</script>

▶ Exemplo: Ordenando Notas de Alunos

6. some e every

• some — pelo menos um elemento passa no teste? (retorna um booleano)
• every — todos os elementos passam no teste? (retorna um booleano)

<script>
let scores = [60, 75, 82, 90];

scores.some(s => s >= 90);    // true  — alguém tirou 90+
scores.some(s => s === 100);  // false — ninguém tirou nota perfeita
scores.every(s => s >= 60);   // true  — todos passaram
</script>

7. Operador Spread (...)

O operador spread ... "desempacota" um array. É comumente usado para copiar e mesclar:

<script>
let a = [1, 2, 3];
let b = [...a];          // Cópia: [1, 2, 3] (novo array, não uma referência)
let c = [...a, 4, 5];    // Mesclagem: [1, 2, 3, 4, 5]
let d = [0, ...a, 4];    // Inserção: [0, 1, 2, 3, 4]

let x = [1, 2], y = [3, 4];
let z = [...x, ...y];    // [1, 2, 3, 4]
</script>

8. Desestruturação

Extraia valores de um array e atribua-os a variáveis por posição:

<script>
let [a, b, c] = [1, 2, 3];
// a = 1, b = 2, c = 3

let [first, ...rest] = [1, 2, 3, 4, 5];
// first = 1, rest = [2, 3, 4, 5]

let [nome, nota] = ['Alice', 95];
// nome = 'Alice', nota = 95
</script>

9. Encadeamento de Métodos

Métodos de ordem superior retornam novos arrays, então você pode encadeá-los um após o outro:

<script>
let result = students
  .filter(s => s.score >= 60)     // Primeiro, filtra alunos aprovados
  .map(s => s.name)               // Depois, extrai nomes
  .sort();                         // Por fim, ordena
</script>

▶ Exemplo: Encadeamento para Processar Dados

▶ Exemplo: Operador Spread e Desestruturação

Métodos de array relacionados：findIndex forEach filter reduce every find push some sort map

❓ Perguntas Frequentes

📖 Resumo

• map transforma cada elemento em um novo array, filter mantém elementos correspondentes, reduce acumula em um único valor
• find retorna o primeiro elemento correspondente, findIndex retorna o primeiro índice correspondente
• sort por padrão ordena como string — para números, sempre passe um comparador: (a, b) => a - b
• some verifica se algum elemento corresponde, every verifica se todos os elementos correspondem
• O operador spread ... copia e mescla arrays; desestruturação extrai elementos em variáveis
• Métodos de ordem superior retornam novos arrays e podem ser encadeados para código conciso e legível

📝 Exercícios

1. Dado o array [3, 8, 12, 5, 9, 17, 4], use filter para manter números maiores que 7, depois map para dobrá-los. Exiba o resultado.
2. Use reduce para contar a ocorrência de cada palavra em um array como ['maçã', 'banana', 'maçã', 'cereja', 'banana', 'maçã'] → { maçã: 3, banana: 2, cereja: 1 }.
3. Dado um array de alunos (com nome e nota), use encadeamento para: filtrar alunos aprovados → ordenar por nota decrescente → extrair nomes em um novo array. Exiba o resultado na página.

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós