Esistono due modi per impostare, modificare e accedere alle proprietà di un oggetto: la notazione con punti e la notazione tra parentesi.
Notazione con punto
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." }
Concatenare le chiavi di proprietà utilizzando la notazione punto ti consente di accedere alle proprietà 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
definito può causare errori. Nell'esempio seguente, myMissingProp
non è un
dell'oggetto myObj
, quindi il tentativo di accedere a myObj.myMissingProp
porta a undefined
. Tentativo di accedere a una proprietà su undefined
, come se
se si tratta di un oggetto, causa 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 punti non sono racchiuse tra virgolette come stringa sono consentiti i valori letterali. 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, la best practice prevede di seguire le regole per gli identificatori. quando specifichi le chiavi di proprietà, quando possibile. Se questo non è possibile per un data chiave, una sintassi alternativa di notazione a parentesi ti consente di impostare e accedere chiavi degli 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
Il valore numerico 10
viene utilizzato per accedere alle proprietà associate alla stringa
chiavi letterali "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 per la notazione punto, puoi utilizzare la notazione parentesi quadra per accedere e creare nuovi utilizzando gli operatori delle assegnazioni:
const myObj = {};
myObj[ "myProp" ] = "String value.";
myObj;
> Object { myProp: "String value." }