javascript - jQuery map vs. each

I jQuery ser det ut til at map og each-funksjonene gjør det samme. Er det noen praktiske forskjeller mellom de to? Når ville du valgt å bruke den ene fremfor den andre?

Svar #1

each-metoden er ment å være en uforanderlig iterator, mens map-metoden kan brukes som en iterator, men er egentlig ment å manipulere den tilførte arrayen og returnere en ny array.

En annen viktig ting å merke seg er at each-funksjonen returnerer den opprinnelige arrayen, mens map-funksjonen returnerer en ny array. Hvis du overbruker returverdien til map-funksjonen, kan du potensielt kaste bort mye minne.

For eksempel:

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]

Du kan også bruke map-funksjonen til å fjerne et element fra en matrise. For eksempel:

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]

Du vil også legge merke til at this ikke er kartlagt i map-funksjonen. Du må selv oppgi den første parameteren i callback-en (for eksempel brukte vi i ovenfor). Ironisk nok er callback-argumentene som brukes i each-metoden motsatte av callback-argumentene i map-funksjonen, så vær forsiktig.

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

Svar #2

1: Argumentene til tilbakeringingsfunksjonene er reversert.

Tilbakeringingsfunksjonene til .each(), $.each() og .map() tar først indeksen, og deretter elementet

function (index, element)

Tilbakekallingsfunksjonen til $.map() har de samme argumentene, men i motsatt rekkefølge

function (element, index)

2: .each(), $.each(), og .map() gjør noe spesielt med this

each() kaller funksjonen på en slik måte at this peker til det nåværende elementet. I de fleste tilfeller trenger du ikke engang de to argumentene i tilbakekallingsfunksjonen.

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

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

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

For $.map() refererer this-variabelen til det globale window-objektet.

3: map() gjør noe spesielt med returverdien til callback-funksjonen

map() kaller funksjonen på hvert element, og lagrer resultatet i et nytt array, som den returnerer. Du trenger vanligvis bare å bruke det første argumentet i callback-funksjonen.

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

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

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

Svar #3

Funksjonen each itererer over et array, kaller den leverte funksjonen én gang per element, og setter this til det aktive elementet. Dette:

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

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

vil varsle 5.. deretter 4.. deretter 3.. deretter 2.. deretter 1..

Map derimot tar et array, og returnerer et nytt array med hvert element endret av funksjonen. Dette:

function squared() {
    return this * this;
}

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

ville resultere i at s blir [25, 16, 9, 4, 1].

Svar #4

jeg forsto det på dette:

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]

så, "each" funksjon returnerer det originale arrayet mens "map" funksjon returnerer et nytt array

Relaterte artikler