El bucle for-of es un nuevo tipo de bucle introducido en ES6. Este bucle lo que nos permite es iterar a través de los elementos de objetos iterables como, por ejemplo, String, Array, Set, Map, etc.
La estructura que tiene es:
|
1 2 3 |
for (value of iterable_obj) { ... } |
Vamos a ver unos ejemplos con algunos de los tipos de objetos que hemos comentado antes que permite iterar:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
// ARRAY const array = [1, 2, 'a']; for (let value of array) { console.log(value); } // Resultado: // 1 // 2 // a // STRING const string = 'string'; for (let value of string) { console.log(value); } // Resultado: // s // t // r // i // n // g // ARGUMENTS function testFunction() { for (let value of arguments) { console.log(value); } } testFunction(1, 2, 'a', [string]); // Resultado: // 1 // 2 // a // [ 'string' ] |
Ver código anterior en vivo: https://repl.it/@vreaxe/ES6-for-of-loop
Diferencias entre for-of y for-in
Una de las diferencias es que for-of solamente puede iterar en objetos iterables, en cambio, for-in puede iterar en cualquier tipo de objeto. Otra diferencia, es que for-in devuelve las claves y for-of los valores.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
const array = [3, 4, 5, 'string']; const obj = { name: 'John', age: 20 }; // ARRAY for (value of array) { console.log(value); } // Resultado: // 3 // 4 // 5 // string for (key in array) { console.log(key); } // Resultado: // 0 // 1 // 2 // 3 // OBJETO for (key in obj) { console.log(key); } // Resultado: // name // age for (value of obj) { console.log(value); } // Resultado: // TypeError: obj[Symbol.iterator] is not a function |
Ver código anterior en vivo: https://repl.it/@vreaxe/ES6-for-of-vs-for-in
Diferencias entre for-of y .forEach
La principal diferencia es que for-of puede iterar en cualquier tipo de objeto iterable, en cambio, .forEach solamente puede en arrays. Otra diferencia es que con .forEach podemos acceder al índice y con for-of no.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
const array = [3, 4, 5, 'string']; const string = 'string'; // ARRAY for (value of array) { console.log(value); } // Resultado: // 3 // 4 // 5 // string array.forEach(function(value, index) { // podemos acceder al índice console.log(value, index); }); // Resultado: // 3 0 // 4 1 // 5 2 // STRING for (value of string) { console.log(value); } // Resultado: // s // t // r // i // n // g string.forEach(function(value, index) { console.log(value, index); }); // Resultado: // TypeError: string.forEach is not a function |
Ver código anterior en vivo: https://repl.it/@vreaxe/ES6-for-of-vs-forEach
-
- http://exploringjs.com/es6/ch_for-of.html
- https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/for…of
Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.
CONTACTAR