jQuery map contro ciascuno

In jQuery, le funzioni mape eachsembrano fare la stessa cosa. Ci sono differenze pratiche tra i due? Quando sceglieresti di usare l'uno invece dell'altro?

Il eachmetodo è pensato per essere un iteratore immutabile, dove come mapmetodo può essere usato come iteratore, ma è davvero pensato per manipolare l'array fornito e restituire un nuovo array.

Un'altra cosa importante da notare è che la eachfunzione restituisce l'array originale mentre la mapfunzione restituisce un nuovo array. Se si utilizza in modo eccessivo il valore restituito della funzione mappa, è possibile che si sprechi molta memoria.

Per esempio:

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]

È inoltre possibile utilizzare la funzione mappa per rimuovere un elemento da un array. Per esempio:

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]

Noterai anche che thisnon è mappato nella mapfunzione. Dovrai fornire il primo parametro nel callback (ad es. Abbiamo usato isopra). Ironia della sorte, gli argomenti di callback utilizzati in ciascun metodo sono il contrario degli argomenti di callback nella funzione map, quindi fai attenzione.

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

1: gli argomenti delle funzioni di callback sono invertiti.

.each()La funzione di callback di 's, $.each()' e .map()s prende prima l'indice e poi l'elemento

function (index, element) 

$.map()Il callback ha gli stessi argomenti, ma invertito

function (element, index)

2: .each(), $.each(), e .map()fare qualcosa di speciale conthis

each()chiama la funzione in modo tale che thispunti all'elemento corrente. Nella maggior parte dei casi, non sono nemmeno necessari i due argomenti nella funzione di callback.

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

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

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

Per $.map()la thisvariabile si riferisce all'oggetto finestra globale.

3: map()fa qualcosa di speciale con il valore di ritorno del callback

map()chiama la funzione su ciascun elemento e memorizza il risultato in un nuovo array, che restituisce. Di solito è necessario utilizzare solo il primo argomento nella funzione di callback.

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

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

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

La eachfunzione scorre su un array, chiamando la funzione fornita una volta per elemento e impostandola thissull'elemento attivo. Questo:

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

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

avviserà 5..quindi 4..poi 3..poi 2..poi1..

La mappa invece prende un array e restituisce un nuovo array con ogni elemento modificato dalla funzione. Questo:

function squared() {
    return this * this;
}

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

si tradurrebbe in essere [25, 16, 9, 4, 1].

l'ho capito da questo :

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] 

così, " ogni " funzione restituisce l'array originale mentre la funzione " map " restituisce un nuovo array

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 ha più senso quando si lavora su array in quanto funziona molto bene con gli array.

Jquery.each è meglio usato quando si scorre tra gli elementi del selettore. Ciò è evidenziato dal fatto che la funzione mappa non utilizza un selettore.

$(selector).each(...)

$.map(arr....)

come puoi vedere, la mappa non è pensata per essere utilizzata con i selettori.