Qual é a diferença entre .map, .every e .forEach?

118

Sempre me perguntei qual era a diferença entre eles. Todos eles parecem fazer a mesma coisa ...

0x499602D2
fonte
6
Alguém adicionou uma tag jQuery ... considerando everye forEachnão são métodos jQuery, acho improvável que a questão se relacione com jQuery de alguma forma. developer.mozilla.org/en/JavaScript/New_in_JavaScript/1.6
James Allardice
Acho que este link deve ter a resposta que você está procurando.
zBomb
Estou certo em pensar que você está se referindo aos novos métodos de array específicos do Mozilla, conforme detalhado no link em meu comentário anterior?
James Allardice
@James - Não são específicos do Mozilla . Eu compartilharia um link para webkit e documentos de ópera também, mas não sei onde eles estão na minha cabeça.
gilly3,
@ gilly3 - Ahh, bom ponto. Eu acredito que eles são suportados apenas no IE9, não abaixo.
James Allardice

Respostas:

224

A diferença está nos valores de retorno.

.map() retorna um novo Array de objetos criado ao realizar alguma ação no item original.

.every() retorna um booleano - verdadeiro se cada elemento nesta matriz satisfizer a função de teste fornecida. Uma diferença importante .every()é que a função de teste nem sempre pode ser chamada para todos os elementos da matriz. Uma vez que a função de teste retorna falso para qualquer elemento, nenhum outro elemento do array é iterado. Portanto, a função de teste geralmente não deve ter efeitos colaterais .

.forEach() não retorna nada - itera o Array executando uma determinada ação para cada item no Array.

Leia sobre estes e muitos outros métodos de iteração de Array em MDN .

gilly3
fonte
Alternativamente, o MDN poderia ser citado
JoshWillik
3
@josh - Eu citei MDN. Cada nome de método está vinculado à sua documentação correspondente no MDN.
gilly3
@ gilly3, minhas desculpas, eu ignorei o texto em azul>.>
JoshWillik
.forEach () retorna nada está errado agora, talvez não fosse em 2012, mas em 2015 no Chrome, pelo menos, tente isto arr2 = ['sue', 'joe', 'ben', 'guy', 'tom', 'jon ']; b = arr2.forEach (função (el, indx) {console.log (indx + ':' + el);}); console.log (b);
jason
1
@EugeneMercer Por "item original", quero dizer o valor original de cada elemento da matriz.
gilly
88

A resposta de gilly3 é ótima. Eu só queria adicionar um pouco de informação sobre outros tipos de funções de "loop por elementos".

  • .every() (para o loop na primeira vez que o iterador retorna falso ou algo falso)
  • .some() (pára de repetir na primeira vez que o iterador retorna verdadeiro ou algo verdadeiro)
  • .filter() (cria uma nova matriz incluindo elementos onde a função de filtro retorna verdadeiro e omitindo aqueles onde retorna falso)
  • .map() (cria uma nova matriz a partir dos valores retornados pela função iteradora)
  • .reduce() (cria um valor chamando repetidamente o iterador, passando os valores anteriores; consulte as especificações para obter os detalhes; útil para somar o conteúdo de uma matriz e muitas outras coisas)
  • .reduceRight() (como reduzir, mas funciona em ordem decrescente em vez de crescente)

crédito para: TJCrowder For-each sobre um array em JavaScript?

Raphaelgontijolopes
fonte
Obtenha 100 curtidas minhas!
Shamim
6

Outra consideração para as grandes respostas acima é o encadeamento. Com forEach () você não pode encadear, mas com map (), você pode.

Por exemplo:

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

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

com .forEach (), você não pode fazer o .sort (), você obterá um erro.

Nadine Rose
fonte
0

Para Ramda , a diferença entre R.map()e R.forEach()é:

  1. R.forEach()retorna a matriz original, enquanto R.map()retorna um functor
  2. R.forEach()só pode operar em uma matriz, mas R.map()também pode operar em um objeto (ou seja, os pares de chave / valor do objeto são tratados como uma matriz)
Michael Osofsky
fonte
A questão está relacionada à linguagem Javascript. Ramda enquanto grande é um tópico totalmente diferente e uma biblioteca.
SeaWarrior404 de