¿Cuál es la diferencia entre .map, .every y .forEach?

118

Siempre me he preguntado cuál era la diferencia entre ellos. Todos parecen hacer lo mismo ...

0x499602D2
fuente
6
Alguien ha añadido una etiqueta jQuery ... teniendo en cuenta everyy forEachno son métodos de jQuery, creo que es poco probable que la pregunta se refiere a jQuery de ninguna manera. developer.mozilla.org/en/JavaScript/New_in_JavaScript/1.6
James Allardice
Creo que este enlace debería tener la respuesta que está buscando.
zBomb
¿Tengo razón al pensar que se está refiriendo a los nuevos métodos de matriz específicos de Mozilla como se detalla en el enlace de mi comentario anterior?
James Allardice
@James: estos no son específicos de Mozilla . También compartiría un enlace a los documentos webkit y opera, pero no sé dónde están en la parte superior de mi cabeza.
gilly3
@ gilly3 - Ahh, buen punto. Sin embargo, creo que solo son compatibles con IE9, no a continuación.
James Allardice

Respuestas:

224

La diferencia está en los valores devueltos.

.map() devuelve una nueva matriz de objetos creados al realizar alguna acción en el elemento original.

.every() devuelve un valor booleano : verdadero si todos los elementos de esta matriz satisfacen la función de prueba proporcionada. Una diferencia importante con .every()es que no siempre se puede llamar a la función de prueba para cada elemento de la matriz. Una vez que la función de prueba devuelve falso para cualquier elemento, no se iteran más elementos de matriz. Por lo tanto, la función de prueba generalmente no debe tener efectos secundarios .

.forEach() no devuelve nada : itera la matriz realizando una acción determinada para cada elemento de la matriz.

Lea sobre estos y muchos otros métodos de iteración Array en MDN .

gilly3
fuente
Alternativamente, se podría citar el MDN
JoshWillik
3
@josh - Cité MDN. Cada nombre de método está vinculado a su documentación correspondiente en MDN.
gilly3
@ gilly3, mis disculpas, pasé por alto el texto azul>.>
JoshWillik
.forEach () devuelve nada está mal ahora, tal vez no fue en 2012, pero al menos en 2015 en Chrome, pruebe este arr2 = ['sue', 'joe', 'ben', 'guy', 'tom', 'jon ']; b = arr2.forEach (function (el, indx) {console.log (indx + ':' + el);}); console.log (b);
Jason
1
@EugeneMercer Por "elemento original" me refiero al valor original de cada elemento de la matriz.
gilly3
88

La respuesta de gilly3 es genial. Solo quería agregar un poco de información sobre otros tipos de funciones de "elementos en bucle".

  • .every() (deja de repetirse la primera vez que el iterador devuelve falso o algo falso)
  • .some() (deja de repetirse la primera vez que el iterador devuelve verdadero o algo verdadero)
  • .filter() (crea una nueva matriz que incluye elementos donde la función de filtro devuelve verdadero y omite los que devuelve falso)
  • .map() (crea una nueva matriz a partir de los valores devueltos por la función de iterador)
  • .reduce() (construye un valor llamando repetidamente al iterador, pasando valores anteriores; vea la especificación para los detalles; útil para sumar el contenido de una matriz y muchas otras cosas)
  • .reduceRight() (como reducir, pero funciona en orden descendente en lugar de ascendente)

crédito a: TJCrowder ¿ Para cada uno sobre una matriz en JavaScript?

raphaelgontijolopes
fuente
¡Obtén 100 me gusta!
Shamim
6

Otra consideración a las grandes respuestas anteriores es el encadenamiento. Con forEach () no puede encadenar, pero con map (), puede hacerlo.

Por ejemplo:

var arrayNumbers = [3,1,2,4,5];

arrayNumbers.map(function(i) {
    return i * 2
}).sort();

con .forEach (), no puede hacer el .sort (), obtendrá un error.

Nadine Rose
fuente
0

Para Ramda , la diferencia entre R.map()y R.forEach()es:

  1. R.forEach()devuelve la matriz original mientras que R.map()devuelve un functor
  2. R.forEach()solo puede operar en una matriz, pero R.map()también puede operar en un objeto (es decir, los pares clave / valor del objeto se tratan como una matriz)
Michael Osofsky
fuente
La pregunta está relacionada con el lenguaje Javascript. Ramda, aunque genial, es un tema y una biblioteca completamente diferente.
SeaWarrior404