Istnieją 2 sposoby ustawiania, zmieniania i uzyskiwania dostępu do właściwości obiektu: notacji punktowej i notacji nawiasów.
Zapis kropka
Jak widać w kilku poprzednich przykładach, zapis kropka (.
) oddziela obiekt od klucza usługi, do którego uzyskuje dostęp:
const myObj = {
"myProp": "String value."
};
myObj.myProp;
> "String value."
Korzystając z notacji, możesz uzyskiwać dostęp do usług, zmieniać je i tworzyć nowe za pomocą operatorów przypisywania:
const myObj = {};
myObj.myProp = "String value.";
myObj;
> Object { myProp: "String value." }
Tworzenie łańcuchów kluczy właściwości za pomocą notacji punktowej pozwala uzyskać dostęp do właściwości obiektów, które same są właściwościami obiektu:
const myObj = {
"myProp": {
"childProp" : true
}
};
myObj.myProp.childProp;
> true;
Jednak użycie tej składni, gdy klucz określony w łańcuchu może nie być zdefiniowany, może powodować błędy. W poniższym przykładzie myMissingProp
nie jest właściwością obiektu myObj
, więc próba uzyskania dostępu do myObj.myMissingProp
zakończy się wynikiem undefined
. Próba uzyskania dostępu do właściwości w elemencie undefined
, jak gdyby była obiektem, powoduje błąd:
const myObj = {
"myProp": {
"childProp" : true
}
};
> myObj.myMissingProp
> undefined
myObj.myMissingProp.childProp;
> Uncaught TypeError: myObj.myMissingProp is undefined
Aby rozwiązać ten problem, w ES2020 wprowadziliśmy „opcjonalny operator łańcucha” (?.
), który pozwala bezpiecznie uzyskiwać dostęp do zagnieżdżonych właściwości obiektów.
const myObj = {
"myProp": {
"childProp" : true
}
};
myObj.myMissingProp?.childProp;
> undefined
Klucze, do których uzyskuje się dostęp za pomocą notacji punktowej, nie są ujęte w cudzysłowy, tak jak literały ciągu znaków. Oznacza to, że za pomocą notacji z kropkami możesz uzyskać dostęp tylko do kluczy właściwości, które są prawidłowymi identyfikatorami:
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'
Dlatego przy określaniu kluczy właściwości należy w miarę możliwości przestrzegać reguł związanych z identyfikatorem. Jeśli w przypadku danego klucza nie jest to możliwe, alternatywna składnia notacji nawiasów umożliwia ustawianie i dostęp do kluczy obiektów opartych na ciągach znaków, które nie spełniają reguł dotyczących identyfikatorów.
Notacja nawiasów
W notacji nawiasów klamrowych ([]
) znajduje się wartość, która ocenia ciąg znaków (lub symbol) reprezentujący klucz właściwości.
const myObj = {
"myProp": "String value."
};
myObj["myProp"];
> "String value."
Ta składnia jest znacznie mniej restrykcyjna i potencjalnie na tyle mało restrykcyjna, że może być myląca, ponieważ wartość w nawiasach jest oceniana jako literał ciągu znaków niezależnie od typu danych. Na przykład w tym przykładzie wartości logiczne false
i 10
są używane do uzyskiwania dostępu do właściwości powiązanych z kluczami literału w postaci ciągu znaków "false"
i "10"
:
const myObj = {
"false": 25,
"10" : true,
"key with spaces": true
};
myObj[false];
> 25
myObj[10];
> true
myObj["key with spaces"];
> true
Zaletą tej składni jest jej elastyczność, która umożliwia dostęp do właściwości za pomocą dynamicznie tworzonych ciągów znaków. W tym przykładzie użyto losowej liczby do wybrania jednej z 3 właściwości obiektu:
const colors = {
"color1" : "red",
"color2" : "blue",
"color3" : "green"
};
const randomNumber = Math.ceil( Math.random() * 3 );
colors[ "color" + randomNumber ];
> "blue"
Podobnie jak w przypadku notacji, możesz używać operatorów przypisań do tworzenia nowych usług i uzyskiwania dostępu do nich za pomocą nawiasów:
const myObj = {};
myObj[ "myProp" ] = "String value.";
myObj;
> Object { myProp: "String value." }