JavaScript iterando sobre um array

1. Use o for Loop para fazer um loop através de um array em JavaScript
2. Use o while Loop para fazer um loop através de um array em JavaScript
3. Use o do...while Loop para fazer um loop através de um array em JavaScript
4. Use o loop forEach para percorrer um array em JavaScript
5. Use for...of para fazer um loop em um array em JavaScript
6. Use for...in para fazer um loop através de um array em JavaScript
7. Use o método map para fazer um loop através de um array em JavaScript
8. Use o método reduce para fazer um loop em um array em JavaScript
9. Use o método filter para fazer um loop através de um array em JavaScript
10. Use some para fazer um loop em um array em JavaScript
11. Use every para fazer um loop em um array em JavaScript

Este tutorial explica como fazer um loop em um array em JavaScript. Podemos fazer isso usando métodos tradicionais em Vanilla JavaScript como loop for e loop while ou usando os métodos mais novos introduzidos pelo ES5, ES6 como forEach, for ... of, for ... in e muitos outros métodos, dependendo do nosso caso de uso e velocidade/eficiência do código.

Use o for Loop para fazer um loop através de um array em JavaScript

O loop for tradicional é semelhante ao loop for em outras linguagens como C++, Java, etc. Ele tem 3 partes:

1. A inicialização de variáveis/iteradores é executada antes da execução do loop for.
2. A condição a verificar todas as vezes antes de o loop ser executado.
3. A etapa a ser executada sempre após a execução do loop.

const arr = [1, 2, 3, 4, 5, 6];
var length = arr.length;
for (var i = 0; i < length; i++) {
  console.log(arr[i]);
}

Resultado:

1
2
3
4
5
6

Pegamos um iterador i e fazemos um loop sobre o array usando um loop for que incrementa i em 1 após cada iteração e o move para o elemento next.

Use o while Loop para fazer um loop através de um array em JavaScript

O loop while é muito simples porque tem uma condição que verifica após cada iteração e, a menos que essa condição seja satisfeita, ele continua em execução.

const arr = [1, 2, 3, 4, 5, 6];
var length = arr.length;
let i = 0;

while (i < length) {
  console.log(arr[i]);
  i++;
}

Como o loop for, pegamos o iterador i e o aumentamos até o comprimento do array para percorrer todos os elementos.

Use o do...while Loop para fazer um loop através de um array em JavaScript

O loop do...while é igual ao loop while, exceto pelo fato de que é executado pelo menos uma vez, mesmo se a condição do loop for falsa. Portanto, temos que ter cuidado ao escrever este loop.

const arr = [1, 2, 3, 4, 5, 6];
var length = arr.length;
var i = 0;

do {
  console.log(arr[i]);
  i++;
} while (i < length);

Use o loop forEach para percorrer um array em JavaScript

O ES5 introduziu forEach como uma nova maneira de iterar em arrays. forEach recebe uma função como argumento e a chama para cada elemento presente dentro do array.

const arr = [1, 2, 3, 4, 5, 6];
arr.forEach(item => console.log(item));

Aqui, escrevemos uma função de seta para imprimir o argumento passado para a função e atribuímos essa função a forEach para iterar sobre o array e imprimir esse elemento.

Use for...of para fazer um loop em um array em JavaScript

ES6 introduziu o conceito de objetos iteráveis ​​e forneceu for ... of que podem ser usados ​​para iterar objetos Array.

let arr = [1, 2, 3, 4, 5, 6];
for (const item of arr) {
  console.log(item);
}

Nós o usamos como um loop normal, mas iteramos facilmente uma ampla gama de objetos e não apenas arrays.

Use for...in para fazer um loop através de um array em JavaScript

Podemos iterar arrays usando for ... in, mas não é recomendado porque enumera as propriedades do objeto. Ele enumera até mesmo os métodos anexados a Array.prototype, além dos elementos do array.

var arr = [1, 2, 3, 4, 5, 6];

for (var i in arr) {
  console.log(arr[i]);
}

Use o método map para fazer um loop através de um array em JavaScript

O método map percorre a matriz, usa a função de retorno de chamada em cada elemento e retorna uma nova matriz, ou seja, leva um array de entrada e mapeia para uma nova matriz com cálculos realizados pela função de retorno de chamada.

arr = [1, 2, 3, 4, 5, 6];
const square = (x) => {
  return Math.pow(x, 2);
} mapped = arr.map(square);
console.log(arr);
console.log(mapped);

Aqui, iteramos sobre a matriz de entrada e formamos um array com quadrados de elementos dentro do array.

Use o método reduce para fazer um loop em um array em JavaScript

O método reduce percorre a matriz e chama a função reducer para armazenar o valor da computação do array por uma função de acumulador. Um acumulador é uma variável lembrada em todas as iterações para armazenar os resultados acumulados do loop em um array.

const arr = [1, 2, 3, 4];
const reducer = (accumulator, curr) => accumulator + curr;
console.log(arr.reduce(reducer));

Aqui, fazemos um loop no array e somamos todos os elementos dentro de um acumulador.

Use o método filter para fazer um loop através de um array em JavaScript

Os métodos filter percorrem o array e filtram os elementos que satisfazem uma determinada condição.

const fruits =
    ['apple', 'orange', 'pomegranete', 'banana', 'pear', 'blueberry'];
const result = fruits.filter(word => word.length > 6);
console.log(result);

Aqui, percorremos o array e verificamos se o comprimento do nome da fruta fornecido é maior que 6. Se sim, então o incluímos em nosso array de resultados, ou seja, filtramos os elementos necessários.

Use some para fazer um loop em um array em JavaScript

É usado para percorrer a matriz e verificar se uma determinada condição é satisfeita por pelo menos um dos elementos presentes dentro do array.

array = [1, 2, 3, 4, 5, 6];
const under_three = x => x < 3;
console.log(array.some(under_three));

Aqui usamos some para verificar se algum elemento presente dentro do array é menor que 3. Ele retorna um valor booleano true ou false.

Use every para fazer um loop em um array em JavaScript

É usado para percorrer o array e verificar se uma determinada condição é satisfeita por todos os elementos dentro de um array.

array = [1, 2, 3, 4, 5, 6];
const under_three = x => x < 3;
console.log(array.every(under_three));

Aqui usamos every para verificar se todos os elementos presentes no array são menores que 3 ou não. Ele retorna um valor booleano true ou false.