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 à points et la notation à crochets.

Comme indiqué dans certains exemples précédents, la notation par points utilise un point (.) entre un objet et la clé de propriété à laquelle on accède :

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

myObj.myProp;
> "String value."

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

const myObj = {};

myObj.myProp = "String value.";

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

En enchaînant des clés de propriété à l'aide de la notation par points, vous pouvez accéder aux propriétés d'objets qui sont eux-mêmes des propriétés d'un objet :

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

myObj.myProp.childProp;
> true;

Toutefois, l'utilisation de cette syntaxe lorsqu'une clé spécifiée dans la chaîne n'est pas définie peut entraîner 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 de manière sécurisée aux propriétés imbriquées des objets.

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

myObj.myMissingProp?.childProp;
> undefined

Les clés auxquelles on accède à l'aide de la notation en points ne sont pas placées entre guillemets, comme les littéraux de chaîne. 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'identification 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 beaucoup plus permissive, et peut être suffisamment permissive pour prêter à confusion, car la valeur entre crochets est évaluée en tant que littérale de chaîne, quel que soit son type de données. Par exemple, ici, la valeur booléenne false et la valeur numérique 10 sont utilisées pour accéder aux propriétés associées aux clés littérales de chaîne "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 des chaînes créées dynamiquement pour accéder aux propriétés. L'exemple suivant utilise un 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." }