Laços de arrays em

Sobre Laços de arrays

Ao trabalhar com arrays, às vezes você quer executar um código para cada valor do array. Isso se chama iterar sobre o array, ou percorrê-lo em um laço.

Aqui vamos ver o caso em que você não quer modificar o array no processo. Para transformar arrays, veja o conceito Transformação de arrays.

O laço for

A forma mais básica e geralmente muito eficiente de iterar sobre um array é usar um laço for, veja o conceito Laços for.

const numbers = [6.0221515, 10, 23];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}
// => 6.0221515
// => 10
// => 23

O laço for...of

Quando você quer trabalhar com o valor diretamente em cada iteração e não precisa do índice de jeito nenhum, pode usar um laço for...of.

O for...of funciona como o laço for básico mostrado acima, mas em vez de você ter que lidar com o índice como uma variável do laço, o valor já vem direto para você.

const numbers = [6.0221515, 10, 23];

// Because re-assigning number inside the loop will be very
// confusing, disallowing that via const is preferable.
for (const number of numbers) {
  console.log(number);
}
// => 6.0221515
// => 10
// => 23

Assim como nos laços for comuns, você pode usar continue para interromper a iteração atual e break para encerrar a execução do laço por completo.

O JavaScript também tem um laço for...in para iterar sobre as chaves de um objeto. É importante notar que for...of e for...in não são intercambiáveis; veja a documentação da MDN para mais detalhes.

O método forEach

Todo array tem um método forEach que também pode ser usado para percorrer os elementos do array em um laço.

O forEach aceita um callback como parâmetro. A função de callback é chamada uma vez para cada elemento do array.

const numbers = [6.0221515, 10, 23];

numbers.forEach((number) => console.log(number));
// => 6.0221515
// => 10
// => 23

No exemplo acima, o callback usa apenas o elemento atual como parâmetro. Se precisar, o callback pode usar até três parâmetros.

• o valor da iteração atual
• o índice da iteração atual
• o array inteiro

const numbers = [6.0221515, 10, 23];

function callback(number, index, fullArray) {
  console.log(number, index, fullArray);
}

numbers.forEach(callback);
// => 6.0221515 0 [ 6.0221515, 10, 23 ]
// => 10 1 [ 6.0221515, 10, 23 ]
// => 23 2 [ 6.0221515, 10, 23 ]

Além do callback, o forEach aceita o contexto this a ser usado na iteração como um segundo parâmetro opcional. Você vê um exemplo na seção "Using thisArg" na MDN.

Há algumas coisas que você deve ter em mente ao trabalhar com o forEach.

• Não há como interromper a iteração depois que o laço forEach começou. As instruções break e continue não existem nesse contexto.
• O forEach se comporta de forma estranha se você modificar o array depois de iniciar o laço. Elementos que você adiciona ao final são ignorados, remover elementos pode fazer com que outros sejam pulados, etc. Para evitar esse tipo de problema, nunca modifique o array original dentro do callback.
• O valor de retorno do próprio método forEach é undefined. Por isso, você não pode encadear outros métodos de array no final.
• Se você precisa otimizar seu código para desempenho, considere usar for ou for...of no lugar, já que os dois são cerca de três vezes mais rápidos.