Array Methods in JavaScript: localeCompare() e sort() con esempi

booleanARRAY METHODS

ripasso sui metodi principali

Advanced JS: Ripasso Array Methods

Cosa sono gli Array Methods?

Un metodo è una funzione associata a un oggetto: in questo caso, l'array. Eh sì, tutto è un oggetto in JavaScript!

Qual è la cosa più importante da ricordare?

OGNI metodo restituisce un valore! Sapere cosa ritorna ci permette di usarli al massimo delle loro potenzialità.

Advanced JS: Ripasso Array Methods

Metodi Diretti

I metodi diretti sono Array Methods che lavorano direttamente sui valori o sulla struttura dell'array.

• Argomenti passati al metodo: valori, indici o array.
• Caratteristiche: aggiungono, rimuovono o combinano elementi.

Esempi comuni:

• push: Aggiunge uno o più elementi alla fine dell'array.
• pop: Rimuove e restituisce l'ultimo elemento.
• slice: Restituisce una porzione dell'array come nuovo array.
• concat: Combina due o più array in uno nuovo.

Advanced JS: Ripasso Array Methods

Metodi Funzionali

I metodi funzionali sono Array Methods che lavorano dinamicamente sugli elementi dell'array (tramite una callback function) Abbiamo già visto forEach, map, filter, find. Ripassino?

Advanced JS: Ripasso Array Methods

. forEach ( ) - Il lavoratore instancabile

COSA RITORNA? undefined. Non restituisce nulla di utile, serve solo per "fare cose". COSA FA? Per ogni elemento dell'array esegue la callback function passata come argomento.

1
const numeri = [1, 2, 3];
2
numeri . forEach ( numero => {
3
console . log ( numero) ;
4
}) ;
5
// Output: 1, 2, 3
6
/ / Ritorna: undefined

Advanced JS: Ripasso Array Methods

. map ( ) - Il trasformatore

COSA RITORNA? Array. Della stessa lunghezza dell'array di partenza. COSA FA? Applica una funzione a ogni elemento e crea un nuovo array con i risultati. La callback function ritorna un nuovo elemento.

