Iterables de JavaScript

Tabla de contenido

Los objetos iterables son objetos sobre los que se puede iterar con for..of.

Técnicamente, los iterables deben implementar el método Symbol.iterator.

Iterando sobre una cadena

Puedes usar un bucle for..of para iterar sobre los elementos de una cadena:

Ejemplo

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

Pruébelo usted mismo →

<!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 una matriz

Puede utilizar un bucle for..of para iterar sobre los elementos de una matriz:

Ejemplo

for (const x of [1,2,3,4,5]) {
  // code block to be executed
}

Pruébelo usted mismo →

<!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 de JavaScript

El protocolo iterador define cómo producir una secuencia de valores a partir de un objeto.

Un objeto se convierte en un iterador cuando implementa un método next().

El método next() debe devolver un objeto con dos propiedades:

valor (el siguiente valor)
hecho (verdadero o falso)

value: El valor devuelto por el iterador
(Se puede omitir si done es verdadero)
done: verdadero si el iterador se ha completado
falso si el iterador ha producido un nuevo valor

Iterable hecho en casa

Este iterable devuelve interminable: 10,20,30,40,.... Cada vez next() se llama:

Ejemplo

// 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

Pruébelo usted mismo →

<!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>

El problema con una casa hecha iterable:

No es compatible con la declaración for..of de JavaScript.

Un iterable de JavaScript es un objeto que tiene un Symbol.iterator.

El Symbol.iterator es una función que devuelve una función next().

Un iterable se puede repetir con el código: for (const x of iterable) { }

Ejemplo

// 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};
    }
  };
}

Ahora puedes usar for..of

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

Pruébelo usted mismo →

<!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>

El método Symbol.iterator es llamado automáticamente por for..of. <p>Pero también podemos hacerlo "manualmente"

Ejemplo

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

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

Pruébelo usted mismo →

<!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>