Mapa jQuery vs.

W jQuery funkcje mapi eachwydają się robić to samo. Czy są jakieś praktyczne różnice między nimi? Kiedy zdecydujesz się użyć jednego zamiast drugiego?

eachMetoda jest przeznaczona do niezmiennej iteracyjnej, w którym jako mapsposób może być stosowany jako iteracyjnej, ale rzeczywiście przeznaczona do manipulowania dostarczonego tablicy i zwraca nową tablicę.

Inną ważną rzeczą do zapamiętania jest to, że eachfunkcja zwraca oryginalną tablicę, podczas gdy mapfunkcja zwraca nową tablicę. Jeśli nadużyjesz zwracanej wartości funkcji mapy, możesz potencjalnie zmarnować dużo pamięci.

Na przykład:

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]

Możesz także użyć funkcji mapy, aby usunąć element z tablicy. Na przykład:

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]

Zauważysz również, że thisnie jest mapowany w mapfunkcji. Będziesz musiał podać pierwszy parametr w wywołaniu zwrotnym (np. Użyliśmy ipowyżej). Jak na ironię, argumenty wywołania zwrotnego używane w każdej metodzie są odwrotnością argumentów wywołania zwrotnego w funkcji mapy, więc bądź ostrożny.

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

1: Argumenty funkcji zwrotnych są odwrócone.

.each()Funkcje zwrotne „, $.each()” i .map()„” najpierw biorą indeks, a potem element

function (index, element) 

$.map()Wywołanie zwrotne ma te same argumenty, ale jest odwrócone

function (element, index)

2: .each(), $.each(), i .map()zrobić coś specjalnego zthis

each()wywołuje funkcję w taki sposób, że thiswskazuje bieżący element. W większości przypadków nie potrzebujesz nawet dwóch argumentów w funkcji wywołania zwrotnego.

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

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

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

Dla $.map()tej thiszmiennej odnosi się do globalnego obiektu okna.

3: map()robi coś specjalnego z wartością zwrotną wywołania zwrotnego

map()wywołuje funkcję na każdym elemencie i zapisuje wynik w nowej tablicy, którą zwraca. Zwykle wystarczy użyć pierwszego argumentu w funkcji wywołania zwrotnego.

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

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

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

W eachiteracji funkcyjne powyżej tablicy, wywoływanie funkcji dostarczanej jednokrotnie na element i ustawień thisdla składnika aktywnego. To:

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

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

zaalarmuje 5..wtedy, 4..a 3..potem 2..wtedy1..

Z drugiej strony mapa pobiera tablicę i zwraca nową tablicę z każdym elementem zmienionym przez funkcję. To:

function squared() {
    return this * this;
}

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

spowodowałoby bycie s [25, 16, 9, 4, 1] .

zrozumiałem to przez to :

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] 

więc „ każda ” funkcja zwraca oryginalną tablicę, podczas gdy funkcja „ map ” zwraca nową tablicę

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 ma więcej sensu, gdy wykonujesz pracę na tablicach, ponieważ działa bardzo dobrze z tablicami.

Jquery.each najlepiej stosować podczas iteracji po elementach wyboru. Dowodzi tego fakt, że funkcja mapy nie korzysta z selektora.

$(selector).each(...)

$.map(arr....)

jak widać, mapa nie jest przeznaczona do użycia z selektorami.