1
const numeri = [1, 2, 3];
2
const doppi = numeri . map (numero => {
3
return numero * 2;
4
5
console. log(doppi) ; // Output: [2, 4, 6]
6
/ / Ritorna: un nuovo array
1

Advanced JS: Ripasso Array Methods

. filter () - Il selezionatore

COSA RITORNA? Array. Con lunghezza uguale o minore a quella dell'array di partenza. COSA FA? Filtra gli elementi che soddisfano una certa condizione e ritorna un nuovo array che li contiene. La callback function ritorna SEMPRE un booleano!

1
const numeri = [1, 2, 3, 4];
2
const pari = numeri. filter (numero => {
3
return numero % 2 === 0;
4
} ) ;
5
console. log(pari) ; // Output: [2, 4]
true: conserva
false: scarta
6
/ / Ritorna: un nuovo array

Advanced JS: Ripasso Array Methods

. find ( ) - Il cacciatore di tesori

COSA RITORNA? Primo elemento trovato. Ritorna undefined se nessun elemento soddisfa la condizione. COSA FA? Cerca il primo elemento che soddisfa una condizione dettata dalla callback function. La callback function ritorna SEMPRE un booleano!

1
const numeri = [1, 2, 3, 4];
2
const primoPari = numeri . find ( numero => {
true: conserva
3
return numero % 2 === 0;
false: scarta
4
} ) ;
5
console. log(primoPari) ; // Output: 2
6
/ / Ritorna: il primo elemento che soddisfa la condizione

Advanced JS: Ripasso Array Methods

Metodi Manipolativi

Sia i metodi diretti, sia i metodi funzionali possono essere considerati metodi manipolativi se modificano direttamente l'array originale.

Diretti manipolativi

• push -> Aggiunge elementi alla fine.
• splice -> Rimuove o aggiunge elementi.

Funzionali manipolativi

• sort -> Modifica l'ordine degli elementi.

Diretti NON manipolativi

• slice -> Crea una copia di una porzione dell'array.
• concat -> Combina array senza modificarli.

Funzionali NON manipolativi

• map -> Restituisce un nuovo array trasformato.
• filter -> Restituisce un nuovo array filtrato.

LIVE CODING

Snacks Array Methods Promise . all ( ) con .map ()

METODI AVANZATI

ma non per questo difficili

Advanced JS: Array Methods Avanzati

. some ( ) e . every ( ) - I valutatori

COSA RITORNANO? true o false.

• some ( ): COSA FA? Controlla se almeno un elemento soddisfa la condizione dettata dalla callback function.
• every (): COSA FA? Controlla se tutti gli elementi soddisfano la condizione dettata dalla callback function.

1
const numeri = [1, 2, 3];
2
console . log ( numeri . some ( num => num > 2) ) ; // true
3
console. log ( numeri .every (num => num > 2)); // false
O
Ci ricordiamo come funziona
l'arrow function?

Advanced JS: Array Methods Avanzati

. sort ( ) - Il riordinatore

COSA RITORNA? Array. Lo stesso array di partenza (riordinato). COSA FA? Ordina gli elementi dell'array in base alla logica dettata dalla callback function, che rappresenta una funzione di confronto. Se ritorna un numero < 0, a viene ordinato prima di b. Se ritorna un numero = 0, Na e b non cambiano posizione. Se ritorna un numero > 0, a viene ordinato dopo b. La callback function ritorna SEMPRE un numero.

1
const numeri = [3, 1, 4] ;
2
numeri . sort ( (a, b) => {
3
return b - a;
4
} ) ;
5
console. log (numeri) ; // Output: [4, 3, 1]
6
/ / Ritorna: l'array in ordine decrescente
Ma se non ho a che fare con
dei numeri?

Advanced JS: Array Methods Avanzati

localeCompare ( )

Il metodo delle stringhe localeCompare restituisce un numero intero che indica l'ordine tra due stringhe.

1
const a = "arancia" ;
2
const b = "banana" ;
3
a . localeCompare (b) ; // -1 (arancia viene prima)
4
a . localeCompare (a) ; // 0 (sono uguali)
5
b. localeCompare (a) ; // 1 (banana viene dopo)
Ma allora è perfetto da
usare con . sort ( ) !
Se ritorna -1:
· La stringa chiamante viene prima della
stringa passata come argomento.
Se ritorna 0:
· Le due stringhe sono uguali secondo le
regole di confronto.
Se ritorna 1:
· La stringa chiamante viene dopo la
stringa passata come argomento.

Advanced JS: Array Methods Avanzati

localeCompare ( ) in .sort ()

Utilizzare localeCompare in sort ( ) è perfetto per determinare l'ordine alfabetico.

NOW WE ARE TALKING

1
const frutti = [ 'banana' , 'arancia' , 'ciliegia' ] ;
2
frutti . sort( (a, b) => {
3
return b. localeCompare (a) ;
4
});
5 console. log (frutti) ;
6 / / Output: [ "ciliegia" , "banana", "arancia" ]
7 / / Ritorna: l'array in ordine decrescente
Ma se voglio ordinare un
array di oggetti?

Advanced JS: Array Methods Avanzati

.sort ( ) con Array di Oggetti

1
const persone = [
2
{ nome: 'Hyur', età: 29 } ,
3
{
nome: 'Mario', età: 33 } ,
4
{ nome: 'Luigi', età: 27 }
5
6
7
/ / Ordine alfabetico (nome) crescente
8
persone . sort ( (a, b) => a.nome. localeCompare (b. nome) ) ;
9
10
/ / Ordine numerico (età) decrescnete
11 persone. sort( (a, b) => b.età - a.età) ;
WAIT A MINUTE ....
THAT WAS SO EASY!

LIVE CODING

Snacks Array Methods Avanzati

Advanced JS: Array Methods Avanzati

. reduce ( ) - L'aggregatore

COSA RITORNA? Un valore. Qualsiasi tipo di dato è valido, anche oggetti complessi. COSA FA? Combina tutti gli elementi di un array in un unico valore, tramite la logica dettata dalla callback function.

1
1
const numeri = [1, 2, 3];
2
const somma = numeri . reduce ( (acc, numero) => {
return acc + numero;
3
4
}, 0 ) ;
5
console . log ( somma ) ; / / Output: 6
6
/ / Ritorna: un singolo valore
WAIT ...
WHAT?
quickmeme.com

Advanced JS: Array Methods Avanzati

. reduce ( ) - L'aggregatore

A differenza degli altri Array Methods, riceve due argomenti:

1. Callback Function chiamata reducer
2. Valore iniziale

O La prima iterazione è uguale a valoreIniziale.

• Accumulatore 7 Il risultato parziale che si aggiorna ad ogni iterazione.
• Elemento corrente L'elemento su cui si sta iterando.
• Indice (opzionale).
• Array originale (opzionale).

1
array . reduce ( (acc, curr, i, arr) => {
2
return acc + curr;
3
}, valoreIniziale) ;

Advanced JS: Array Methods Avanzati

Ogni Array Method è un . reduce ( )

Ogni Array Method è replicabile usando il . reduce ( ), perché permette di generare qualsiasi tipo di valore partendo da un array (anche un altro array).

HA UN'AURA POTENTISSIMA

1 const numeri = [1, 2, 3, 4];
1
// .map()
2
const doppi = numeri . reduce ( (acc, curr) => {
3
return [ ... acc, curr * 2] ;
4
}, [ ] ) ;
1
//.filter ( )
2
const doppi = numeri . reduce ( (acc, curr) => {
3
if (curr % 2 === 0) {
4
return [ ... acc, curr] ;
5
}else{
6
return acc;
7
}
8
}, []);

LIVE CODING

.reduce()

ESERCIZIO