Istnieją 2 sposoby ustawiania, zmieniania i używania właściwości obiektu: notacja kropki i notacja nawiasowa.
Zapis kropki
Jak widać w niektórych poprzednich przykładach, w zapisie kropkowym znajduje się kropka (.
) 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ą notacji punktowej możesz otwierać, zmieniać i tworzyć nowe usługi za pomocą operatorów przypisań:
const myObj = {};
myObj.myProp = "String value.";
myObj;
> Object { myProp: "String value." }
Łączenie kluczy właściwości za pomocą notacji punktowej pozwala uzyskać dostęp do właściwości które same w sobie 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 poniższym przykładzie myMissingProp
nie jest
właściwości obiektu myObj
, więc próba uzyskania dostępu do myObj.myMissingProp
w wyniku undefined
. Próbuję potem uzyskać dostęp do usługi w witrynie undefined
, jakby
to obiekt, 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 kropki, 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 notacji nawiasowej pozwala ustawić klucze obiektu oparte na ciągach znaków, które nie są zgodne z regułami 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. Na przykład tutaj wartości logiczne false
i wartości logiczne
Wartość liczbowa 10
jest używana do uzyskiwania dostępu do właściwości powiązanych z ciągiem znaków
klucze literału "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 stosowanie dynamicznie tworzonych ciągów znaków, aby uzyskać dostęp do właściwości. W poniższym przykładzie użyto liczba losowa pozwalająca wybrać jedną 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 punktowej, możesz używać notacji nawiasowej, aby zarówno uzyskiwać dostęp, jak i tworzyć nowe przy użyciu operatorów przypisań:
const myObj = {};
myObj[ "myProp" ] = "String value.";
myObj;
> Object { myProp: "String value." }