Métodos de Iteração de Arrays em JavaScript

 

Este documento fornece uma visão geral abrangente dos principais métodos de iteração de #arrays em JavaScript, categorizados por sua funcionalidade. Ele abrange métodos de transformação, busca, filtragem, agregação, iteração simples, ordenação e manipulação, além de outros métodos úteis e modernos introduzidos no ES6+. Cada método é acompanhado de uma breve descrição e exemplos de uso, tornando-o um guia prático para #desenvolvedores JavaScript.

https://www.codesnippets.dev.br/post/metodos-de-iteracao-de-arrays-em-javascript

Métodos de Transformação (Criam novos arrays)

 

.map()

 

Transforma cada elemento do array e retorna um novo array com os elementos transformados.

 

[1, 2, 3].map(x => x * 2); // [2, 4, 6]

 

.flat() & .flatMap() #flat

 

.flat() achata arrays aninhados em um único array. .flatMap() combina o mapeamento de cada elemento com o flattening do resultado em um novo array.

 

[1, [2, 3]].flat(); // [1, 2, 3]
[1, 2, 3].flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]

 

Métodos de Busca

 

.find() #find

 

Retorna o primeiro elemento do array que satisfaz a condição especificada na função de callback. Se nenhum elemento for encontrado, retorna undefined.

 

[1, 2, 3].find(x => x > 1); // 2

 

.findIndex()

 

Retorna o índice do primeiro elemento do array que passa no teste implementado pela função de callback. Se nenhum elemento for encontrado, retorna -1.

 

['a', 'b', 'c'].findIndex(x => x === 'b'); // 1

 

.indexOf() & .lastIndexOf()

 

.indexOf() busca o índice da primeira ocorrência de um valor específico no array (usando igualdade estrita ===). .lastIndexOf() busca o índice da última ocorrência do valor. Se o valor não for encontrado, ambos retornam -1.

 

[1, 2, 3, 2].indexOf(2); // 1
[1, 2, 3, 2].lastIndexOf(2); // 3

 

Métodos de Filtragem

 

.filter() #filter

 

Retorna um novo array com todos os #elementos que passam no teste implementado pela função de callback.

 

[1, 2, 3].filter(x => x % 2 === 0); // [2]

 

Métodos de Agregação

 

.reduce() & .reduceRight()

 

.reduce() aplica uma função a um acumulador e a cada elemento do array (da esquerda para a direita) para reduzi-lo a um único valor. .reduceRight() faz o mesmo, mas da direita para a esquerda.

 

[1, 2, 3].reduce((acc, x) => acc + x, 0); // 6
[1, 2, 3].reduceRight((acc, x) => acc - x, 0); // -4 (0 - 3 - 2 - 1)

 

Métodos de Iteração Simples

 

.forEach() #foreach

 

Executa uma função fornecida uma vez para cada elemento do array. Não retorna um novo array.

 

[1, 2, 3].forEach(x => console.log(x));

 

.some() & .every()

 

.some() verifica se pelo menos um elemento do array passa no teste implementado pela função de callback. Retorna true se encontrar um #elemento que satisfaça a condição, caso contrário, retorna false. .every() verifica se todos os elementos do array passam no teste. Retorna true se todos os elementos satisfizerem a condição, caso contrário, retorna false.

 

[1, 2, 3].some(x => x > 2); // true
[1, 2, 3].every(x => x > 0); // true

 

Métodos de Ordenação e Manipulação

 

.sort() #sort

 

Ordena os elementos do array no local e retorna o array ordenado. Por padrão, a ordenação é feita como strings, então é importante fornecer uma função de comparação para ordenar números corretamente. Modifica o array original.

 

[3, 1, 2].sort(); // [1, 2, 3] (se a função de comparação for fornecida para ordenar números)
[3, 1, 2].sort((a, b) => a - b); // [1, 2, 3] (ordenação numérica)

 

.reverse() #reverse

 

Inverte a ordem dos elementos do array no local. Modifica o array original.

 

[1, 2, 3].reverse(); // [3, 2, 1]

 

Outros Métodos Úteis

 

.includes() #includes

 

Determina se um array contém um determinado valor, retornando true ou false conforme apropriado.

 

[1, 2, 3].includes(2); // true

 

.join() #join

 

Cria e retorna uma nova string concatenando todos os elementos do array, separados por um separador especificado.

 

['a', 'b'].join('-'); // "a-b"

 

.entries(), .keys(), .values()

 

Esses métodos retornam objetos iteradores que podem ser usados para percorrer os pares chave/valor, as chaves ou os valores do array, respectivamente.

 

const arr = ['a', 'b', 'c'];
for (const [index, element] of arr.entries()) {
  console.log(index, element);
}
// 0 "a"
// 1 "b"
// 2 "c"

 

Métodos Modernos (ES6+)

 

.from() (estático em Array)

 

Cria uma nova instância de Array a partir de um #objeto iterável ou similar a um array.

 

Array.from('abc'); // ['a', 'b', 'c']

 

.of() (estático em Array)

 

Cria uma nova instância de Array com um número variável de argumentos, independentemente do número ou do tipo dos argumentos.

 

Array.of(1, 2, 3); // [1, 2, 3]

 

Resumo Visual

 

| Categoria | Métodos |

| -------------- | ----------------------------- |

| Transformação | map, flat, flatMap |

| Busca | find, findIndex, indexOf, lastIndexOf |

| Filtragem | filter |

| Agregação | reduce, reduceRight |

| Iteração | forEach, some, every |

| Ordenação | sort, reverse |

| Utilitários | includes, join, entries, keys, values |

 

Esses métodos são ferramentas poderosas para manipulação eficiente de arrays em JavaScript. Dominar seu uso é fundamental para escrever código limpo, conciso e performático.