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 ...


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 .


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?


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.


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)

A questão está relacionada à linguagem Javascript. Ramda enquanto grande é um tópico totalmente diferente e uma biblioteca.
— SeaWarrior404 de
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.