Ciclos de arrays em

Sobre Ciclos de arrays

Quando trabalhas com arrays, às vezes queres executar código para cada valor do array. A isto chama-se iterar, ou percorrer o array num ciclo.

Aqui vamos ver o caso em que não queres modificar o array durante o processo. Para transformar arrays, vê antes Transformações de Arrays.

O ciclo for

A forma mais básica, e normalmente muito eficiente, de iterar sobre um array é usar um ciclo for; vê o conceito de ciclos for.

const numbers = [6.0221515, 10, 23];

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

O ciclo for...of

Quando queres trabalhar diretamente com o valor em cada iteração e não precisas do índice de todo, podes usar um ciclo for...of.

O for...of funciona como o ciclo for básico mostrado acima, mas em vez de teres de lidar com o índice como variável do ciclo, é-te fornecido diretamente o valor.

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

Tal como nos ciclos for normais, podes usar continue para parar a iteração atual e break para parar por completo a execução do ciclo.

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

O método forEach

Todos os arrays incluem um método forEach que também pode ser usado para percorrer os elementos do array.

O forEach aceita um callback como parâmetro. A função de callback é chamada uma vez por 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 for preciso, o callback pode usar até três parâmetros.

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

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, como segundo parâmetro opcional, o contexto this a usar na iteração. Podes ver um exemplo na secção «Using thisArg» da MDN.

Há algumas coisas que deves ter em conta quando trabalhas com o forEach.

• Não há forma de parar a iteração depois de o ciclo forEach começar. As instruções break e continue não existem neste contexto.
• O forEach comporta-se de forma estranha se modificares o array depois de o ciclo começar. Os elementos que acrescentares ao fim serão ignorados, remover elementos pode fazer com que outros sejam saltados, etc. Para evitares este tipo de problemas, nunca modifiques o array subjacente no callback.
• O valor devolvido do próprio método forEach é undefined. Por isso, não podes encadear outros métodos de array a seguir.
• Se precisares de otimizar o teu código em termos de desempenho, deves considerar usar antes for ou for...of, pois ambos são cerca de três vezes mais rápidos.