Menu

Iterables en ES6

ecmascript - January 28, 2019 por Carlos Rojas | Edita este Post.
EcmaScript6

Existe ocasiones en las que obtenemos Objetos y/o Arrays para las cuales queremos recorrer cada uno de sus elementos para realizar operaciones, usualmente, utilizamos el forEach el cual es un metodo que nos ha funcionado pero en ES6 tenemos el for in y el for of.

Miremos primero como se hace tradicionalmente el recorrido de un conjunto de elementos.

const data = ['item1', 'item2', 'item3', 'item 4'];

data.forEach(
  (item)=> {
    console.log(item);
  }
)

y vemos que en la consola nos muestra los elementos.

Adicionalmente, tambien contabamos con el for el cual personalmente me parecia un mecanismo mas intuitivo para los ciclos si conocias otros lenguajes. Lo que hicimos anteriormente lo podemos replicar como:

const data = ['item1', 'item2', 'item3', 'item 4'];

for(let i=0; i < data.length; i++) {
  console.log(data[i]);
}

y podemos observar un resultado similar.

Actualmente, a los que mostramos anteriormente que nos van a ser de ayuda en la mayoria de los casos tenemos dos tipos mas de for los cuales nos van a dar mas herramientas para poder recorrer elementos iterables, estos son el for...in y el for...of.

const data = ['item1', 'item2', 'item3', 'item 4'];

for(const index in data) {
  console.log(data[index]);
}
const data = ['item1', 'item2', 'item3', 'item 4'];

for(const item of data) {
  console.log(item);
}

tambien podriamos capturar su posicion de la siguiente manera

const data = ['item1', 'item2', 'item3', 'item 4'];

for(const [i, item] of data.entries()) {
  console.log("Posicion: " + i);
  console.log("Item: " + item);
}

Ahora miremos un poco como seria el uso de los for...in y for...of con objetos.

Lo primero es entender que los objetos son un poco distintos de los arrays, el for...in funciona sin problema.

const data = {
  prop1: 'item1', 
  prop2: 'item2', 
  prop3: 'item3', 
  prop4: 'item 4'
};

for(const prop in data) {
  const value = data[prop];
  console.log("Item: " + value);
}

Pero para hacer que nos funcione el for...of debemos iterar sobre el resultado del Object.keys(data)

const data = {
  prop1: 'item1', 
  prop2: 'item2', 
  prop3: 'item3', 
  prop4: 'item 4'
};

for(const prop of  Object.keys(data)) {
  const value = data[prop];
  console.log("Item: " + value);
}

Bueno espero que sea de utilidad. Hasta un proximo post :)

¡Compártelo!