A iteração de arrays é um conceito fundamental em JavaScript que permite aos desenvolvedores percorrer e manipular elementos dentro de um array. O JavaScript oferece diversos métodos para iterar sobre arrays, desde loops tradicionais (while, do...while, for, for...in, for...of) até métodos modernos de array (forEach, map, filter, reduce, reduceRight). Cada método é adequado para diferentes tarefas, como filtrar, transformar ou reduzir dados. Métodos avançados, como flatMap, Array.from, keys, entries e o operador spread, oferecem flexibilidade e funcionalidades adicionais. Dominar essas técnicas permite que desenvolvedores escrevam código conciso, eficiente e expressivo para lidar com arrays, algo essencial para criar aplicações JavaScript robustas. Entender esses métodos também garante compatibilidade com navegadores modernos, tornando-os práticos para o desenvolvimento web contemporâneo.
Principais conclusões: O JavaScript oferece vários métodos para iteração de arrays, incluindo loops tradicionais (while, do...while, for, for...in, for...of) e métodos modernos de array (forEach, map, filter, reduce, reduceRight). Cada método tem recursos próprios adequados para diferentes casos de uso, desde iterações simples até transformações complexas. Dominar essas técnicas permite que desenvolvedores escrevam código eficiente e expressivo para manipular arrays, algo essencial para criar aplicações JavaScript avançadas. A maioria dos métodos é compatível com navegadores modernos, garantindo ampla compatibilidade.
Escreva código mesmo sendo iniciante com o AI Assistent da Latenode
O que são loops em JavaScript?
Loops em JavaScript são estruturas de controle que permitem aos desenvolvedores executar repetidamente um bloco de código até que uma condição específica seja atendida. Eles oferecem uma forma de automatizar tarefas repetitivas e processar arrays ou coleções de dados com eficiência. O JavaScript oferece diversos tipos de loops, incluindo while, do...while, for, for...in e for...of, cada um com sua própria sintaxe e casos de uso.
Como percorrer um array com um loop while em JavaScript
O loop while executa um bloco de código enquanto uma condição especificada for avaliada como verdadeira. É um loop versátil que pode ser usado para iterar sobre arrays gerenciando manualmente a variável de índice. Veja um exemplo de como usar um loop while para iterar sobre um array:
const numbers = [1, 2, 3, 4, 5];
let i = 0;
while (i < numbers.length) {
console.log(numbers[i]);
i++;
}
Neste exemplo, o loop while continua sendo executado enquanto o índice i for menor que o comprimento do array numbers. O loop imprime cada elemento no console e incrementa a variável de índice.
Como percorrer um array com um loop do...while em JavaScript
O loop do...while é semelhante ao loop while, mas garante que o bloco de código seja executado pelo menos uma vez antes de verificar a condição. Veja um exemplo de como usar um loop do...while com um array em JavaScript:
const fruits = ['apple', 'banana', 'orange'];
let i = 0;
do {
console.log(fruits[i]);
i++;
} while (i < fruits.length);
Nesse caso, o loop imprime cada fruta no console e incrementa a variável de índice. O loop continua até que a condição i < fruits.length seja avaliada como falsa.
Como percorrer um array com um loop for em JavaScript
O loop for é uma estrutura de loop compacta e muito usada em JavaScript. Ele combina as expressões de inicialização, condição e incremento/decremento em uma única linha. Veja um exemplo de como usar um loop for para iterar sobre um array:
const colors = ['red', 'green', 'blue'];
for (let i = 0; i < colors.length; i++) {
console.log(colors[i]);
}
O loop for inicializa a variável de índice i com 0, verifica a condição i < colors.length e incrementa i após cada iteração. O loop imprime cada cor no console.
Como percorrer um array com um loop for...in em JavaScript
O loop for...in é usado para iterar sobre as propriedades de um objeto. Quando usado com arrays, ele percorre os índices do array. Veja um exemplo:
const persons = ['Alice', 'Bob', 'Charlie'];
for (let index in persons) {
console.log(index + ': ' + persons[index]);
}
Neste exemplo, o loop for...in percorre os índices do array persons. Ele imprime cada índice e seu valor correspondente no console.
Como percorrer um array com um loop for...of em JavaScript
O loop for...of, introduzido no ECMAScript 2015 (ES6), oferece uma forma mais concisa e legível de iterar sobre objetos iteráveis, incluindo arrays. Ele acessa diretamente os valores do array sem precisar de uma variável de índice. Veja um exemplo:
JavaScript
const numbers = [1, 2, 3, 4, 5];
for (let number of numbers) {
console.log(number);
}
Nesse caso, o loop for...of percorre cada elemento do array numbers e o atribui à variável number. O loop imprime cada número no console.
Como percorrer um array com um loop forEach em JavaScript
O método forEach() é um método integrado de array que executa uma função fornecida uma vez para cada elemento do array. Ele oferece uma abordagem mais expressiva e funcional para a iteração de arrays. Veja um exemplo:
const fruits = ['apple', 'banana', 'orange'];
fruits.forEach((fruit) => {
console.log(fruit);
});
Neste exemplo, o método forEach() é chamado no array fruits. Ele recebe uma função de seta como argumento, que recebe cada fruta como parâmetro e a imprime no console.
Outros métodos de iteração de arrays
O JavaScript oferece vários outros métodos de iteração de arrays que proporcionam recursos avançados para manipular e transformar arrays. Esses métodos incluem:
- map(): Cria um novo array chamando uma função fornecida para cada elemento do array.
- filter(): Cria um novo array com todos os elementos que passam no teste implementado pela função fornecida.
- reduce(): Executa uma função redutora em cada elemento do array, resultando em um único valor de saída.
- every(): Testa se todos os elementos do array passam no teste implementado pela função fornecida.
- some(): Testa se pelo menos um elemento do array passa no teste implementado pela função fornecida.
Vamos explorar esses métodos em mais detalhes nas seções a seguir.
forEach() de arrays em JavaScript
O método forEach() executa uma função fornecida uma vez para cada elemento do array. Ele não retorna um novo array, mas permite que você execute uma ação em cada elemento. Veja alguns exemplos:
Exemplo 1
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number) => {
console.log(number);
});
Neste exemplo, o método forEach() é usado para imprimir cada número do array numbers no console.
Exemplo 2
const fruits = ['apple', 'banana', 'orange'];
const upperCaseFruits = [];
fruits.forEach((fruit) => {
upperCaseFruits.push(fruit.toUpperCase());
});
console.log(upperCaseFruits);
Neste exemplo, o método forEach() é usado para converter cada fruta do array fruits em maiúsculas e inseri-la em um novo array upperCaseFruits.
map() de arrays em JavaScript
O método map() cria um novo array chamando uma função fornecida para cada elemento do array. Ele retorna um novo array com os resultados da chamada da função para cada elemento. Veja alguns exemplos:
Exemplo 1
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map((number) => {
return number ** 2;
});
console.log(squaredNumbers);
Neste exemplo, o método map() é usado para criar um novo array squaredNumbers elevando ao quadrado cada número do array numbers.
Exemplo 2
const persons = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
const names = persons.map((person) => {
return person.name;
});
console.log(names);
Neste exemplo, o método map() é usado para extrair a propriedade name de cada objeto no array persons e criar um novo array names contendo apenas os nomes.
filter() de arrays em JavaScript
O método filter() cria um novo array com todos os elementos que passam no teste implementado pela função fornecida. Ele retorna um novo array contendo os elementos que atendem à condição. Veja alguns exemplos:
Exemplo 1
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((number) => {
return number % 2 === 0;
});
console.log(evenNumbers);
Neste exemplo, o método filter() é usado para criar um novo array evenNumbers filtrando o array numbers para incluir apenas números pares.
Exemplo 2
const persons = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
const adultPersons = persons.filter((person) => {
return person.age >= 18;
});
console.log(adultPersons);
Neste exemplo, o método filter() é usado para criar um novo array adultPersons filtrando o array persons para incluir apenas pessoas com 18 anos ou mais.
reduce() de arrays em JavaScript
O método reduce() executa uma função redutora em cada elemento do array, resultando em um único valor de saída. Ele recebe um acumulador e o elemento atual como argumentos e retorna o acumulador para a próxima iteração. Veja alguns exemplos:
Exemplo 1
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
console.log(sum);
Neste exemplo, o método reduce() é usado para calcular a soma de todos os números no array numbers. O valor inicial do acumulador é definido como 0.
Exemplo 2
const words = ['Hello', 'World', 'JavaScript'];
const sentence = words.reduce((accumulator, currentValue) => {
return accumulator + ' ' + currentValue;
});
console.log(sentence);
Neste exemplo, o método reduce() é usado para concatenar todas as palavras do array words em uma única frase. O acumulador é inicializado com uma string vazia.
Exemplo 3
const persons = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
const totalAge = persons.reduce((accumulator, person) => {
return accumulator + person.age;
}, 0);
console.log(totalAge);
Neste exemplo, o método reduce() é usado para calcular a idade total de todas as pessoas no array persons. O acumulador é inicializado com 0.
reduceRight() de arrays em JavaScript
O método reduceRight() é semelhante ao método reduce(), mas executa a função redutora da direita para a esquerda, ou seja, do último elemento para o primeiro. Veja alguns exemplos:
Exemplo 1
const numbers = [1, 2, 3, 4, 5];
const reversedSum = numbers.reduceRight((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
console.log(reversedSum);
Neste exemplo, o método reduceRight() é usado para calcular a soma de todos os números no array numbers, começando pelo último elemento e seguindo em direção ao primeiro.
Exemplo 2
const words = ['Hello', 'World', 'JavaScript'];
const reversedSentence = words.reduceRight((accumulator, currentValue) => {
return accumulator + ' ' + currentValue;
});
console.log(reversedSentence);
Neste exemplo, o método reduceRight() é usado para concatenar todas as palavras do array words em uma única frase, começando pela última palavra e seguindo em direção à primeira.
every() de arrays em JavaScript
O método every() testa se todos os elementos do array passam no teste implementado pela função fornecida. Ele retorna true se a função retornar true para todos os elementos e false caso contrário. Veja alguns exemplos:
Exemplo 1
const numbers = [2, 4, 6, 8, 10];
const allEven = numbers.every((number) => {
return number % 2 === 0;
});
console.log(allEven);
Neste exemplo, o método every() é usado para verificar se todos os números do array numbers são pares. Ele retorna true, pois todos os números atendem à condição.
Exemplo 2
const persons = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
const allAdults = persons.every((person) => {
return person.age >= 18;
});
console.log(allAdults);
Neste exemplo, o método every() é usado para verificar se todas as pessoas do array persons são adultas, ou seja, têm idade maior ou igual a 18 anos. Ele retorna true, pois todas as pessoas atendem à condição.
some() de arrays em JavaScript
O método some() testa se pelo menos um elemento do array passa no teste implementado pela função fornecida. Ele retorna true se a função retornar true para pelo menos um elemento e false caso contrário. Veja um exemplo:
Exemplo
const numbers = [1, 2, 3, 4, 5];
const hasEvenNumber = numbers.some((number) => {
return number % 2 === 0;
});
console.log(hasEvenNumber);
Neste exemplo, o método some() é usado para verificar se há pelo menos um número par no array numbers. Ele retorna true, pois o array contém números pares.
Métodos avançados de iteração de arrays
O JavaScript oferece métodos adicionais de iteração de arrays que proporcionam funcionalidades mais avançadas. Esses métodos incluem:
- flatMap(): Cria um novo array aplicando uma função a cada elemento e, depois, achatando o resultado.
- from(): Cria um novo array a partir de um objeto semelhante a um array ou iterável.
- keys(): Retorna um novo objeto Array Iterator que contém as chaves para cada índice do array.
- entries(): Retorna um novo objeto Array Iterator que contém pares de chave-valor para cada índice do array.
- with(): Retorna um novo array com um elemento especificado substituído por um novo elemento. (Introduzido no ES2023)
Vamos explorar esses métodos em mais detalhes.
flatMap() de arrays em JavaScript
O método flatMap() primeiro mapeia cada elemento de um array usando uma função de mapeamento e, em seguida, achata o resultado em um novo array. Ele combina as funcionalidades de map() e flat() em um único método. Veja um exemplo:
Exemplo
const numbers = [1, 2, 3, 4, 5];
const mappedAndFlattened = numbers.flatMap((number) => {
return [number, number * 2];
});
console.log(mappedAndFlattened);
Neste exemplo, o método flatMap() é usado para mapear cada número do array numbers para um array que contém o número e seu dobro e, em seguida, achatar os arrays resultantes em um único array.
Compatibilidade com navegadores
O método flatMap() é compatível com navegadores modernos, incluindo Chrome 69+, Edge 79+, Firefox 62+, Safari 12+ e Opera 56+.
from() de arrays em JavaScript
O método Array.from() cria um novo array a partir de um objeto semelhante a um array ou iterável. Ele permite converter objetos que têm uma propriedade length e elementos indexados em um array. Veja um exemplo:
Exemplo
Exemplo de array em JavaScript:
const arrayLike = {
0: 'a',
1: 'b',
2: 'c',
length: 3
};
const array = Array.from(arrayLike);
console.log(array);
Neste exemplo, o método Array.from() é usado para converter um objeto semelhante a um array em um array real.
Compatibilidade com navegadores
O método Array.from() é compatível com navegadores modernos, incluindo Chrome 51+, Edge 15+, Firefox 54+, Safari 10+ e Opera 38+. Ele não é compatível com o Internet Explorer.
keys() de arrays em JavaScript
O método keys() retorna um novo objeto Array Iterator que contém as chaves de cada índice do array. Ele permite iterar sobre os índices do array. Veja um exemplo:
Exemplo
const fruits = ['apple', 'banana', 'orange'];
const iterator = fruits.keys();
for (const key of iterator) {
console.log(key);
}
Neste exemplo, o método keys() é usado para obter um iterador que contém as chaves, ou índices, do array fruits. Em seguida, o loop for...of é usado para percorrer e imprimir as chaves.
Compatibilidade com navegadores
O método keys() é compatível com navegadores modernos, incluindo Chrome 51+, Edge 15+, Firefox 54+, Safari 10+ e Opera 38+. Ele não é compatível com o Internet Explorer.
entries() de arrays em JavaScript
O método entries() retorna um novo objeto Array Iterator que contém pares de chave-valor para cada índice do array. Cada entrada é um array no formato [índice, elemento]. Veja um exemplo:
Exemplo
Exemplo de array em JavaScript:
const fruits = ['apple ', 'banana', 'orange']; const iterator = fruits.entries();
for (const [index, element] of iterator) { console.log(${index}: ${element}); }
Neste exemplo, o método entries() é usado para obter um iterador que contém pares de chave-valor para cada índice do array fruits. Em seguida, o loop for...of é usado para desestruturar cada entrada nas variáveis index e element e imprimi-las.
Método with() de arrays em JavaScript
O método with() é uma nova adição introduzida no ECMAScript 2023 (ES2023). Ele permite criar um novo array com um elemento especificado substituído por um novo elemento. Ele oferece uma maneira de atualizar um elemento em um array sem modificar o array original. Veja um exemplo:
Exemplo
const numbers = [1, 2, 3, 4, 5];
const updatedNumbers = numbers.with(2, 10);
console.log(numbers);
console.log(updatedNumbers);
Neste exemplo, o método with() é usado para criar um novo array updatedNumbers em que o elemento no índice 2 é substituído pelo valor 10. O array numbers original permanece inalterado.
Spread (...) de arrays em JavaScript
O operador spread (...) permite expandir um array em elementos individuais. Ele pode ser usado para concatenar arrays, passar arrays como argumentos para funções ou criar novos arrays com elementos existentes. Veja um exemplo:
Exemplo
const fruits = ['apple', 'banana'];
const moreFruits = ['orange', 'grape'];
const allFruits = [...fruits, ...moreFruits];
console.log(allFruits);
Neste exemplo, o operador spread é usado para concatenar os arrays fruits e moreFruits em um novo array allFruits.
Compatibilidade com navegadores
O operador spread é compatível com navegadores modernos, incluindo Chrome 51+, Edge 15+, Firefox 54+, Safari 10+ e Opera 38+. Ele não é compatível com o Internet Explorer.
Conclusão
O JavaScript oferece uma ampla variedade de métodos de iteração de arrays que permitem aos desenvolvedores percorrer arrays, manipular elementos e criar novos arrays com base em condições específicas. Neste artigo, exploramos vários métodos, incluindo loops tradicionais como while, do...while, for, for...in e for...of, além de métodos modernos de array como forEach(), map(), filter(), reduce(), every(), some() e outros.
Entender e aproveitar essas técnicas de iteração de arrays permite que desenvolvedores escrevam código conciso, eficiente e expressivo ao trabalhar com arrays em JavaScript. Ao dominar esses métodos, você pode realizar operações complexas em arrays com facilidade e criar aplicações JavaScript avançadas com loops de array.
Escreva código mesmo sendo iniciante com o AI Assistent da Latenode
