Właściwości obiektu można ustawiać, zmieniać i do nich uzyskiwać dostęp na 2 sposoby: za pomocą notacji kropkowej i notacji nawiasów.
Zapis kropki
Jak widać w niektórych poprzednich przykładach, w notacji kropki używa się kropki (.
) pomiędzy
obiekt i klucz właściwości, do którego uzyskano dostęp:
const myObj = {
"myProp": "String value."
};
myObj.myProp;
> "String value."
Za pomocą kropki możesz uzyskiwać dostęp do nowych właściwości, zmieniać je i tworzyć je za pomocą operatorów przypisania:
const myObj = {};
myObj.myProp = "String value.";
myObj;
> Object { myProp: "String value." }
Łańcuchowanie kluczy właściwości za pomocą kropki umożliwia dostęp do właściwości obiektów, które 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ć
może powodować błędy. W tym przykładzie myMissingProp
nie jest właściwością obiektu myObj
, więc próba uzyskania dostępu do myObj.myMissingProp
spowoduje błąd undefined
. Próba uzyskania dostępu do właściwości undefined
tak, jakby była ona 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 łączenia łańcuchów”. (?.
)
aby bezpieczny 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 uzyskano dostęp przy użyciu notacji punktowej, nie są ujęte w cudzysłowy, takie jak ciąg znaków niż literały. Oznacza to, że możesz używać notacji punktowej, aby uzyskiwać dostęp tylko do kluczy właściwości z 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 warto przestrzegać reguł identyfikatorów. podczas określania kluczy właściwości, gdy tylko jest to możliwe. Jeśli nie jest to możliwe w przypadku danego klucza, alternatywna składnia nawiasów umożliwia ustawianie kluczy obiektów opartych na ciągu znaków i dostęp do nich, nawet jeśli nie spełniają one reguł dotyczących identyfikatorów.
Zapis nawiasu klamrowego
Notacja nawiasowa używa zestawu nawiasów ([]
) zawierającego wartość, która określa
ciąg (lub symbol) reprezentujący element
klucz właściwości.
const myObj = {
"myProp": "String value."
};
myObj["myProp"];
> "String value."
Ta składnia jest znacznie mniej restrykcyjna i potencjalnie mało restrykcyjna.
być mylące, ponieważ wartość w nawiasach jest obliczana jako literał ciągu
niezależnie od typu danych. W tym przykładzie wartość logiczna false
i wartość liczbowa 10
są używane do uzyskiwania dostępu do właściwości powiązanych z kluczami dosłownymi "false"
i "10"
:
const myObj = {
"false": 25,
"10" : true,
"key with spaces": true
};
myObj[false];
> 25
myObj[10];
> true
myObj["key with spaces"];
> true
Siła tej składni tkwi w jej elastyczności, ponieważ umożliwia ona korzystanie z dynamicznie tworzonych ciągów znaków do uzyskiwania dostępu do właściwości. W tym przykładzie użyto liczby losowej 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 kropkowej, za pomocą notacji nawiasów możesz uzyskiwać dostęp do nowych właściwości i je tworzyć, korzystając z operatorów przypisania:
const myObj = {};
myObj[ "myProp" ] = "String value.";
myObj;
> Object { myProp: "String value." }