Obiekty w JavaScript

Jak wiemy, w JavaScript istnieje 8 typów danych. Siedem z nich nazywa się „prymitywnymi”, ponieważ zawierają tylko jedną wartość (ciąg, liczbę lub coś innego).

Obiekty służą do przechowywania kolekcji o różnych wartościach i bardziej złożonych encjach. Obiekty są bardzo często używane w JavaScript i stanowią jeden z fundamentów języka. Dlatego musimy je zrozumieć, zanim zagłębimy się gdziekolwiek indziej.

Obiekt można utworzyć za pomocą nawiasów klamrowych {…} z opcjonalną listą właściwości. Właściwość to para klucz: wartość, gdzie kluczem jest ciąg znaków (zwany także „nazwą właściwości”), a wartością może być dowolna.

Obiekt możemy sobie wyobrazić jako pudełko z oznaczonymi folderami. Każdy element danych jest przechowywany we własnym folderze, w którym zapisywany jest klucz. Za pomocą klawisza folder można łatwo znaleźć, usunąć lub dodać do niego.

Zwykle używana jest opcja z nawiasami klamrowymi {…}. Taka deklaracja nazywana jest dosłownym zapisem obiektowym lub dosłownym.

Literały i właściwości

Korzystając ze składni literału {…}, możemy od razu umieścić w obiekcie kilka właściwości w postaci par klucz: wartość:

Każda właściwość ma klucz (zwany także „nazwą” lub „id”). Po nazwie właściwości następuje dwukropek „:”, a następnie określana jest wartość właściwości. Jeśli obiekt ma kilka właściwości, są one wymienione oddzielone przecinkami.

Obiekt użytkownika zawiera obecnie dwie właściwości:

Pierwsza właściwość o nazwie „name” i wartości „John”.

Druga właściwość nosi nazwę „wiek” i ma wartość 30.

Można powiedzieć, że naszym obiektem użytkownika jest pudełko z dwoma folderami oznaczonymi „imię” i „wiek”.

W każdej chwili możemy do niego dodawać nowe foldery, usuwać foldery, czy też czytać zawartość dowolnego folderu.

Aby uzyskać dostęp do właściwości, użyj notacji z kropką:

Wartość może być dowolnego typu. Dodajmy właściwość z wartością logiczną:

Aby usunąć właściwość, możemy użyć operatora usuwania:

Nazwa właściwości może składać się z kilku słów, ale wtedy musi być ujęta w cudzysłów:

Ostatnia właściwość obiektu może zakończyć się przecinkiem:

Nazywa się to „wiszącym przecinkiem”. Takie podejście ułatwia dodawanie, usuwanie i przenoszenie właściwości, ponieważ wszystkie wiersze obiektu są takie same.

Obiekt zadeklarowany jako stała można modyfikować

Obiekt zadeklarowany jako const można modyfikować.

Na przykład:

Może się wydawać, że linia (*) powinna zgłosić błąd, ale nie, wszystko jest w porządku. Faktem jest, że deklaracja const chroni przed zmianami tylko samą zmienną użytkownika, a nie jej zawartość.

Definicja const zgłosi błąd tylko wtedy, gdy przypiszemy do zmiennej inną wartość: user=….

Nawiasy kwadratowe

W przypadku właściwości, których nazwy składają się z kilku słów, dostęp do wartości za pomocą kropki nie działa:

JavaScript widzi, że uzyskujemy dostęp do właściwości user.likes i wtedy pojawia się dziwne słowo ptaki. Rezultatem jest błąd składniowy.

Chodzi o to, aby klucz został nazwany zgodnie z zasadami nazywania zmiennych. Oznacza to, że nie zawierał spacji, nie zaczynał się od cyfry i nie zawierał znaków specjalnych innych niż $ i _.

W takich przypadkach istnieje alternatywny sposób dostępu do właściwości za pomocą nawiasów kwadratowych. Ta metoda będzie działać z dowolną nazwą właściwości:

Teraz wszystko jest w porządku. Należy pamiętać, że ciąg znaków w nawiasach kwadratowych jest ujęty w cudzysłów (wystarczy dowolny cudzysłów).

Nawiasy kwadratowe umożliwiają także odniesienie się do właściwości, której nazwa może być wynikiem wyrażenia. Na przykład nazwę właściwości można zapisać w zmiennej:

