I metodi globali di jQuery $.grep() e $.map() operano entrambi sugli array, ma con un'importante differenza: il primo filtra un array e restituisce i valori filtrati in un nuovo array, mentre il secondo applica una funzione ad ogni elemento dell'array e restituisce un array modificato. Vediamo in dettaglio queste differenze.
$.grep()
La sintassi d'uso di questo metodo è la seguente:
$.grep(array, function(index, value) {
//...
});
Il primo parametro è l'array che vogliamo filtrare. index è l'indice numerico di ciascun elemento dell'array, mentre value è il valore di ciascun elemento.
$.map()
La sintassi d'uso di questo metodo è la seguente:
$.map(array, function(value, index) {
//...
});
Il primo parametro è l'array a cui vogliamo applicare una funzione su ciascuna voce. value è il valore di ciascun elemento nell'array, mentre index è il suo indice numerico.
Uso pratico
Abbiamo una lista non ordinata con varie voci. Ciascuna voce contiene un numero progressivo. Usando $.grep() possiamo ad esempio creare un nuovo array che contenga solo le voci con numeri pari:
var lis = $('#test li').get();
var grep = $.grep(lis, function(index, value) {
return (lis[value].firstChild.nodeValue % 2 == 0);
});
L'istruzione return serve in questo caso ad applicare il nostro filtro.
Se invece vogliamo modifcare l'array e restituire un array modificato, possiamo usare $.map(). Per esempio, possiamo sommare il numero contenuto in ciascuna voce all'indice numerico di ciascun elemento:
var map = $.map(lis, function(value, index) {
return ('<li>' + (new Number(value.firstChild.nodeValue) + index) + '</li>');
});
Come si può notare dai due esempi, i nuovi array saranno contenuti nelle variabili grep e map associate con i rispettivi metodi.