carte de jQuery vs chacun

Question

En jQuery, la et fonctions semblent faire la même chose. Y a-t-il des différences de pratiques entre les deux ? Quand vous choisiriez d’utiliser l’un plutôt que l’autre ?

Answer 1

L' each méthode est destinée à être immuable itérateur, où, comme l' map méthode peut être utilisée comme un itérateur, mais est vraiment le but de manipuler le tableau fourni et renvoyer un nouveau tableau.

Une autre chose importante à noter est que l' each fonction retourne le tableau d'origine, tandis que l' map fonction renvoie un nouveau tableau. Si vous abusez de la valeur de retour de la fonction map vous pouvez potentiellement perdre beaucoup de mémoire.

Par exemple:

var items = [1,2,3,4];

$.each(items, function() {
  alert('this is ' + this);
});

var newItems = $.map(items, function(i) {
  return i + 1;
});
// newItems is [2,3,4,5]

Vous pouvez également utiliser la fonction map pour supprimer un élément d'un tableau. Par exemple:

var items = [0,1,2,3,4,5,6,7,8,9];

var itemsLessThanEqualFive = $.map(items, function(i) {
  // removes all items > 5
  if (i > 5) 
    return null;
  return i;
});
// itemsLessThanEqualFive = [0,1,2,3,4,5]

Vous noterez aussi que l' this n'est pas mappé dans l' map fonction. Vous aurez à fournir le premier paramètre de la fonction de rappel (par exemple, nous avons utilisé i ci-dessus). Ironiquement, le rappel des arguments utilisés dans la chaque méthode sont à l'inverse de la fonction de rappel des arguments dans la fonction map, alors soyez prudent.

map(arr, function(elem, index) {});
// versus 
each(arr, function(index, elem) {});

Answer 2

1: Les arguments de la fonction de rappel sont inversés.

each()s'fonction de callback prend d'abord l'index, puis l'élément

function (index, element)

map()'s de rappel a les mêmes arguments, mais inversée

function (element, index)

2: each() fait quelque chose de spécial avec this

each() des appels de la fonction de telle manière qu' this de points à l'élément courant. Dans la plupart des cas, vous n'avez même pas besoin de les deux arguments dans la fonction de callback.

function shout() { alert(this + '!') }

result = $.each(['lions', 'tigers', 'bears'], shout)

// result == ['lions', 'tigers', 'bears']

3: map() fait quelque chose de spécial avec le rappel de la valeur de retour

map() des appels de la fonction sur chaque élément, et stocke le résultat dans un nouveau tableau, qu'elle renvoie. Vous avez généralement besoin d'utiliser le premier argument dans la fonction de callback.

function shout(el) { return el + '!' }

result = $.map(['lions', 'tigers', 'bears'], shout)

// result == ['lions!', 'tigers!', 'bears!']

Answer 3

L' each fonction parcourt un tableau, l'appel de la fonction fournie une fois par élément, et le paramètre this de l'élément actif. Ce:

function countdown() {
    alert(this + "..");
}

$([5, 4, 3, 2, 1]).each(countdown);

alerte 5.. alors 4.. alors 3.. alors 2.. alors 1..

La carte sur l'autre main prend un tableau, et renvoie un nouveau tableau avec chaque élément modifié par la fonction. Ce:

function squared() {
    return this * this;
}

var s = $([5, 4, 3, 2, 1]).map(squared);

aurait pour résultat que s est [25, 16, 9, 4, 1].

Answer 4

je l’ai compris par là:

ainsi, «chaque» fonction retourne le tableau d’origine tandis que la fonction «carte» retourne un nouveau tableau

Answer 5

JQuery.map est plus logique quand vous faites le travail sur les tableaux comme il fonctionne très bien avec des tableaux.

JQuery.Each est préférable d’utiliser lors d’une itération à travers les éléments de sélecteur. Qui se manifeste en ce que la fonction de carte n’utilise pas un sélecteur.

comme vous pouvez le voir, carte n’est pas prévu pour être utilisé avec les sélecteurs.