El bucle for...of en JavaScript

JavaScript for...of La declaración itera sobre los valores de objetos iterables como Arrays, Strings, Maps, Sets, NodeLists y más. Se introdujo en ES6 para proporcionar un mecanismo de iteración limpio y conciso.

Sintaxis

El for...of declaración tiene la siguiente sintaxis:

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

Para cada iteración, el valor de la propiedad se asigna al value variable. Se puede declarar con const , let , o var . El iterable es el objeto que tiene propiedades enumerables (cadenas, matrices, mapas, conjuntos, etc.) y se puede repetir. El bloque de código se ejecuta una vez para cada propiedad.

Ejemplos

Veamos los siguientes ejemplos que demuestran cómo usar for...of instrucción para recorrer diferentes objetos iterables.

Iterando sobre un Array

Una matriz de JavaScript es una estructura de datos simple que almacena múltiples valores en una sola variable. Aquí hay un ejemplo que muestra cómo puede iterar sobre una matriz usando el for...of bucle:

const birds = ['🐦', '🦅', '🦆', '🦉'];

// iterate over all values
for (const bird of birds) {
  console.log(`Hey ${bird}`);
}

// Hey 🐦
// Hey 🦅
// Hey 🦆
// Hey 🦉

Iterando sobre una Cadena

Las cadenas también son un tipo de datos iterables, por lo que puede usar for...of en cadenas también:

const str = 'Cat';

// iterate over the string
for (const char of str) {
  console.log(char.toUpperCase().repeat(2));
}

// CC
// AA
// TT

Iterando sobre un Mapa

Un mapa de JavaScript es una estructura de datos especial introducida en ES6 que le permite crear colecciones de pares clave-valor. Tanto los objetos como los valores primitivos se pueden usar como clave o valor.

Al iterar sobre el mapa, el for...of declaración devuelve un par clave-valor para cada iteración en el mismo orden en que se insertaron como se muestra a continuación:

const foods = new Map([
    ['🍌', 'Banana'],
    ['🍕', 'Pizza'],
    ['🥒', 'Cucumber']
]);

// iterate over the map
for (const [key, value] of foods) {
    console.log(`${key}: ${value}`);
}

// 🍌: Banana
// 🍕: Pizza
// 🥒: Cucumber

Iterando sobre un Conjunto

Un conjunto de JavaScript es un tipo especial de objeto introducido en ES6 que le permite crear una colección de valores únicos. Puede almacenar tanto objetos como primitivos como valores en un conjunto de objetos.

El siguiente ejemplo muestra cómo puede usar for...of para iterar sobre un objeto establecido:

const flowers = new Set(['🌷', '🌻', '🌹', '🌸']);

// iterate over the set
for (const flower of flowers) {
  console.log(flower);
}

// 🌷
// 🌻
// 🌹
// 🌸

Iterando sobre un Objeto Argumentos

Un objeto de argumentos es simplemente un objeto similar a una matriz accesible dentro de las funciones que contiene los valores de los argumentos pasados ​​a esa función.

Usando for...of bucle, puede iterar sobre el arguments objeto para listar todos los argumentos pasados ​​a una función de JavaScript:

function animals() {
  for (const arg of arguments) {
    console.log(arg);
  }
}

animals('🐱', '🐧', '🐥', '🐯');

// 🐱
// 🐧
// 🐥
// 🐯

Iterando sobre una colección DOM

El for...of La declaración también se puede usar para iterar sobre una colección DOM como un NodeList . El siguiente ejemplo agrega un img-fluid class a las imágenes que son hijos directos de un artículo:

// select all images
const images = document.querySelectorAll('article > img');

// iterate over NodeList
for (const img of images) {
  img.classList.add('img-fluid');
}

Generadores de iteración

Un generador es un tipo especial de función en JavaScript que se puede salir y luego volver a ingresar.

Puede iterar fácilmente sobre los generadores usando el for...of declaración como se muestra en el siguiente ejemplo:

function* generator() {
  yield 1;
  yield 2;
  yield 3;
};

// iterate over the generator
for (const gen of generator()) {
  console.log(gen);
}

// 1
// 2
// 3

Iteradores de cierre

Puede terminar fácilmente un for...of bucle y cierre el iterador usando break , return o throw declaración:

const digits = [1, 2, 3];

for (const d of digits) {
  console.log(d);
  // terminate loop 
  break;
}

console.log('Done');

// 1
// Done

Iterando sobre un Objeto Literal

Desafortunadamente, for...of solo funciona con iterables. Un objeto literal no es iterable. Sin embargo, puedes usar el Object.keys() método para obtener todos los nombres de propiedades y luego iterar sobre ellos:

const animals = {
  tiger: '🐅',
  cat: '🐱',
  monkey: '🐒',
  elephant: '🐘'
};


for (const key of Object.keys(animals)) {
  console.log(`${key} -> ${animals[key]}`);
}

// tiger -> 🐅
// cat -> 🐱
// monkey -> 🐒
// elephant -> 🐘

En lugar de usar for...of instrucción, debería considerar usar for...in loop para objetos literales.

Compatibilidad del navegador

JavaScript for...of Actualmente, la declaración solo es compatible con los navegadores modernos. Si desea admitir navegadores antiguos como Internet Explorer, necesita un polyfill o usar el bucle forEach() en su lugar.