O loop for…of do JavaScript

Neste tutorial, você aprenderá a usar o laço de repetição for…of para iterar objetos iteráveis no JavaScript.

English version: https://www.javascripttutorial.net/es6/javascript-for-of/

Introdução ao loop for…of

A versão ES6 introduziu o for...of, uma nova instrução que cria um loop de iteração sobre objetos iteráveis como:

• Objetos construídos com Array, String, Map, Set,…
• Objetos semelhantes a Arrays, como argumentos ou NodeList.
• Objetos definidos pelo usuário que implementam o protocolo iterador.

O seguinte código ilustra a sintaxe do for...of:

variable

Em cada iteração, uma propriedade do objeto iterável é atribuída à uma variável, que no exemplo acima é a variable. Você pode usar var, let ou const para declarar essa variável.

iterable

O iterable deve ser um objeto que possua propriedades iteráveis.

Exemplos de loop for…of

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

1) Iterando sobre arrays

O exemplo a seguir mostra como usar o for...of para iterar sobre os elementos de um array.

Resultado:

Neste exemplo, o for...of itera sobre cada elemento do array scores. O loop atribui à variável score o valor de cada elemento do array scores em cada iteração.

Se você não alterar a variável dentro do loop, deve usar const em vez de let:

Resultado:

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

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

Resultado:

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

Considere o seguinte exemplo:

Resultado:

Como esse código é interpretado?

• ratings é um array de objetos. Cada objeto possui duas propriedades, user e score.
• O loop for...of itera sobre o array ratings e soma os valores das propriedades score de todos os objetos.
• A expressão const{score} of ratings usa a desconstrução de objetos para atribuir o valor da propriedade score do elemento iterado atual à variável score.

3) Iterando sobre strings

O exemplo a seguir usa o loop for...of para iterar os caracteres de uma string.

Resultado:

4) Iterando sobre Objetos Maps

O exemplo a seguir ilustra como usar a instrução for...of para iterar em um objeto Map:

Resultado:

5) Iterando sobre objetos Set

O exemplo a seguir mostra como iterar em um objeto Set usando o loop for...of:

Resultado:

1
2
3

Diferenças entre "for…of" e " for…in"

O for...in itera sobre todas as propriedades enumeráveis de um objeto. Ele não itera em coleções como Array, Map ou Set.

Ao contrário do loop for...in o loop for...of itera sobre coleções, em vez de objetos.

Na verdade, o loop for...of itera sobre os elementos de qualquer coleção que tenha a propriedade [Symbol.iterator].

Neste tutorial você aprendeu coo usar o loop for...of da versão ES6 do JavaScript para iterar sobre coleções.

Mais tutoriais sobre a versão ES6 do JavaScript

Confira uma série de outros tutoriais sobre a versão ES6 JavaScript que eu escrevi, clicando no link abaixo:

Tutoriais JavaScript ES6

Veja o índice de todos os tutoriais JavaScript

Confira uma série de outros tutoriais JavaScript que eu escrevi, clicando no link abaixo:

Tutoriais JavaScript