Approfondire gli Array

In questo video parleremo in maniera più approfondita degli array di JavaScript ed in particolar modo vedremo una parte dei metodi built-in dell'oggetto Array.
Per capire appieno quello di cui parleremo, prima di guardare questo video, raccomando di guardare il video sez2/11 che introduce agli array.
In questo video andremo a descrivere con un esempio, l'uso di molti metodi utilissimi quando si lavora con gli array, ma che spesso gli sviluppatori non conoscono o hanno difficoltà ad implementare.
Vedremo i seguenti metodi built-in:

  • join() per unire tutti gli elementi e ritornare una stringa con essi
  • includes(), indexOf(), lastIndexOf() per controllare se in un array é presente un determinato valore
  • reverse() per invertire l'ordine degli elementi
  • every(), some() per eseguire un test su tutti gli elementi dell'array
  • find(), findIndex() un'altra maniera per controllare se in un array é presente un determinato valore
  • filter() per filtrare gli elementi in base a determinati parametri
  • map() per eseguire un azione su tutti gli elementi
  • reduce(), reduceRight() per ridurre tutti gli elementi di un array ad un solo valore
Trascrizione: (click per espandere)
salve a tutti in questo video parlerò
degli array sarà un video di
approfondimento perché ho già introdotto
gli array
nel video della sezione 2/11 però
siccome mi avete chiesto di parlare un
po' più in profondità andiamo a vedere
qualche metodo in più dell'oggetto al
array
vi invito a guardare il video 2/11 prima
di guardare questo video altrimenti
potreste non capire tutto quello che
vi vado a dire allora se avete già
visto di quei video sugli array, sapete
già in cosa consiste la proprietà
length e come funzionano i metodi
isArray, push, pop, unshift, shift, foreach e
concat, splice, sort e poi in altri video
ho introdotto il: from e entries e poi
anche l'operatore spread/rest e il
ciclo for e for..of e in descrizione
comunque vi mette tutti link verso
questi video e andiamo a parlare di
questi altri metodi dell'oggetto array che
non sono molto conosciuti o molto usati
però possono essere molto
utili
allora c'è il metodo join intanto io
creo un array e lo chiamò array1 ci
metto dentro un paio di stringhe e
andiamo a vedere il metodo join mi ritorna una stringa che compatta tutti gli
elementi del mio array quindi se io
adesso faccio a array1 punto join e qui
vado a specificare come voglio che
vengano separati gli elementi della mia
stringa ad esempio se io lascio uno
spazio bianco
voglio che tutti gli elementi vengono
compattati con uno spazio bianco
eccolo qui questa è una stringa
con gli elementi separati da uno spazio
bianco
avrei potuto mettere un underscore o
avrei potuto mettere qualsiasi altro
elemento come questo qui è come vedete
gli elementi sono separati in base a
quello che voglio io
poi andiamo a vedere il metodo includes
il metodo include è stato introdotto con
ECMAScript 7 quindi probabile che
browser non troppo nuovi non supportino
questo metodo è questo metodo mi
ritorna un valore booleano vero falso in
base all'elemento che io voglio che vada a
cercare dentro l'array è presente oppure
no quindi andiamo a vedere ad esempio
allora array1 includes
io dico che voglio cercare la parola a
tutti la parola a tutti è presente e
quindi mi dice è vero se io cercavo
tutti 1 e diceva falso perché questa
stringa non e' presente dentro il mio
array andiamo a vedere un altro metodo
il metodo indexOf allora array1 indexOf
il metodo indexOf mi ritorna l'indice
dell'elemento che vado a cercare se
l'elemento è presente mi ritorna l'indice
se l'elemento non è presente mi ritorna
-1 quindi io per esempio vado a
cercare la parola ancora vado a cercare
la parola a tutti e mi ritorna indice
due perché se vi ricordate gli elementi
cominciano da zero uno e due
esiste anche lastIndexOf è
praticamente mi ritorna l'ultima
l'indice dell'ultimo elemento che
corrisponde alla mia ricerca quindi se
io adesso vado a cercare la per esempio
la stringa "a" lui mi dice che in posizioni
1 però se io ho un'altra stringa "a" qui
scusate questo lastIndexOf mi dice che
in posizione 3 quindi mi riporta
l'ultimo elemento che corrisponde alla
mia ricerca
infine c'è il metodo reverse
array1 reverse che mi ritorna il mio
array invertito e come vedete
anzi questo qua posso cancellarlo
tutti a ciao
adesso andiamo a vedere altri metodi un
po' più
complicati diciamo non complicati pero'
non così intuitivi il metodo every e
some allora creo un'altro array qui
mettiamo let array2 e ci metto
dentro un po' di numeri facciamo 10 poi
facciamo il 20 poi 30 poi 50 poi 70 poi
90
allora adesso io dico vado usare il
metodo every il metodo every mi ritorna
un booleano e praticamente io vado a
eseguire un'operazione su tutti gli
elementi del mio array e se questa
operazione ritorna vero per tutti gli
elementi dell'array il metodo mi
ritornerà vero altrimenti mi ritorna falso
andiamo a vedere subito allora mettiamo
un risultato 1 allora array2
e questo metodo every accetta una call
back che.. anzi
facciamo una roba del genere scriviamo
prima qui e poi come la faccia vedere
allora io dico che valore ritorno valore
maggiore di 100 anzi facciamo minore
dicendo allora questa è una mia funzione
che vado ad eseguire per ogni elemento
del mio array quindi il valore sarà
l'elemento e se ogni elemento sarà
minore di cento alla fine il metodo every
mi ritornerà vero quindi come faccio
a passare questa funzione
la chiamo ricerca
facciamo ricerca la passo dentro al mio
every come call back e andiamo a vedere
il risultato
adesso andiamo a fare il printing del
mio risultato 1 e lui mi dice è vero
perché tutti gli elementi del mio array
sono minori di 100 se avessi messo
maggiore di 100
come vedete falso vi ricordo che le
callback io posso mettere direttamente
anche dentro al mio metodo in
questa maniera qui e posso usare anche
la "fat arrow" come si suol dire dove io
vado a scrivere in maniera molto
succinta la funzione in questa maniera
sarà se io vado a rivedere come vedete
il risultato è falso perché appunto non
ho valori minori più grandi di cento
se era minore di cento vero se io
poi qui mettevo 120 questo è ancora
falso perché tutti gli elementi quindi
da qui every tutti gli elementi devono
essere minori di cento come potete
intuire il metodo some funziona che mi
ritorna vero anche se solo uno di
quegli elementi e' minore di cento quindi
faccio così ecco qui e come vedete mi
ritorno a vero perché almeno uno di
questi elementi è minore di cento
comunque se non vi ricordate come
funzionale le "fat arrow"
vi metto sempre il link in descrizione
andiamo a vedere adesso il metodo find
il metodo find mi ritorna l'elemento o
se uso findIndex mi ritorna l'indice
di un elemento che vado a cercare sempre usando una callback quindi metto
risultato 3 sempre a array2 find e qui
ci metto sempre dentro la mia callback
il valore e qui faccio ritorna per
esempio io vado a cercare un pò il
valore che sia uguale a anzi facciamo il
valore maggiore di 100 ancora così
andiamo a vedere qui dopo vado a fare il
console log risultato 3 e come vedete
l'unico valore maggiore di cento era il
120 e quindi mi ritorna i 120
se vado a usare il findIndex risultato
4 lo chiamo ritorna index 6 perché è
il mio elemento all'indice numero 6
perché ancora 0 1 2 3 4 5 6
andiamo a vedere il metodo filter il
metodo filter mi ritorna una array con
alcuni elementi della array iniziale
quelli tutti quelli che hanno passato il
test eseguito sempre dalla mia
callback andiamo a vedere let risultato 5
ancora array2 abbiamo detto filter
come possiamo sempre un valore
ecco qui ritorna andiamo a vedere sempre
valore maggiore di 100
magari ci mettiamo altri 2 valori
va 200 ok e poi andiamo a fare il
console log un risultato 5
come vedete mi è ritornato in una array
filtrato con solo i valori che passano
il mio test che il
valore dovesse essere maggiore di 100 e
come vedete io ho un array con due valori
120 e 200 andiamo a vedere il metodo map il metodo map va a eseguire
l'operazione
un'operazione per ogni elemento del mio
del mio array andiamo a vedere allora
array2 map
ok allora ritorno e faccio valore
moltiplicato 2
quindi io vado a moltiplicare per due
tutti gli elementi del mio array e vado
a costruirmi un altro con questi
elementi moltiplicati per due andiamo a
vedere risultato 6
ecco come vedete tutti gli elementi sono
stati moltiplicati per due se io mettevo
per venti le mi trovavo tutti valori
moltiplicati per 20 infine vediamo i
metodi reduce e reduceRight allora
reduce lo chiamo risultato 7 mi va a
compattare tutti gli elementi del mio
array finché non ne rimane solo uno
andiamo a vedere allora array2
anche qui una call back che accetta due
valori malore uno è un valore 2 e
ritorna valore uno meno valore due e
poi andiamo a fare il printing risultato 7
allora cosa vado a fare qui io vado a
prendere il valore 1 del mio array e
vado a sottrarlo al valore 2 poi il
risultato lo vado a sottrarre al valore
3 poi risultato lo vado a sottrarre
al valore 4 e via così finché ho finito
tutto il mio array e mi rimane un solo
valore andiamo a vedere
come vedete mi viene fuori
-570 il reduceRight funziona
all'inverso invece di partire dalla
sinistra del mio array quindi
dall'elemento 0 e poi va verso destra
parte dalla destra del mio array e va verso
sinistra
facciamo lo stesso identico lavoro però
utilizzando reduceRight
come vedete un risultato diverso perché
sono partito a sottrarre con un numero
più grande e quindi mi troverò un
risultato diverso
con questo video più tutti gli altri
praticamente ho coperto il 90 per cento
delle dei metodi delle proprietà della
array quindi avete delle buone basi solide
su come funzionano gli array
quindi io penso che potete andare alla
grande
vi metto tutto il link in descrezione che
vi servono per tutti i video dove
trovate tutte le altre informazioni
e con questo è tutto ci sentiamo la
prossima ciao
File del video: