JavaScript para…de Loop

Resumo : neste tutorial, você aprenderá a usar for...ofinstruções JavaScript para iterar sobre objetos iteráveis.

Introdução ao loop JavaScript for…of

ES6 introduziu uma nova instrução for...ofque itera sobre um objeto iterável, como:

• Matriz integrada , String , Mapa , Conjunto ,…
• Objetos semelhantes a array, como argumentsouNodeList
• Objetos definidos pelo usuário que implementam o protocolo iterador .

O seguinte ilustra a sintaxe do for...of:

for (variable of iterable) {
   // ...
}Linguagem de código:  JavaScript  ( javascript )

variável

Em cada iteração, uma propriedade do objeto iterável é atribuída ao arquivo variable. Você pode usar var, let, ou constpara declarar o variable.

iterável

O iterável é um objeto cujas propriedades iteráveis ​​são iteradas.

JavaScript para exemplos de loop

Vamos dar uma olhada em alguns exemplos de uso do for...ofloop.

1) Iterando sobre arrays

O exemplo a seguir mostra como usar o for...ofpara iterar sobre elementos de um array:

let scores = [80, 90, 70];

for (let score of scores) {
    score = score + 5;
    console.log(score);
}Linguagem de código:  JavaScript  ( javascript )

Saída:

85
95
75

Neste exemplo, for...ofitera sobre cada elemento da scoresmatriz. Atribui o elemento do scoresarray à variável scoreem cada iteração.

Se você não alterar a variável dentro do loop, deverá usar a  constpalavra-chave em vez da letpalavra-chave da seguinte maneira:

let scores = [80, 90, 70];

for (const score of scores) {
    console.log(score);
}Linguagem de código:  JavaScript  ( javascript )

Saída:

80
90
70

Para acessar o índice dos elementos do array dentro do loop, você pode usar a for...ofinstrução com o entries()método do array.

O array.entries()método retorna um par [index, element]em cada iteração. Por exemplo:

let colors = ['Red', 'Green', 'Blue'];

for (const [index, color] of colors.entries()) {
    console.log(`${color} is at index ${index}`);
}Linguagem de código:  JavaScript  ( javascript )

Saída:

Red is at index 0
Green is at index 1
Blue is at index 2

Neste exemplo, usamos a desestruturação do array para atribuir o resultado do entries()método às variáveis index​​e colorem cada iteração:

const [index, color] of colors.entries()Linguagem de código:  CSS  ( css )

2) Desestruturação de objetos no local com for…of

Considere o seguinte exemplo:

const ratings = [
    {user: 'John',score: 3},
    {user: 'Jane',score: 4},
    {user: 'David',score: 5},
    {user: 'Peter',score: 2},
];

let sum = 0;
for (const {score} of ratings) {
    sum += score;
}

console.log(`Total scores: ${sum}`); // 14Linguagem de código:  JavaScript  ( javascript )

Saída:

Total scores: 14

Como funciona:

• O ratingsé uma matriz de objetos. Cada objeto possui duas propriedades usuário e pontuação.
• A for...ofiteração sobre a ratingsmatriz e calcula as pontuações totais de todos os objetos.
• A expressão const {score} of ratingsusa a destruição de objetos para atribuir a scorepropriedade do elemento iterado atual à scorevariável.

3) Iterando sobre strings

O exemplo a seguir usa o for...ofloop para iterar caracteres de uma string.

let str = 'abc';
for (let c of str) {
    console.log(c);
}Linguagem de código:  JavaScript  ( javascript )

Saída:

a
b
c

3) Iterando sobre objetos do mapa

O exemplo a seguir ilustra como usar a  for...of instrução para iterar sobre um Mapobjeto.

let colors = new Map();

colors.set('red', '#ff0000');
colors.set('green', '#00ff00');
colors.set('blue', '#0000ff');

for (let color of colors) {
    console.log(color);
}Linguagem de código:  JavaScript  ( javascript )

Saída:

[ 'red', '#ff0000' ]
[ 'green', '#00ff00' ]
[ 'blue', '#0000ff' ]Linguagem de código:  JSON/JSON com comentários  ( json )

4) Iterando sobre objetos definidos

O exemplo a seguir mostra como iterar sobre um setobjeto usando o for...ofloop:

let nums = new Set([1, 2, 3]);

for (let num of nums) {
    console.log(num);
}Linguagem de código:  JavaScript  ( javascript )

for...ofvs.for...in

O for...initera sobre todas as propriedades enumeráveis ​​de um objeto. Ele não itera sobre uma coleção como Array, Mapou Set.

Ao contrário do for...inloop, for...ofitera uma coleção, em vez de um objeto. Na verdade, for...of itera sobre elementos de qualquer coleção que possua a  [Symbol.iterator]propriedade.

O exemplo a seguir ilustra as diferenças entre for...ofefor...in

let scores = [10,20,30];
scores.message = 'Hi';

console.log("for...in:");
for (let score in scores) {
  console.log(score); 
}

console.log('for...of:');
for (let score of scores) {
  console.log(score);
}
Linguagem de código:  JavaScript  ( javascript )

Saída:

for...in:
0
1
2
message
for...of:
10
20
30Linguagem de código:  CSS  ( css )

Neste exemplo, a instrução for…in itera sobre as propriedades do array de pontuações:

for...in:
0
1
2
messageLinguagem de código:  CSS  ( css )

enquanto o for…of itera sobre o elemento de um array:

for...of:
10
20
30Linguagem de código:  CSS  ( css )

Resumo

• Use o for...ofloop para iterar sobre elementos de um objeto iterável.