W tym przypadku zmienną kluczową można obliczyć w czasie wykonywania lub uzależnić od danych wprowadzonych przez użytkownika. Następnie używamy go, aby uzyskać dostęp do nieruchomości. Daje nam to większą elastyczność.

Przykład:

Zapis „przez kropkę” nie pozwala na to:

Obliczone właściwości

W notacji dosłownej możemy używać nawiasów kwadratowych, aby utworzyć obliczoną właściwość.

Przykład:

Znaczenie obliczonej właściwości jest proste: wpis [fruit] oznacza, że ​​nazwa właściwości musi zostać wzięta ze zmiennej Fruit.

A jeśli odwiedzający wpisze słowo „jabłko”, obiekt torby będzie teraz zawierał właściwość {jabłko: 5}.

Zasadniczo powyższy przykład działa tak samo jak następujący przykład:

…Ale pierwszy przykład wygląda bardziej zwięźle.

W nawiasach kwadratowych możemy także używać bardziej złożonych wyrażeń:

Nawiasy kwadratowe dają o wiele więcej opcji niż zapis z kropką. Pozwalają na użycie dowolnych nazw właściwości i zmiennych, chociaż wymagają bardziej uciążliwych konstrukcji kodu.

Podsumowując: w większości przypadków, gdy nazwy właściwości są znane i proste, stosuje się zapis kropkowy. Jeśli potrzebujemy czegoś bardziej złożonego, używamy nawiasów kwadratowych.

Właściwość ze zmiennej

W prawdziwym kodzie często musimy wykorzystać istniejące zmienne jako wartości właściwości o tej samej nazwie.

Na przykład:

W powyższym przykładzie nazwy właściwości name i age pokrywają się z nazwami zmiennych, które podstawimy jako wartości tych właściwości. To podejście jest tak powszechne, że istnieją specjalne właściwości skrótów upraszczające tę notację.

Zamiast nazwa:nazwa możemy po prostu napisać nazwę:

W tym samym obiekcie możemy używać zarówno właściwości regularnych, jak i krótkich:

Ograniczenia dotyczące nazw nieruchomości

Jak już wiemy, nazwa zmiennej nie może być taka sama jak słowa zastrzeżone, takie jak «for», «let», «return» itp.

Ale nie ma takiego ograniczenia dla właściwości obiektu:

Innymi słowy, nie ma żadnych ograniczeń dotyczących nazw nieruchomości. Mogą mieć postać ciągów znaków lub znaków (specjalny typ identyfikatorów, który zostanie omówiony później).

Wszystkie inne typy danych zostaną automatycznie przekonwertowane na ciąg.

Na przykład, jeśli użyjesz cyfry 0 jako klucza, zmieni się ona w ciąg „0”:

Ze specjalną właściwością __proto__ wiąże się niewielka pułapka. Nie możemy ustawić go na wartość inną niż obiektowa:

Jak widać, przypisanie wartości pierwotnej 5 jest ignorowane.

Właściwość __proto__ omówimy bardziej szczegółowo w przyszłych rozdziałach na temat dziedziczenia prototypowego, a także zasugerujemy sposoby skorygowania tego zachowania.

Sprawdzanie istnienia właściwości, operator „in”.

W przeciwieństwie do wielu innych języków, obiekt JavaScript polega na tym, że można uzyskać dostęp do dowolnej właściwości. Nawet jeśli właściwość nie istnieje, nie będzie błędu!

Podczas uzyskiwania dostępu do właściwości, która nie istnieje, zwracana jest wartość niezdefiniowana. Dzięki temu możesz po prostu sprawdzić istnienie właściwości:

Istnieje również specjalny operator „in” służący do testowania istnienia właściwości w obiekcie.

Składnia operatora:

Przykład:

Należy pamiętać, że po lewej stronie operatora in musi znajdować się nazwa właściwości. Zwykle jest to ciąg znaków w cudzysłowie.

Jeśli pominiemy cudzysłowy, oznacza to, że podajemy zmienną zawierającą nazwę właściwości. Na przykład:

Do czego służy operator in? Czy porównanie z niezdefiniowanym nie wystarczy?

W większości przypadków porównanie z niezdefiniowanym będzie działać dobrze. Ale jest szczególny przypadek, kiedy nie jest to odpowiednie i trzeba użyć „in”.

Dzieje się tak, gdy właściwość istnieje, ale zawiera wartość niezdefiniowaną:

