jQuery Map vs.

In jQuery scheinen die Funktionen mapund eachdasselbe zu tun. Gibt es praktische Unterschiede zwischen den beiden? Wann würden Sie eine anstelle der anderen verwenden?

Die eachMethode soll ein unveränderlicher Iterator sein, wobei die mapMethode als Iterator verwendet werden kann, aber tatsächlich das bereitgestellte Array manipulieren und ein neues Array zurückgeben soll.

Ein weiterer wichtiger Punkt ist, dass die eachFunktion das ursprüngliche Array mapzurückgibt, während die Funktion ein neues Array zurückgibt. Wenn Sie den Rückgabewert der Kartenfunktion überbeanspruchen, können Sie möglicherweise viel Speicher verschwenden.

Beispielsweise:

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]

Sie können auch die Kartenfunktion verwenden, um ein Element aus einem Array zu entfernen. Beispielsweise:

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]

Sie werden auch feststellen, dass das thisin der mapFunktion nicht zugeordnet ist. Sie müssen den ersten Parameter im Rückruf angeben (z. B. ioben verwendet). Ironischerweise sind die in jeder Methode verwendeten Rückrufargumente die Umkehrung der Rückrufargumente in der Zuordnungsfunktion. Seien Sie also vorsichtig.

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

1: Die Argumente für die Rückruffunktionen sind umgekehrt.

.each()Die Rückruffunktion von 's, $.each()' s und .map()'nimmt zuerst den Index und dann das Element

function (index, element) 

$.map()Der Rückruf hat die gleichen Argumente, ist jedoch umgekehrt

function (element, index)

2: .each(), $.each()und .map()tun etwas , das mitthis

each()ruft die Funktion so auf, dass sie thisauf das aktuelle Element verweist. In den meisten Fällen benötigen Sie nicht einmal die beiden Argumente in der Rückruffunktion.

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

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

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

Denn $.map()die thisVariable bezieht sich auf das globale Fensterobjekt.

3: map()macht etwas Besonderes mit dem Rückgabewert des Rückrufs

map()Ruft die Funktion für jedes Element auf und speichert das Ergebnis in einem neuen Array, das zurückgegeben wird. Normalerweise müssen Sie nur das erste Argument in der Rückruffunktion verwenden.

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

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

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

Die eachFunktion durchläuft ein Array, ruft die angegebene Funktion einmal pro Element auf und setzt thisauf das aktive Element. Dies:

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

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

wird 5..dann 4..dann 3..dann 2..dann alarmieren1..

Map hingegen nimmt ein Array und gibt ein neues Array zurück, wobei jedes Element von der Funktion geändert wird. Dies:

function squared() {
    return this * this;
}

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

würde dazu führen, dass es so ist [25, 16, 9, 4, 1].

Ich habe es so verstanden :

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] 

Daher gibt " jede " Funktion das ursprüngliche Array zurück, während " Map " -Funktion ein neues Array zurückgibt

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 ist sinnvoller, wenn Sie an Arrays arbeiten, da es mit Arrays sehr gut funktioniert.

Jquery.each wird am besten verwendet, wenn Sie Auswahlelemente durchlaufen. Dies zeigt sich darin, dass die Kartenfunktion keinen Selektor verwendet.

$(selector).each(...)

$.map(arr....)

Wie Sie sehen können, ist die Karte nicht für die Verwendung mit Selektoren vorgesehen.