2

Sólo quería saber eso, si existe una diferencia significativa entre utilizar un for normal y un for-in al momento de recorrer un Array.

Me surgió la cuestión debido a que estaba realizando una revisión a un viejo proyecto (donde utilizaba for-in) y estaba leyendo el articulo de una web que lo ponía como una mala práctica (o por lo menos que sería más eficiente utilizar el for normal).

Espero puedan esclarecer mi duda

1

2 respuestas 2

4

Hay 4 formas de recorrer un array:

for (index in array) {...}

for (index of array) {...}

for (let i = 0; i < array.length; i++) {...}

array.forEach((elem,index) => { ...});
  • La primera de todas es posiblemente la peor de ellas, porque está pensado para recorrer las propiedades de cualquier objeto javascript, no solo arrays o iterables. Por tanto depende de la reflexión y no asegura el orden en el que dichas propiedades serán recorridas.

  • La segunda está especialmente pensada para objetos Iterables, con lo que es una mejor solución.

  • La tercera opción es la más flexible, ya que permite todo tipo de operaciones y diferentes formas de recorrer arrays: podrías empezar por la última posición, o incrementar el índice de dos en dos (por jemplo) para recorrer sólo ciertos elementos.

  • La cuarta forma puede ser la más elegante (si te atrae la programación funcional), pero en rendimiento es ligeramente más lento que las segunda y la tercera, pues requiere llamar a una función para cada elemento, creando los parámetros que ésta necesita.

Ahora vayamos a hacer unas pequeñas pruebas:

var arr =new Array(5000); 

for (let i=0; i< 5000; i++) {
  arr[i]=Math.floor(Math.random()*5000);
}

// for normal
let max = 0;
console.time('for');

for (var i = arr.length - 1; i >= 0; i--) {
  if (arr[i] > max) {
    max = arr[i];
  }
}
console.timeEnd('for');
    
// for-in
max = 0;
console.time('for in');
for (let i in arr) {
 	if (arr[i] > max) {
    max = arr[i];
  }
}
console.timeEnd('for in');
    
    
// for-of
max=0;
console.time('for of');
for (let x of arr) {
 	if (x > max) {
    max = x;
  }
}
console.timeEnd('for of');
    
    
// forEach
console.time('forEach');
arr.forEach((x)=>{
  if (x > max) {
    max = x;
  }
});
console.timeEnd('forEach');

Como puedes ver, la diferencia no es muy grande entre los 3 métodos más grandes, pero el for... in es el más lento. En cualquier caso la diferencia es muy pequeña y no debería causar nunca un cuello de botella a menos que estemos trabajando con miles de elementos y operaciones muy sencillas.

2

si lo que buscas es medir el rendimiento de los diferentes bucles puedes hacerlo asi:

     var numbers = [...Array(1000).keys()]; 
    // for normal
    console.time("for-normal");
    for (var i = numbers.length - 1; i >= 0; i--) {
    	let a = i;
    }
    console.timeEnd("for-normal");
    
    // for-in
    console.time("for-in");
    for (let x in numbers) {
    	let a = x;
    }
    console.timeEnd("for-in");
    
    
    // for-of
    console.time("for-of");
    for (let x of numbers) {
    	let a = x;
    }
    console.timeEnd("for-of");
    
    
    // forEach
    console.time("forEach");
    numbers.forEach((x)=>{
    	let a =x;
    })
    console.timeEnd("forEach");

2
  • 1
    Hay varias cosas erróneas en ese test: el forEach por ejemplo no se ejecuta para los elementos undefined (has creado un array de 100 posiciones, pero están vacías) el 10 jun. 2019 a las 19:07
  • muchas gracias por la observacion ya corregi!
    – Bryro
    el 10 jun. 2019 a las 19:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.