Oggetti JavaScript
In JavaScript, gli object sono contenitori per raccogliere dati con chiave e entità più complesse. Pensa a loro come una scatola con scomparti.
Introduzione agli object JavaScript
In JavaScript, gli object sono elementi fondamentali che aiutano a organizzare e memorizzare i dati. Immagina un object JavaScript come una scatola speciale in cui puoi conservare vari elementi. Ogni elemento all'interno di questa scatola è conservato in un piccolo scomparto etichettato con un nome (chiamiamo questo il nome della proprietà), e l'elemento stesso è il valore. A differenza dei tipi di dati primitivi (come numeri e stringhe), un object è un tipo di riferimento che può raggruppare molti valori correlati. Ad esempio, se abbiamo una scatola che rappresenta un libro, potrebbe avere scomparti etichettati "title," "author" e "number of pages," con ogni scomparto che contiene le rispettive informazioni sul libro.
Creare object
Usare i letterali di object
Questo è un metodo semplice in cui si definisce direttamente l'object e le sue proprietà usando le parentesi graffe {}:
In questo esempio, user è un object con due proprietà: name e age. Puoi vedere immediatamente cosa contiene l'object, rendendo questo metodo molto trasparente e facile da usare.
Usare la sintassi new Object()
In alternativa, puoi partire da un object vuoto e aggiungere proprietà una alla volta:
Questo metodo prevede prima la creazione di un object vuoto (user) e poi l'aggiunta di proprietà (name e age). È utile quando le proprietà dell'object dipendono da una logica condizionale o quando le proprietà vengono determinate in fase di esecuzione.
Abbreviazione di proprietà e metodi
Quando il nome di una variabile coincide con il nome della proprietà che vuoi usare, puoi evitare la ripetizione con la abbreviazione del valore della proprietà. Anche i metodi hanno una sintassi più breve — puoi omettere la parte : function:
name equivale a scrivere name: name, e greet() {} equivale a greet: function() {}. Entrambe le forme mantengono i letterali di object concisi.
Nomi di proprietà calcolati
I nomi delle proprietà non devono essere hardcoded. Racchiudendo un'espressione tra parentesi quadre [...] all'interno del letterale, si calcola la chiave in fase di esecuzione:
Questo è particolarmente utile quando il nome della proprietà proviene dall'input dell'utente, da un argomento di una funzione o da una costante definita altrove.
Object annidati
Il valore di una proprietà può essere un altro object, il che consente di modellare dati strutturati e gerarchici. Accedi ai valori profondi concatenando la notazione con punto o con parentesi quadre:
Ogni livello è semplicemente un altro object, quindi le stesse regole di accesso si applicano a tutti i livelli.
Perché gli object sono importanti?
Ora che abbiamo introdotto gli object JavaScript, potresti chiederti quale sia la loro importanza pratica. Esploriamo perché padroneggiare gli object JavaScript è essenziale per chiunque inizi il proprio percorso nello sviluppo web.
- Organizzazione: Gli object ti aiutano a tenere insieme i dati correlati, rendendo il codice più pulito e facile da capire. Invece di avere molte variabili separate, puoi raggruppare i dati correlati in un unico object.
Questo object book mantiene tutte le informazioni correlate sul libro organizzate ordinatamente sotto un'unica variabile.
- Riutilizzabilità: Una volta creato un object, puoi riutilizzarlo in tutto il codice. Questo semplifica la gestione di dati e funzionalità comuni.
L'object user può essere passato a diverse funzioni come displayUserInfo senza dover ridefinire le informazioni dell'utente.
- Flessibilità: Gli object in JavaScript sono molto flessibili. Puoi aggiungere nuove proprietà, modificare i valori di proprietà esistenti o eliminare proprietà in base alle esigenze.
- Funzionalità: Gli object possono contenere anche funzioni. Queste funzioni (note come metodi) possono eseguire azioni utilizzando i dati contenuti nell'object.
L'object person ha un metodo greeting che utilizza i propri dati per produrre un saluto. Potresti chiederti della parola chiave this in questo esempio; puoi trovare maggiori informazioni nel nostro articolo sulla parola chiave this in JavaScript.
- Prototype: Ogni object JavaScript ha un prototype. Un prototype è un object modello da cui l'object eredita metodi e proprietà. Questo consente modelli di ereditarietà potenti.
Qui, dog eredita da animal, quindi ha accesso alla proprietà isAlive definita in animal, oltre al proprio metodo bark.
Accedere e modificare le proprietà
Gli object ti consentono di accedere e modificare le loro proprietà tramite la notazione con punto o la notazione con parentesi quadre.
Accedere alle proprietà
user.name accede alla proprietà name usando la notazione con punto, che è semplice e facile da leggere. user["age"] usa la notazione con parentesi quadre, utile quando il nome della proprietà è memorizzato in una variabile o non è un identificatore valido.
Puoi anche recuperare tutte le chiavi o i valori di un object usando Object.keys() e Object.values():
Questi metodi sono utili per iterare sulle proprietà di un object o per convertirle in array. Per un'analisi più approfondita dell'estrazione dei dati, incluso Object.entries(), consulta Object.keys, values, entries.
Verificare se una proprietà esiste
Per verificare se una proprietà esiste, usa l'operatore in. È più affidabile del confronto con undefined, perché una proprietà può legittimamente contenere il valore undefined:
L'operatore in restituisce true ogni volta che la chiave è presente, anche se il suo valore è undefined. Il controllo === undefined non può distinguere una proprietà mancante da una che è stata impostata esplicitamente su undefined.
Modificare le proprietà
Puoi anche cambiare le proprietà di un object o aggiungerne di nuove:
L'esempio mostra l'aggiunta di una nuova proprietà boolean (isAdmin), la modifica del valore di una proprietà esistente (name) e l'eliminazione di una proprietà (age). Questo dimostra la natura mutabile degli object JavaScript.
Let vs Const con gli object
Let
Usare let consente la riassegnazione dell'object a un nuovo object. Questa flessibilità è utile quando l'intero object deve essere sostituito.
Const
Con const, puoi modificare le proprietà dell'object ma non puoi assegnare un nuovo object alla variabile. Questo garantisce che il riferimento all'object rimanga costante.
Destrutturazione di object e operatore rest
Destrutturazione
La destrutturazione ti consente di estrarre proprietà da un object in variabili separate:
Questa sintassi estrae le proprietà firstName, lastName e age dall'object person in variabili individuali, semplificando l'accesso a queste proprietà.
Operatore rest
L'operatore rest (...) viene usato per raccogliere le proprietà rimanenti che non sono state estratte:
Dopo aver estratto age, l'operatore rest raccoglie le proprietà rimanenti in un nuovo object nameDetails, che include solo firstName e lastName.
Attributi di proprietà avanzati e metodi
Getter e Setter
I getter e i setter sono funzioni che controllano come si accede e si impostano le proprietà di un object:
La proprietà fullName è controllata da un getter e da un setter. Il getter restituisce il nome completo combinando firstName e lastName. Il setter prende un nome completo, lo divide in due parti e le assegna rispettivamente a firstName e lastName.
Oltre ai getter e ai setter, ogni proprietà ha anche attributi nascosti come writable, enumerable e configurable. Per scoprire come ispezionarli e regolarli, consulta Flag e descrittori di proprietà.
Conclusione
Gli object JavaScript forniscono un modo strutturato, efficiente e potente per gestire e manipolare i dati, essenziale per creare applicazioni web interattive e dinamiche. Capire come utilizzare efficacemente gli object è fondamentale per chiunque voglia avanzare nelle proprie competenze JavaScript.