Questa è la parte 6 della serie di post sul blog JavaScript che ti porterà da principiante ad avanzato. Alla fine di questa serie conoscerai tutte le basi necessarie per iniziare a programmare in JavaScript. Senza ulteriori indugi, iniziamo con il sesto tutorial.
Questo tutorial presuppone che tu abbia un ambiente di codifica già impostato. Se hai seguito i tutorial precedenti, dovresti già averlo aperto. Se per qualche motivo hai chiuso la tua configurazione, puoi trovare le istruzioni complete di configurazione nella Parte 4 di questa serie. In quel tutorial vediamo come impostare il tuo ambiente Snippets di Google Chrome per la codifica.
Se ti senti abbastanza a tuo agio nell’utilizzare Google Chrome, ecco un modo rapido per configurarti per questo tutorial, altrimenti puoi controllare la Parte 4 per l’intero set di istruzioni passo passo su come impostare il tuo ambiente di codifica.
Se sei su un Mac, la scorciatoia da tastiera per aprire la console è premere “Option + Command + J”, dopo aver aperto Chrome. Se stai utilizzando un dispositivo Windows, puoi utilizzare la scorciatoia da tastiera “Control + Shift + J” per aprire la Console JavaScript, una volta aperto Chrome. Oppure puoi anche andare al menu in alto e selezionare Visualizza -> Sviluppatore -> Console JavaScript. Una volta aperta la Console, puoi fare clic sulla scheda “Fonti”, che si trova proprio accanto a “Console”. Ora dovresti vedere Snippets. Puoi continuare a codificare in uno snippet che hai già iniziato a utilizzare in precedenza, oppure puoi creare un nuovo Snippet facendo clic sul pulsante “+ Nuovo snippet”. Finché hai un ambiente di codifica impostato per questo tutorial dove puoi esercitarti, sei a posto.
Gli array sono ampiamente utilizzati in molti linguaggi di programmazione e JavaScript non fa eccezione. E c’è un buon motivo. Ma potresti chiederti, cos’è un array per cominciare? Gli array sono essenzialmente una collezione di dati correlati che possono essere accessibili e manipolati con determinati metodi definiti. Vediamo alcuni esempi di un array per avere una comprensione più completa.
const numbersUntilTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const testAnswers = [true, true, false, false, true]; const pets = ["cani", "gatti", "uccelli", "pesci"];
Possiamo utilizzare un array java per memorizzare diversi tipi di dati. Ad esempio, nel codice sopra abbiamo memorizzato alcuni numeri, booleani e anche un tipo di dato stringa.
Possiamo creare un array java proprio come creiamo altre variabili, con le parole chiave const o let sul lato sinistro e i contenuti degli array sul lato destro delle equazioni. Una cosa a cui dovresti prestare attenzione è che quando creiamo array utilizziamo le parentesi quadre per racchiudere gli elementi, proprio come abbiamo fatto nel codice sopra. Separiamo anche ogni elemento con una virgola in mezzo, indipendentemente dal loro tipo di dato.
In questo tutorial scriveremo il codice in modo che tu possa copiare e incollare tutto in questo tutorial, in sequenza, o digitare tutto in uno snippet JavaScript in Chrome, e funzionerà come previsto a condizione che tu segua l’ordine. Ad esempio, ciò che questo significa per te è che, se definiamo una variabile con la parola chiave const una volta nel tutorial, normalmente non puoi definire un’altra variabile con lo stesso nome esatto di nuovo. Ecco perché se intendi copiare e incollare parzialmente parte del codice, è una buona idea assicurarti di definire anche quelle variabili nel tuo codice. Questo non dovrebbe essere un problema se segui il tutorial nell’ordine in cui è presentato.
Una delle prime cose che dovresti sapere su un array java è che, una volta creato un array, devi accedere ai suoi elementi. Gli array hanno qualcosa chiamato “indici numerati”, e ciò che questo significa per te nella pratica è che ogni elemento che crei in JavaScript ha un numero associato da sinistra a destra, da zero alla lunghezza dell’array java meno uno.
Ad esempio, nel codice sopra per gli animali domestici, possiamo accedere al primo elemento di “cani” scrivendo il nome della variabile, aprendo le parentesi quadre, inserendo l’indice dell’elemento che vogliamo accedere e chiudendo la parentesi quadra:
alert(pets[0]);
Allo stesso modo, inserendo numeri più alti verranno visualizzati altri elementi nella finestra di avviso che stiamo mostrando.
alert(pets[1]); alert(pets[2]); alert(pets[3]);
Poiché abbiamo 4 elementi nell’array degli animali domestici, e abbiamo iniziato gli indici da 0, l’ultimo elemento dell’array è accessibile con pets[3], che è 1 in meno della lunghezza totale dell’array. A questo punto potresti chiederti, ora che possiamo creare un array e accedere a un elemento di quell’array, come possiamo apportare modifiche a quell’array? Come possiamo aggiungere nuovi elementi, cambiare elementi esistenti o eliminare elementi? Bene, procediamo passo dopo passo e iniziamo con l’aggiunta di nuovi elementi a un array.
Ci sono più modi per aggiungere diversi elementi a un array. Se sappiamo che vogliamo aggiungere il nuovo elemento alla fine dell’array, possiamo utilizzare il metodo “push”. Questo è anche chiamato spingere un nuovo elemento nell’array. Nota che l’elemento spinto arriverà alla fine dell’array. Ad esempio:
pets.push("serpenti"); // verifichiamo di avere serpenti come ultimo elemento // visualizzando i contenuti dell'array alert(pets);
Se sappiamo che vogliamo specificamente aggiungere un elemento all’array java come primo elemento, possiamo utilizzare la parola chiave “unshift”. Vediamo un esempio:
//eseguire questo codice sposterà tutti i valori // da un lato e aggiungerà il primo animale domestico di drago pets.unshift(“draghi”); //verifichiamo questo visualizzando i contenuti dell'array alert(pets);
È fantastico che possiamo aggiungere elementi alla fine dell’array o all’inizio dell’array, ma cosa succede se per qualche motivo voglio iniettare elementi nell’array in posizioni specifiche. Diciamo che voglio aggiungere tartarughe alla terza posizione. È anche possibile? Sì, lo è. Per iniettare un elemento in un array possiamo definirlo proprio come creiamo quella parte dell’array e assegnando un valore alla parte specifica dell’array. Non dimenticare di utilizzare i valori degli indici mentre inserisci i valori. Da un punto di vista pratico, appare così:
pets[2] = "tartarughe"; // verifichiamo di avere tartarughe come terzo elemento // visualizzando i contenuti dell'array alert(pets);
Come puoi vedere, con il metodo pop, abbiamo rimosso l’ultimo elemento degli animali domestici, i serpenti, dal nostro array di animali domestici.
Un altro modo per rimuovere elementi da un array java è utilizzare la parola chiave “shift”. Quando utilizziamo shift, il primo elemento verrà eliminato e il resto dei valori degli indici si adatterà a loro. Ad esempio:
// questo eliminerà il primo elemento // e sposterà gli altri elementi nei loro nuovi valori di indice // che saranno uno in meno rispetto ai valori di indice precedenti pets.shift(); // verifichiamo anche questo visualizzando l'array alert(pets);
Il nome “shift” deriva effettivamente da come funziona l’allocazione della memoria nella memoria del computer. Quindi, se all’inizio sembra relativamente poco intuitivo, va benissimo. Per ora dovresti sapere che, utilizzando il metodo shift, possiamo rimuovere il primo elemento da un array.
Quando trattiamo con gli array nella vita reale, ci possono essere molte volte in cui vogliamo contare il numero di elementi dell’array. Questo può essere necessario in una varietà di situazioni, comprese le liste di cose da fare, le liste di partecipanti a scuola o al lavoro, e così via. Per ottenere proprio questo, abbiamo una proprietà array incorporata chiamata “length” e ci dirà la lunghezza totale dell’array. Ad esempio:
alert(pets.length);
Ordinare gli array è un’operazione piuttosto comune in JavaScript. Ci sono diverse implementazioni specifiche per ordinare gli elementi in JavaScript. Queste implementazioni specifiche in generale sono chiamate algoritmi di ordinamento. Diversi algoritmi di ordinamento possono portare a vantaggi e svantaggi diversi. Ad esempio, un algoritmo di ordinamento potrebbe essere scelto rispetto a un altro perché è semplicemente molto più facile da implementare nel codice, rispetto a un altro, anche se potrebbero mostrare prestazioni leggermente migliori. Potresti aver sentito parlare di diversi algoritmi di ordinamento per prestazioni ottimizzate. In questo tutorial utilizzeremo il metodo di ordinamento incorporato fornito da JavaScript. Ordinare è un problema piuttosto comune, specialmente nello sviluppo web. Ad esempio, se stai costruendo un sito web di e-commerce, devi implementare diverse situazioni di ordinamento tra cui scegliere per i tuoi utenti. Anche se non ci sono regole rigide su quali opzioni e capacità dovresti fornire al tuo pubblico, ci sono standard piuttosto comuni che ci si aspetta da te come costruttore di siti web. Ad esempio, come utente, c’è una grande possibilità che tu voglia elencare alcuni articoli del negozio sia in ordine di prezzo crescente che decrescente. Quando implementi l’ordinamento per quei compiti, dovresti tenere a mente come implementarlo dato che l’utente può anche limitare i risultati della ricerca a determinate altre categorie, come t-shirt, cappelli, borse e così via. Possiamo ordinare un array aggiungendo “.sort()” alla fine di esso.
pets.sort(); alert(pets);
Poiché abbiamo ordinato l’array nel passaggio precedente, puoi vedere che ora abbiamo un array che è sia ordinato che invertito.
Quando lavoriamo con gli array, JavaScript ci fornisce un modo conveniente per scorrere gli elementi dell’array con “.forEach()”. Se lo desideriamo, possiamo comunque utilizzare un normale ciclo for per scorrere un array. Infatti, vediamo prima come costruire un ciclo for per scorrere un array, poi vedremo come utilizzare forEach().
// questo ci avviserà 4 volte di dare da mangiare al nostro animale domestico for (let a = 0; a < pets.length; a++) { alert("È ora di dare da mangiare al mio animale domestico"); }
Possiamo anche ottenere lo stesso risultato utilizzando forEach.
pets.forEach(alert("È ora di dare da mangiare al mio animale domestico"));
Quando confrontiamo l’uso dei cicli for o di For each, a seconda delle tue preferenze e della tua situazione specifica, potresti preferire utilizzare uno rispetto all’altro. In sostanza, entrambi ottengono gli stessi risultati con stili diversi nel codice. ForEach può essere relativamente più facile e farti risparmiare una riga di codice da leggere e scrivere, ma alla fine sarà una tua scelta. Non devi prendere una tale decisione in questo momento e attenerci. Mentre scrivi codice, puoi sperimentare nel risolvere lo stesso problema utilizzando approcci diversi mentre ti muovi nel tuo percorso di programmazione.
Possiamo anche controllare se un elemento esiste all’interno di un array java. Un esempio di un uso reale di questo metodo sarebbe se un evento privato include il nome di una persona nella lista degli inviti. L’implementazione effettiva è piuttosto semplice. Scriviamo prima il nome dell’array, in questo caso stiamo lavorando con l’array degli animali domestici. Poi mettiamo un punto, per accedere a diverse proprietà e metodi dell’array, poi scriviamo “includes”, poi apriamo e chiudiamo le parentesi, e digitiamo il nome dell’elemento che vogliamo controllare all’interno. Ecco un esempio che controlla un elemento di cui sappiamo che esiste nell’array:
alert(pets.includes("cani"));
Se proviamo anche la stessa cosa con un elemento di cui sappiamo che non esiste nell’array java, ci aspettiamo di ricevere false come risposta. Vediamo anche quel caso con un esempio:
alert(pets.includes("cucciolo")); [/code>Poiché non avevamo cuccioli nell’array degli animali domestici, otteniamo false come ci aspettavamo. Nel prossimo tutorial vedremo un altro concetto importante sia nel mondo della programmazione che in JavaScript.
Esperto di JavaScript e istruttore che forma i dipartimenti IT. Il suo obiettivo principale è aumentare la produttività del team insegnando agli altri come cooperare efficacemente durante la programmazione.
Ogni Artefatto Scrum crea un certo impegno del Team Scrum. L'Obiettivo del Prodotto, l'Obiettivo dello…
Nome, logo e slogan formano la “santa trinità” dell'identità del marchio. Sono gli elementi più…
Cosa sono l'offshoring e l'inshoring? I cambiamenti dinamici nell'economia mondiale e i processi di globalizzazione…
I leader di team di solito diventano (o almeno dovrebbero diventare) persone che hanno abilità…
Questo è il settimo capitolo della serie di post sul blog di JavaScript che ti…
Cos'è Agile? Come utilizzare la metodologia Agile per progetti freelance? Leggi l'articolo per saperne di…