Carte jQuery vs chaque

Dans jQuery, les fonctions mapet eachsemblent faire la même chose. Y a-t-il des différences pratiques entre les deux? Quand choisiriez-vous d'utiliser l'un au lieu de l'autre?

La eachméthode est censée être un itérateur immuable, alors que la mapméthode peut être utilisée comme itérateur, mais est vraiment destinée à manipuler le tableau fourni et à renvoyer un nouveau tableau.

Une autre chose importante à noter est que la eachfonction renvoie le tableau d'origine tandis que la mapfonction renvoie un nouveau tableau. Si vous abusez de la valeur de retour de la fonction de carte, vous pouvez potentiellement gaspiller 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 de carte 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 remarquerez également que le thisn'est pas mappé dans la mapfonction. Vous devrez fournir le premier paramètre dans le rappel (par exemple, nous l'avons utilisé ici-dessus). Ironiquement, les arguments de rappel utilisés dans la méthode each sont l'inverse des arguments de rappel dans la fonction map, alors soyez prudent.

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

1: Les arguments des fonctions de rappel sont inversés.

.each()Les fonctions de rappel de 's, $.each()' s et .map()'prennent d'abord l'index, puis l'élément

function (index, element) 

$.map()Le rappel de 'a les mêmes arguments, mais inversé

function (element, index)

2: .each(), $.each()et .map()faire quelque chose de spécial avecthis

each()appelle la fonction d'une manière qui thispointe vers l'élément courant. Dans la plupart des cas, vous n'avez même pas besoin des deux arguments dans la fonction de rappel.

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

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

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

Car $.map()la thisvariable fait référence à l'objet de fenêtre globale.

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

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

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

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

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

La eachfonction parcourt un tableau, appelant la fonction fournie une fois par élément et définissant thisl'élément actif. Ce:

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

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

alertera 5..alors 4..puis 3..puis 2..alors1..

La carte d'autre part 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);

entraînerait s être [25, 16, 9, 4, 1].

je l'ai compris par ceci :

function fun1() {
    return this + 1;
}
function fun2(el) {
    return el + 1;
}

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

var newitem1 = $.each(item, fun1);
var newitem2 = $.map(item, fun2);

console.log(newitem1); // [5, 4, 3, 2, 1] 
console.log(newitem2); // [6, 5, 4, 3, 2] 

donc, " chaque " fonction retourne le tableau d'origine tandis que " carte " fonction retourne un nouveau tableau

var intArray = [1, 2, 3, 4, 5];
//lets use each function
$.each(intArray, function(index, element) {
  if (element === 3) {
    return false;
  }
  console.log(element); // prints only 1,2. Breaks the loop as soon as it encountered number 3
});

//lets use map function
$.map(intArray, function(element, index) {
  if (element === 3) {
    return false;
  }
  console.log(element); // prints only 1,2,4,5. skip the number 3.
});

Jquery.map est plus logique lorsque vous travaillez sur des tableaux car il fonctionne très bien avec les tableaux.

Jquery.each est mieux utilisé lors de l'itération des éléments de sélection. Ce qui est démontré par le fait que la fonction de carte n'utilise pas de sélecteur.

$(selector).each(...)

$.map(arr....)

comme vous pouvez le voir, la carte n'est pas destinée à être utilisée avec des sélecteurs.