Articolo originale: JavaScript Object Keys Tutorial – How to Use a JS Key-Value Pair
In JavaScript, è possibile raggruppare insieme dei dati in una singola struttura di dati usando un oggetto, in questo modo:
const desk = {
height: "4 feet",
weight: "30 pounds",
color: "brown",
material: "wood",
};
Un oggetto contiene proprietà, o coppie chiave-valore. L'oggetto desk
qui sopra ha quattro proprietà. Ognuna di esse ha un nome, anche detto chiave, e un valore corrispondente.
Ad esempio, la chiave height
ha il valore "4 feet"
. Insieme, la chiave e il valore costituiscono una singola proprietà.
height: "4 feet",
L'oggetto desk
contiene dei dati riguardo a una scrivania. Questa è una ragione per utilizzare un oggetto JavaScript: conservare dati. È anche semplice recuperare i dati archiviati in un oggetto. Questo aspetto rende gli oggetti molto utili.
In questo articolo sugli oggetti JavaScript imparerai:
- come creare un oggetto
- come salvare dei dati in un oggetto
- e come recuperare i dati inseriti.
Iniziamo creando un oggetto!
Come creare un oggetto in JavaScript
Di seguito, ho creato un oggetto chiamato pizza
, a cui ho aggiunto delle coppie chiave-valore.
const pizza = {
topping: "cheese",
sauce: "marinara",
size: "small"
};
Le chiavi sono a sinistra dei due punti :
e i valori sono sulla destra. Ogni coppia chiave-valore è una proprietà. In questo esempio ci sono tre proprietà:
- La chiave topping ha il valore “cheese”.
- La chiave sauce ha il valore “marinara”.
- La chiave size ha il valore “small”.
Ogni proprietà è separata da una virgola. Nel complesso, tutte le proprietà sono racchiuse tra parentesi graffe.
Questa è la sintassi di base degli oggetti. Ma ci sono alcune regole da tenere a mente quando si creano degli oggetti in JavaScript.
Chiavi degli oggetti JavaScript
Ogni chiave di un oggetto JavaScript deve essere una stringa, un simbolo o un numero.
Guarda con attenzione il seguente esempio. I nomi delle chiavi 1
e 2
in realtà vengono "convertiti" (tramite coercizione) in stringhe.
const shoppingCart = {
1: "apple",
2: "oranges"
};
La differenza risulta chiara stampando l'oggetto sulla console.
console.log(shoppingCart);
//Risultato: { '1': 'apple', '2': 'oranges' }
Esiste un'altra regola da tenere a mente riguardo ai nomi delle chiavi: se il nome contiene degli spazi occorre racchiuderlo tra virgolette.
Dai un'occhiata all'oggetto programmer
qui sotto. Nota il nome dell'ultima chiave, "current project name"
. Contiene degli spazi, quindi va racchiuso tra virgolette.
const programmer = {
firstname: "Phil",
age: 21,
backendDeveloper: true,
languages: ["Python", "JavaScript", "Java", "C++"],
"current project name": "The Amazing App"
};
Valori degli oggetti JavaScript
Un valore, d'altro canto, può essere un qualsiasi tipo di dato, compresi array, numeri o booleani. L'esempio qui sopra contiene valori di tipo stringa, intero, booleano e array.
Puoi anche usare una funzione come valore. In tal caso viene detta metodo. Un esempio è sounds()
, nel seguente oggetto.
const animal = {
type: "cat",
name: "kitty",
sounds() { console.log("meow meow") }
};
Ora diciamo che vuoi aggiungere o eliminare una coppia chiave-valore, o semplicemente recuperare il valore di un oggetto.
Puoi farlo usando la notazione con punto (dot notation) o con parentesi (bracket notation), di cui ci occuperemo adesso.
Come funzionano le notazioni con punto e parentesi in JavaScript
La notazione con punto e quella con parentesi sono due modi per accedere e utilizzare le proprietà di un oggetto. Probabilmente ti troverai a usare più spesso la notazione con punto, quindi partiamo da questa.
Come aggiungere una coppia chiave-valore con la notazione con punto in JavaScript
Qui sotto ho creato un oggetto book
vuoto.
const book = {};
Per aggiungere una coppia chiave-valore usando la notazione con punto, usa la sintassi:
nomeOggetto.nomeChiave = valore
Questo è il codice per aggiungere la chiave (author) e il valore ("Jane Smith") all'oggetto book
:
book.author = "Jane Smith";
Ecco un'analisi del codice qui sopra:
book
è il nome dell'oggetto.
(punto)author
è il nome della chiave=
(uguale)"Jane Smith"
è il valore
Quando stampiamo l'oggetto vedremo la coppia chiave-valore appena aggiunta.
console.log(book);
//Risultato: { author: 'Jane Smith' }
Aggiungiamo un'altra coppia chiave-valore all'oggetto book
.
book.publicationYear = 2006;
Ora l'oggetto book
ha due proprietà.
console.log(book);
//Risultato: { author: 'Jane Smith', publicationYear: 2006 }
Come accedere ai dati di un oggetto JavaScript usando la notazione con punto
Puoi usare la notazione con punto su una chiave per accedere al relativo valore.
Considera l'oggetto basketballPlayer
.
const basketballPlayer = {
name: "James",
averagePointsPerGame: 20,
height: "6 feet, 2 inches",
position: "shooting guard"
};
Diciamo che vuoi recuperare il valore “shooting guard”
. Questa è la sintassi da usare:
nomeOggetto.nomeChiave
Usiamo questa sintassi per ottenere e stampare il valore "shooting guard".
console.log(basketballPlayer.position);
//Risultato: shooting guard
Ecco un'analisi del codice qui sopra:
basketballPlayer
è il nome dell'oggetto.
(punto)position
è il nome della chiave
Ecco un altro esempio.
console.log(basketballPlayer.name);
//Risultato: James
Come eliminare una coppia chiave-valore in JavaScript
Per eliminare una coppia chiave-valore utilizza l'operatore delete
con la seguente sintassi:
delete nomeOggetto.nomeChiave
Quindi per cancellare la chiave height
e il suo valore dall'oggetto basketballPlayer
dovrai scrivere il seguente codice:
delete basketballPlayer.height;
Di conseguenza, l'oggetto basketballPlayer
adesso ha tre coppie chiave-valore.
console.log(basketballPlayer);
//Risultato: { name: 'James', averagePointsPerGame: 20, position: 'shooting guard' }
Probabilmente ti troverai a usare frequentemente la notazione con punto, anche se ci sono alcuni requisiti a cui prestare attenzione.
Quando utilizzi la notazione con punto, i nomi delle chiavi non possono contenere spazi, trattini o iniziare con un numero.
Ad esempio, se proviamo ad aggiungere una chiave che contiene spazi con la notazione con punto, otteniamo un errore.
basketballPlayer.shooting percentage = "75%";
//Errore
Quindi questa notazione non funziona in ogni situazione. Ecco perché c'è un'altra opzione: la notazione con parentesi.
Come aggiungere una coppia chiave-valore usando la notazione con parentesi in JavaScript
Puoi usare anche la notazione con parentesi per aggiungere una coppia chiave-valore a un oggetto.
La notazione con parentesi offre più flessibilità, visto che i nomi delle chiavi possono includere spazi e trattini e possono iniziare con numeri.
Qui sotto ho creato un oggetto employee
.
const employee = {};
Adesso aggiungo una coppia chiave-valore usando la notazione con parentesi. Ecco la sintassi:
nomeOggetto[“nomeChiave”] = valore
Ed ecco come aggiungere la chiave occupation
e il valore "sales"
all'oggetto employee
:
employee["occupation"] = "sales";
Di seguito, un'analisi del codice qui sopra:
employee
è il nome dell'oggetto"occupation"
è il nome della chiave=
(uguale)"sales"
è il valore
Qui sotto ci sono altri esempi della flessibilità della notazione con parentesi per aggiungere una serie di coppie chiave-valore.
//Aggiungere chiavi composte da più parole
employee["travels frequently"] = true;
//Aggiungere chiavi che iniziano con un numero e contengono trattini
employee["1st-territory"] = "Chicago";
//Aggiungere chiavi che iniziano con un numero
employee["25"] = "total customers";
Quando stampiamo l'oggetto employee
, otteniamo:
{
'25': 'total customers',
occupation: 'sales',
'travels frequently': true,
'1st-territory': 'Chicago'
}
Sapendo questo possiamo aggiungere la chiave “shooting percentage”
all'oggetto basketballPlayer
precedente.
const basketballPlayer = {
name: "James",
averagePointsPerGame: 20,
height: "6 feet, 2 inches",
position: "shooting guard"
};
Se ricordi, la notazione con punto ci ha lasciati con un errore quando abbiamo provato ad aggiungere una chiave che include spazi.
basketballPlayer.shooting percentage = "75%";
//Errore
Ma la notazione con parentesi non ci dà alcun errore, come puoi vedere qui:
basketballPlayer["shooting percentage"] = "75%";
Questo è il risultato che otteniamo stampando l'oggetto:
{
name: 'James',
averagePointsPerGame: 20,
height: '6 feet, 2 inches',
position: 'shooting guard',
'shooting percentage': '75%'
}
Come accedere ai dati di un oggetto JavaScript usando la notazione con parentesi
Puoi usare anche la notazione con parentesi su una chiave per accedere al valore relativo.
Recuperiamo l'oggetto animal
dall'inizio dell'articolo.
const animal = {
type: "cat",
name: "kitty",
sounds() { console.log("meow meow") }
};
Otteniamo il valore associato alla chiave name
. Per farlo racchiudiamo il nome della chiave tra virgolette e lo inseriamo tra parentesi quadre. Ecco la sintassi:
nomeOggetto[“nomeChiave”]
Questo è il codice che dovresti scrivere in notazione con parentesi: animal["name"];
.
Ecco un'analisi del codice qui sopra:
animal
è il nome dell'oggetto["name"]
è il nome della chiave tra parentesi quadre
Vediamo un altro esempio.
console.log(animal["sounds"]());
//Risultato:
meow meow
undefined
sounds()
è un metodo, per questo alla fine ho aggiunto le parentesi per invocarlo.
Ed ecco come invocare il metodo usando la notazione con punto.
console.log(animal.sounds());
//Risultato:
meow meow
undefined
Metodi di oggetti JavaScript
Ora sai come accedere a specifiche proprietà. Ma se volessi tutte le chiavi o tutti i valori di un oggetto?
Esistono due metodi che ti daranno le informazioni che ti servono.
const runner = {
name: "Jessica",
age: 20,
milesPerWeek: 40,
race: "marathon"
};
Puoi usare il metodo Object.keys()
per recuperare i nomi di tutti le chiavi di un oggetto.
Ecco la sintassi:
Object.keys(nomeOggetto)
Possiamo usare questo metodo sull'oggetto runner
usato in precedenza.
Object.keys(runner);
Stampando il risultato, otteniamo un array con le chiavi dell'oggetto.
console.log(Object.keys(runner));
//Risultato: [ 'name', 'age', 'milesPerWeek', 'race' ]
Allo stesso modo possiamo usare il metodo Object.values()
per ottenere tutti i valori di un oggetto. Questa è la sintassi:
Object.values(nomeOggetto)
Ora otterremo tutti i valori dell'oggetto runner
.
console.log(Object.values(runner));
//Risultato: [ 'Jessica', 20, 40, 'marathon' ]
Abbiamo fatto un sacco di strada. Ecco i concetti fondamentali che abbiamo affrontato:
Oggetti:
- Puoi usare gli oggetti per archiviare dati come proprietà (coppie chiave-valore).
- I nomi delle chiavi possono essere stringhe, simboli o numeri.
- I valori possono essere di qualsiasi tipo.
Accedere alle proprietà di un oggetto:
- Notazione con punto:
nomeOggetto.nomeChiave
- Notazione con parentesi:
nomeOggetto[“nomeChiave”]
Eliminare una proprietà:
delete nomeOggetto.nomeChiave
Ci sono un sacco di cose che puoi fare con gli oggetti. E adesso hai alcune delle basi per poter trarre vantaggio di questo utile tipo di dato JavaScript.
Scrivo riguardo allo studio della programmazione e dei modi migliori per affrontarlo su amymhaddad.com. Condivido anche tweet sulla programmazione, l'apprendimento e la produttività: @amymhaddad.