freeCodeCamp

2.6 KiB

Raw Blame History

title	localeTitle
for-of loop	loop for-of

for-of Loop

for-of loop pode ser usado para iterar sobre as coisas que não são arrays, mas são iteráveis como uma coleção DOM, string, set, argumentos ou mapa.

const fruits = ['Orange','Apple','Grapes','Banana']; 
 for (const fruit of fruits) 
 { 
    console.log(fruit); 
 }

O snippet acima vai nos devolver os itens na matriz acima.

for-of loop em saber índice

E se quisermos saber o índice de cada item também. Nesse caso, podemos iterar sobre fruits.entries (), que nos fornece o ArrayIterator.

for (const fruit of fruits.entries()) 
 { 
    console.log(fruit); 
 }

No trecho acima, a fruta será uma matriz com dois itens. O item 0 vai conter o índice e o primeiro item conterá o nome real da fruta. A saída seria como:

[0, "Orange"] 
 
 [1, "Apple"] 
 
 [2, "Grapes"] 
 
 [3, "Banana"]

Podemos ainda desestruturar frutas como abaixo:

for (const [index,fruit] of fruits.entries()) 
 { 
    console.log(index,fruit); 
 }

for-of loop em iterar sobre número desconhecido de argumentos

for-of loop é muito útil para iterar sobre o número desconhecido de argumentos para uma função.

Suponha que queremos adicionar os números que são passados para uma função e o número de argumentos não é fixo.

'arguments' é uma palavra-chave especial em javascript que nos fornece o tipo Array-ish (não array) e nos fornece todos os argumentos.

function addNumbers() 
 { 
    let sum = 0; 
    for (const num of arguments) 
       sum+=num; 
    return sum; 
 } 
 addNumbers(1, 2, 3, 4, 5); // 15

Aqui argumentos não é um array verdadeiro ainda podemos iterar sobre ele usando for-of loop.

for-of loop to iterate over string

Podemos usar loop for-to iterate over string para nos dar caractere por caractere da string.

const name = 'John Doe'; 
 for (const char of name) 
    console.log(char);

que resulta na seguinte saída: caracteres 'J', 'o', 'h', 'n', '', 'D', 'o', 'e'

loop for-to iterate sobre a coleção DOM

Coleções do DOM não são o tipo de array verdadeiro. Eles são geralmente NodeList para a maioria dos navegadores. Se criarmos um número de parágrafos e quisermos iterar sobre eles para designar algum evento em cada parágrafo, podemos fazer uso de loop for-of.

const paragraphs = document.querySelectorAll('p');

Aqui, os parágrafos são um NodeList que pode ser iterado usando o loop for-of.

for (const para of paragraphs) 
 { 
    console.log(para); 
    // We can add event listeners to each para here 
 }

2.6 KiB Raw Blame History Unescape Escape