Esistono due modi per impostare, modificare e accedere alle proprietà di un oggetto: la notazione con punti e la notazione tra parentesi.
Notazione a punti
Come osservato in alcuni esempi precedenti, la notazione con punti utilizza un punto (.
) tra una
e la chiave di proprietà a cui si accede:
const myObj = {
"myProp": "String value."
};
myObj.myProp;
> "String value."
Puoi utilizzare la notazione punto per accedere, modificare o creare nuove proprietà utilizzando operatori delle assegnazioni:
const myObj = {};
myObj.myProp = "String value.";
myObj;
> Object { myProp: "String value." }
L'accodamento delle chiavi delle proprietà tramite la notazione a punti ti consente di accedere alle proprietà di oggetti che sono a loro volta proprietà di un oggetto:
const myObj = {
"myProp": {
"childProp" : true
}
};
myObj.myProp.childProp;
> true;
Tuttavia, l'utilizzo di questa sintassi quando una chiave specificata nella catena potrebbe non essere definita può causare errori. Nell'esempio seguente, myMissingProp
non è un
dell'oggetto myObj
, quindi il tentativo di accedere a myObj.myMissingProp
porta a undefined
. Il tentativo di accedere a una proprietà su undefined
, come se fosse un oggetto, genera un errore:
const myObj = {
"myProp": {
"childProp" : true
}
};
> myObj.myMissingProp
> undefined
myObj.myMissingProp.childProp;
> Uncaught TypeError: myObj.myMissingProp is undefined
Per risolvere questo problema, ES2020 ha introdotto un "operatore di concatenamento facoltativo" (?.
)
per accedere in sicurezza alle proprietà nidificate degli oggetti.
const myObj = {
"myProp": {
"childProp" : true
}
};
myObj.myMissingProp?.childProp;
> undefined
Le chiavi a cui si accede utilizzando la notazione a punti non sono racchiuse tra virgolette come accade per le stringhe litterali. Questo significa che puoi utilizzare la notazione punti per accedere solo alle chiavi di proprietà che siano identificatori validi:
const myObj = {
"1": true,
"key with spaces": true
};
myObj.1;
> Uncaught SyntaxError: unexpected token: numeric literal
myObj.key with spaces;
> Uncaught SyntaxError: unexpected token: keyword 'with'
Per questo motivo, è buona norma seguire le regole per gli identificatori quando specifichi le chiavi delle proprietà, se possibile. Se non è possibile per una determinata chiave, una sintassi alternativa della notazione tra parentesi consente di impostare e accedere a chiavi di oggetti basate su stringhe che non rispettano le regole degli identificatori.
Notazione parentesi quadra
La notazione tra parentesi utilizza un insieme di parentesi ([]
) contenenti un valore che valuta
una stringa (o un simbolo) che rappresenta
chiave della proprietà.
const myObj = {
"myProp": "String value."
};
myObj["myProp"];
> "String value."
Questa sintassi è notevolmente più permissiva e potenzialmente permissiva
per creare confusione, poiché il valore tra parentesi viene valutato come valore letterale stringa
a prescindere dal tipo di dati. Ad esempio, qui il valore booleano false
e il valore numerico 10
vengono utilizzati per accedere alle proprietà associate alle chiavi letterali di stringa "false"
e "10"
:
const myObj = {
"false": 25,
"10" : true,
"key with spaces": true
};
myObj[false];
> 25
myObj[10];
> true
myObj["key with spaces"];
> true
Il punto di forza di questa sintassi sta nella sua flessibilità, che consente l'uso di stringhe create dinamicamente per accedere alle proprietà. L'esempio seguente utilizza un numero casuale per selezionare una delle tre proprietà di un oggetto:
const colors = {
"color1" : "red",
"color2" : "blue",
"color3" : "green"
};
const randomNumber = Math.ceil( Math.random() * 3 );
colors[ "color" + randomNumber ];
> "blue"
Come con la notazione a punti, puoi utilizzare la notazione tra parentesi per accedere e creare nuove proprietà utilizzando gli operatori di assegnazione:
const myObj = {};
myObj[ "myProp" ] = "String value.";
myObj;
> Object { myProp: "String value." }