Iterables de JavaScript

Tabla de contenido

Los iterables son objetos iterables (como matrices).

Se puede acceder a iterables con un código simple y eficiente.

Los iterables se pueden iterar con bucles for..of

El bucle For

La instrucción JavaScript for..of se repite a través de los elementos de un objeto iterable.

Sintaxis

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

Iterando

La iteración es fácil de entender.

Simplemente significa recorrer una secuencia de elementos.

A continuación se muestran algunos ejemplos sencillos:

Iterando sobre una cadena
Iterando sobre una matriz

Iterando sobre una cadena

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

Ejemplo

const name = "W3Schools";

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

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

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

Puede obtener más detalles sobre Iterables en el capítulo Iterables de objetos JS.

Iterando sobre un conjunto

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

Ejemplo

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

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

Pruébelo usted mismo →

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

Los conjuntos y mapas se tratan en los siguientes capítulos.

Iterando sobre un mapa

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

Ejemplo

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

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

Pruébelo usted mismo →

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