Iteráveis JavaScript

Índice

Iteráveis são objetos iteráveis (como Arrays).

Iteráveis podem ser acessados com código simples e eficiente.

Iteráveis podem ser iterados com loops for..of

O loop For

A instrução JavaScript for..of faz um loop através dos elementos de um objeto iterável.

Sintaxe

for (variable of iterable) {
  // code block to be executed
}

Iterando

Iterar é fácil de entender.

Significa simplesmente fazer um loop em uma sequência de elementos.

Aqui estão alguns exemplos fáceis:

Iterando sobre uma String
Iterando sobre um array

Iterando sobre uma string

Você pode usar um loop for..of para iterar sobre os elementos de uma string:

Exemplo

const name = "W3Schools";

for (const x of name) {
  // code block to be executed
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>
<p>Iterate over a String:</p>

<p id="demo"></p>

<script>
// Create a String
const name = "W3Schools";

// List all Elements
let text = ""
for (const x of name) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

Iterando sobre um array

Você pode usar um loop for..of para iterar sobre os elementos de um Array:

Exemplo

const letters = ["a","b","c"];

for (const x of letters) {
  // code block to be executed
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>
<p>Iterate over an Array:</p>

<p id="demo"></p>

<script>
// Create aa Array
const letters = ["a","b","c"];

// List all Elements
let text = "";
for (const x of letters) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

Você pode aprender mais detalhes sobre Iterables no capítulo JS Object Iterables.

Iterando sobre um conjunto

Você pode usar um loop for..of para iterar sobre os elementos de um Set:

Exemplo

const letters = new Set(["a","b","c"]);

for (const x of letters) {
  // code block to be executed
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>
<p>Iterate over a Set:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set(["a","b","c"]);

// List all Elements
let text = "";
for (const x of letters) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

Conjuntos e Mapas serão abordados nos próximos capítulos.

Iterando em um mapa

Você pode usar um loop for..of para iterar sobre os elementos de um mapa:

Exemplo

const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

for (const x of fruits) {
  // code block to be executed
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>
<p>Iterate over a Map:</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

// List all entries
let text = "";
for (const x of fruits) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>