Iteráveis JavaScript

Índice

Objetos iteráveis são objetos que podem ser iterados com for..of.

Tecnicamente, os iteráveis devem implementar o método Symbol.iterator.

Iterando sobre uma string

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

Exemplo

for (const x of "W3Schools") {
  // 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

for (const x of [1,2,3,4,5]) {
  // 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>

Iteradores JavaScript

O protocolo iterador define como produzir uma sequência de valores a partir de um objeto.

Um objeto se torna um iterador quando implementa um método next().

O método next() deve retornar um objeto com duas propriedades:

valor (o próximo valor)
feito (verdadeiro ou falso)

value: O valor retornado pelo iterador
(Pode ser omitido se done for verdadeiro)
done: true se o iterador foi concluído
false se o iterador produziu um novo valor

Iterável feito em casa

Este iterável retorna sem fim: 10,20,30,40,.... Sempre next() é chamado:

Exemplo

// Home Made Iterable
function myNumbers() {
  let n = 0;
  return {
    next: function() {
      n += 10;
      return {value:n, done:false};
    }
  };
}

// Create Iterable
const n = myNumbers();
n.next(); // Returns 10
n.next(); // Returns 20
n.next(); // Returns 30

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>
<p>Home Made Iterable:</p>

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

<script>
// Home Made Iterable
function myNumbers() {
  let n = 0;
  return {
    next: function() {
      n += 10;
      return {value:n, done:false};
    }
  };
}

// Create Iterable
const n = myNumbers();
n.next(); // 10
n.next(); // 20
n.next(); // 30

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

O problema com uma casa iterável:

Ele não suporta a instrução JavaScript for..of.

Um iterável JavaScript é um objeto que possui um Symbol.iterator.

O Symbol.iterator é uma função que retorna uma função next().

Um iterável pode ser iterado com o código: for (const x of iterable) { }

Exemplo

// Create an Object
myNumbers = {};

// Make it Iterable
myNumbers[Symbol.iterator] = function() {
  let n = 0;
  done = false;
  return {
    next() {
      n += 10;
      if (n == 100) {done = true}
      return {value:n, done:done};
    }
  };
}

Agora você pode usar for..of

for (const num of myNumbers) {
  // Any Code Here
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>

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

<script>
// Create an Object
myNumbers = {};

// Make it Iterable
myNumbers[Symbol.iterator] = function() {
  let n = 0;
  done = false;
  return {
    next() {
      n += 10;
      if (n == 100) {done = true}
      return {value:n, done:done};
    }
  };
}

let text = ""
for (const num of myNumbers) {
  text += num +"<br>"
}

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

O método Symbol.iterator é chamado automaticamente por for..of. <p>Mas também podemos fazer isso "manualmente"

Exemplo

let iterator = myNumbers[Symbol.iterator]();

while (true) {
  const result = iterator.next();
  if (result.done) break;
  // Any Code Here
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>

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

<script>
// Create an Object
myNumbers = {};

// Make it Iterable
myNumbers[Symbol.iterator] = function() {
  let n = 0;
  done = false;
  return {
    next() {
      n += 10;
      if (n == 100) {done = true}
      return {value:n, done:done};
    }
  };
}

// Create an Iterator
let iterator = myNumbers[Symbol.iterator]();

let text = ""
while (true) {
  const result = iterator.next();
  if (result.done) break;
  text += result.value +"<br>";
}

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

</body>
</html>