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