W powyższym przykładzie właściwość obj.test technicznie istnieje w obiekcie. Operator in działał poprawnie.

Tego typu sytuacje są bardzo rzadkie, ponieważ parametr niezdefiniowany zwykle nie jest przypisany wprost. W przypadku „nieznanych” lub „pustych” właściwości używamy wartości null.

Pętla „for..in”.

Aby iterować po wszystkich właściwościach obiektu, użyj pętli for..in. Pętla ta różni się od pętli for(;;), którą badaliśmy wcześniej.

Składnia:

Na przykład wydrukujmy wszystkie właściwości obiektu użytkownika:

Zauważ, że wszystkie konstrukcje „for” pozwalają nam zadeklarować zmienną wewnątrz pętli, tak jak tutaj klucz let.

Alternatywnie możemy użyć innej nazwy zmiennej. Na przykład często używana jest opcja „for (let prop in obj)”.

Organizowanie właściwości obiektów

Czy właściwości obiektu są uporządkowane? Innymi słowy, jeśli przejdziemy przez wszystkie właściwości obiektu, czy otrzymamy je w tej samej kolejności, w jakiej je dodaliśmy? Czy możemy na to liczyć?

Krótka odpowiedź jest taka, że ​​właściwości są uporządkowane w specjalny sposób: właściwości z kluczami całkowitymi są sortowane w kolejności rosnącej, pozostałe są sortowane w kolejności tworzenia. Przyjrzyjmy się bliżej.

Jako przykład rozważ obiekt z kodami telefonicznymi:

Jeśli tworzymy witrynę dla odbiorców niemieckich, prawdopodobnie chcemy, aby kod 49 był pierwszym.

Ale jeśli uruchomimy kod, zobaczymy zupełnie inny obraz:

USA (1) jest pierwsze

następnie Szwajcaria (41) i tak dalej.

Numery kierunkowe są w kolejności rosnącej, ponieważ są liczbami całkowitymi: 1, 41, 44, 49.

Właściwości całkowite? Co to jest?

Termin „właściwość całkowita” oznacza ciąg znaków, który można przekształcić na liczbę całkowitą i z niej bez modyfikacji.

Oznacza to, że „49” jest nazwą właściwości w postaci liczby całkowitej, ponieważ jeśli przekonwertujesz ją na liczbę całkowitą, a następnie z powrotem na ciąg znaków, nie ulegnie ona zmianie. Ale właściwości „+49” lub „1.2” nie są:

…Z drugiej strony, jeśli klucze nie są liczbami całkowitymi, to są iterowane w kolejności, w jakiej zostały utworzone, na przykład:

Aby rozwiązać nasz problem z kodami wybierania, możemy oszukiwać, nadając kodom właściwości niecałkowite. Wystarczy dodać znak „+” przed każdym kodem.

Przykład:

Teraz kod działa tak, jak zakładaliśmy.

Całkowity

Obiekty to tablice asocjacyjne posiadające szereg dodatkowych możliwości.

Przechowują właściwości (pary klucz-wartość), gdzie:

Klucze właściwości muszą być ciągami lub znakami (zwykle ciągami).

Wartości mogą być dowolnego typu.

Aby uzyskać dostęp do nieruchomości, możemy użyć:

Notacja z kropką: obj.property.

Nawiasy kwadratowe obj[„właściwość”]. Nawiasy kwadratowe umożliwiają pobranie klucza ze zmiennej, na przykład obj[varWithKey].

Dodatkowi operatorzy:

Usuwanie właściwości: usuń obj.prop.

Sprawdzenie istnienia właściwości: „klucz” w obj.

Pętla poprzez właściwości obiektu: pętla for (wprowadź klucz w obj).

To, czego nauczyliśmy się w tym rozdziale, nazywamy „zwykłym obiektem” lub po prostu Obiektem.

W JavaScript istnieje wiele innych typów obiektów:

Tablica do przechowywania uporządkowanych zbiorów danych,

Data do przechowywania informacji o dacie i godzinie,

Błąd podczas zapisywania informacji o błędzie.

… i tak dalej.

Mają swoje własne cechy, które przestudiujemy później. Czasami ludzie mówią na przykład „typ danych tablicowych” lub „typ danych typu data”, ale technicznie rzecz biorąc, nie są to oddzielne typy, ale należą do typu danych obiektowych. Po prostu rozwijają go na różne sposoby.