JQuery map vs Javascript map vs For-loop

Question

Estoy implementando algunos códigos que se adaptan perfectamente al mapa. Sin embargo, tengo una importante cantidad de objetos en una lista que voy a recorrer, así que mi pregunta es cuál es el mejor camino a seguir Abou esto:

var stuff = $.map(listOfMyObjects, someFunction()) 

var stuff = listOfMyObjects.map(someFunction()) 

o simplemente

var stuff = new Array(); 
for(var i = 0; i < listOfmyObjects.length; i++){ 
    stuff.push(someFunction(listOfMyObjects[i])); 
} 

Answer 1

Este último (para el bucle) es mucho más rápido. Recuerdo haber visto un punto de referencia en algún lugar, pero parece que no puedo encontrar el enlace.

Si el rendimiento es realmente un problema, entonces usaría el ciclo for. Realmente no oscurece tanto el código.

Answer 2

Primero, verdadero Objects no tiene un método nativo .map(), ni una propiedad .length. Así que estamos hablando de Arrays o Array-like-objects (objetos jQuery, por ejemplo).

Sin embargo, no hay una forma más rápida de iterar que utilizando un for, while o do-while loop nativo. Todas las demás operaciones funcionales realizan (adivina qué) una función para cada iteración que cuesta.

jQuerys .each() ejecutará simplemente un bucle for-in cuando se le pase un objeto. Esa es la forma más rápida de recorrer un objeto. Puede usar un for-in usted mismo y guardar la llamada general.

Otra "buena" manera en términos de legibilidad es hacer uso de las características ES5 como .keys() y .map(). Por ejemplo:

var myObj = { 
    foo: 'bar', 
    base: 'ball', 
    answer: 42, 
    illuminati: 23 
}; 

Object.keys(myObj).map(function(prop) { 
    console.log(myObj[ prop ]); 
}); 

que creo que es una muy buena tradeof en términos de readabilty, confort y rendimiento. Por supuesto, debe usar una biblioteca de abstracción de ES5 para el viejo navegador.

Pero, de nuevo, no hay manera de vencer los bucles nativos en términos de rendimiento.

Answer 3

Cree casos de prueba con su código html/javascript en jsperf.

Podrá ver qué funciona mejor y qué tan rápido los diferentes navegadores realizan los bucles.

Pondré mi dinero en el bucle de JavaScript nativo, pero nunca se sabe.

Answer 4

+1 para la respuesta "prueba" de Emil :) Esa es siempre la respuesta correcta.

Pero sí, los bucles nativos ganan, y puede hacer uno mejor almacenando en caché la longitud para que la referencia .length no se evalúe en cada iteración.

for(var i = 0, l = list.length; i < l; i++) 

o evitar la var extra haciendo al revés

for(var i = list.length-1; i >= 0; i--) 

Y, si se puede 'inline' la 'algunaFuncion', que será aún más rápido. Básicamente, evite llamadas de función y referencias tanto como pueda. Pero eso es solo si realmente estás mirando los detalles finos. Es poco probable que optimizaciones como esta vayan a importar mucho. Siempre prueba para encontrar tus cuellos de botella.

Answer 5

aquí es un caso de prueba realizado en jsben.ch: http://jsben.ch/#/BQhED

muestra que un mapa de bucle es más rápido que un mapa jQuery (al menos en cromo).