En este tutorial, aprenderá sobre JavaScript for… of loop con la ayuda de ejemplos.
En JavaScript, hay tres formas en las que podemos usar un forbucle.
- JavaScript para bucle
- JavaScript para… en bucle
- JavaScript para… de bucle
El for… ofbucle se introdujo en las versiones posteriores de JavaScript ES6 .
El for… ofbucle en JavaScript le permite iterar sobre objetos iterables (matrices, conjuntos, mapas, cadenas, etc.).
JavaScript para… de bucle
La sintaxis del for… ofbucle es:
for (element of iterable) ( // body of for… of )
Aquí,
- iterable : un objeto iterable (matriz, conjunto, cadenas, etc.).
- elemento - elementos en el iterable
En un lenguaje sencillo, puede leer el código anterior como: para cada elemento del iterable, ejecute el cuerpo del bucle.
para … de con matrices
El for… ofbucle se puede utilizar para iterar sobre una matriz. Por ejemplo,
// array const students = ('John', 'Sara', 'Jack'); // using for… of for ( let element of students ) ( // display the values console.log(element); )
Salida
John Sara Jack
En el programa anterior, el for… ofciclo se usa para iterar sobre el objeto de matriz de los estudiantes y mostrar todos sus valores.
para … de con cadenas
Puede utilizar el for… ofbucle para iterar sobre los valores de cadena. Por ejemplo,
// string const string = 'code'; // using for… of loop for (let i of string) ( console.log(i); )
Salida
código
para … de con Sets
Puede iterar a través de los elementos Set utilizando el for… ofbucle. Por ejemplo,
// define Set const set = new Set((1, 2, 3)); // looping through Set for (let i of set) ( console.log(i); )
Salida
1 2 3
para … de con Maps
Puede iterar a través de los elementos del mapa utilizando el for… ofbucle. Por ejemplo,
// define Map let map = new Map(); // inserting elements map.set('name', 'Jack'); map.set('age', '27'); // looping through Map for (let (key, value) of map) ( console.log(key + '- ' + value); )
Salida
nombre- Jack edad- 27
Iteradores definidos por el usuario
Puede crear un iterador manualmente y utilizar el for… ofbucle para recorrer los iteradores. Por ejemplo,
// creating iterable object const iterableObj = ( // iterator method (Symbol.iterator)() ( let step = 0; return ( next() ( step++; if (step === 1) ( return ( value: '1', done: false); ) else if (step === 2) ( return ( value: '2', done: false); ) else if (step === 3) ( return ( value: '3', done: false); ) return ( value: '', done: true ); ) ) ) ) // iterating using for… of for (const i of iterableObj) ( console.log(i); )
Salida
1 2 3
para… de con generadores
Dado que los generadores son iterables, puede implementar un iterador de una manera más sencilla. Luego puede iterar a través de los generadores usando el for… ofbucle. Por ejemplo,
// generator function function* generatorFunc() ( yield 10; yield 20; yield 30; ) const obj = generatorFunc(); // iteration through generator for (let value of obj) ( console.log(value); )
Salida
10 20 30
para … de Vs para … en
| para … de | para … en |
|---|---|
El for… ofbucle se utiliza para iterar a través de los valores de un iterable. | El for… inbucle se utiliza para recorrer las claves de un objeto. |
El for… ofbucle no se puede utilizar para iterar sobre un objeto. | Puede usar for… inpara iterar sobre un iterable tales matrices y cadenas, pero debe evitar usar for… inpara iterables. |
El for… ofbucle se introdujo en ES6 . Es posible que algunos navegadores no admitan su uso. Para obtener más información, visite JavaScript para… de Soporte.
