jQuery mappa contro ciascuno

In jQuery, la map e each funzione sembrano fare la stessa cosa. Ci sono differenze pratiche tra i due? Quando sceglieresti di usarne uno invece dell’altro?

each metodo è pensato per essere un iteratore immutabile, in cui il metodo map può essere usato come un iteratore, ma in realtà è pensato per manipolare l’array fornito e restituire un nuovo array.

Un’altra cosa importante da notare è che each funzione restituisce l’array originale mentre la funzione map restituisce un nuovo array. Se si abusa il valore restituito dalla funzione mappa, si può potenzialmente sprecare 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] 

Puoi anche 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 this non è mappato nella funzione map . Dovrai fornire il primo parametro nel callback (ad es. Abbiamo usato i sopra). 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() , $.each() e .map() richiede prima l’indice e quindi l’elemento

 function (index, element) 

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

 function (element, index) 

2: .each() , $.each() e .map() fanno qualcosa di speciale con this

each() chiama la funzione in modo che this punti all’elemento corrente. Nella maggior parte dei casi, non hai nemmeno bisogno dei due argomenti nella funzione di callback.

 function shout() { alert(this + '!') } result = $.each(['lions', 'tigers', 'bears'], shout) // result == ['lions', 'tigers', 'bears'] 

Per $.map() this variabile fa riferimento all’object della 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 una nuova matrice, che restituisce. Solitamente è 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!'] 

each funzione itera su una matrice, chiamando la funzione fornita una volta per elemento e impostandola sull’elemento attivo. Questo:

 function countdown() { alert(this + ".."); } $([5, 4, 3, 2, 1]).each(countdown); 

avviserà 5.. poi 4.. poi 3.. poi 2.. poi 1..

Map 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); 

risulterebbe in s [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] 

quindi, ” 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 viene utilizzato al meglio durante l’iterazione degli elementi del selettore. Che è evidenziato dal fatto che la funzione mappa non usa un selettore.

 $(selector).each(...) $.map(arr....) 

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