Funzioni di accesso proprietà

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." }