Accesseurs de propriété

Il existe deux façons de définir, de modifier et d'accéder aux propriétés d'un objet: la notation par points et la notation entre crochets.

Notation par points

Comme nous l'avons vu dans certains exemples précédents, la notation par points utilise un point (.) entre et la clé de propriété consultée:

const myObj = {
    "myProp": "String value."
};

myObj.myProp;
> "String value."

Vous pouvez utiliser la notation par points pour accéder à des propriétés, les modifier ou en créer à l'aide de opérateurs d'attribution:

const myObj = {};

myObj.myProp = "String value.";

myObj;
> Object { myProp: "String value." }

Associer des clés de propriété à l'aide de la notation par points vous permet d'accéder aux propriétés de objets qui sont eux-mêmes les propriétés d'un objet:

const myObj = {
    "myProp": {
            "childProp" : true
    }
};

myObj.myProp.childProp;
> true;

Cependant, l'utilisation de cette syntaxe lorsqu'une clé spécifiée dans la chaîne peut ne pas être définies peuvent provoquer des erreurs. Dans l'exemple suivant, myMissingProp n'est pas de l'objet myObj. La tentative d'accès à myObj.myMissingProp génère undefined. Tentative d'accès à une propriété sur undefined, comme si s'il s'agissait d'un objet, cela génère une erreur:

const myObj = {
    "myProp": {
            "childProp" : true
    }
};

> myObj.myMissingProp
> undefined

myObj.myMissingProp.childProp;
> Uncaught TypeError: myObj.myMissingProp is undefined

Pour résoudre ce problème, ES2020 a introduit un "opérateur de chaînage facultatif" (?.) pour accéder en toute sécurité aux propriétés imbriquées des objets.

const myObj = {
    "myProp": {
            "childProp" : true
    }
};

myObj.myMissingProp?.childProp;
> undefined

Les clés accessibles à l'aide de la notation par points ne sont pas placées entre guillemets, comme une chaîne les littéraux. Cela signifie que vous pouvez utiliser la notation par points pour accéder uniquement aux clés de propriété qui sont des identifiants valides:

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'

C'est pourquoi nous vous recommandons de suivre les règles d'identifiant. lorsque vous spécifiez des clés de propriété, dans la mesure du possible. Si ce n'est pas possible clé donnée, une autre syntaxe de notation entre crochets vous permet de définir et d'accéder des clés d'objet basées sur des chaînes qui ne suivent pas les règles d'identifiant.

Notation entre crochets

La notation entre crochets utilise un ensemble de crochets ([]) contenant une valeur qui évalue Une chaîne (ou un Symbol) représentant le clé de propriété.

const myObj = {
    "myProp": "String value."
};

myObj["myProp"];
> "String value."

Cette syntaxe est considérablement plus permissive, et potentiellement permissive prêtant à confusion, car la valeur entre crochets est évaluée en tant que littéral de chaîne quel que soit son type de données. Par exemple, ici la valeur booléenne false et le La valeur numérique 10 permet d'accéder aux propriétés associées à la chaîne. clés littérales "false" et "10" :

const myObj = {
    "false": 25,
    "10" : true,
    "key with spaces": true
};

myObj[false];
> 25

myObj[10];
> true

myObj["key with spaces"];
> true

La force de cette syntaxe réside dans sa flexibilité, qui permet d'utiliser créées dynamiquement pour accéder aux propriétés. L'exemple suivant utilise nombre aléatoire pour sélectionner l'une des trois propriétés d'un objet:

const colors = {
    "color1" : "red",
    "color2" : "blue",
    "color3" : "green"
};
const randomNumber = Math.ceil( Math.random() * 3 );

colors[ "color" + randomNumber ];
> "blue"

Comme pour la notation par points, vous pouvez utiliser la notation entre crochets pour accéder à l'aide d'opérateurs d'attribution:

const myObj = {};

myObj[ "myProp" ] = "String value.";

myObj;
> Object { myProp: "String value." }