lista javascript

| | | | | | | | | | | | | | | | | | | | | | | | | | |

Sami zamierzamy stworzyć listę owoców. Nazwiemy naszą listę „owocami” i dodamy następujące wartości: banan, melon, winogrono. Och, jak ja kocham owoce! Choć może to brzmieć jak samouczek dotyczący listy zakupów, właśnie stworzyliśmy tabelę.

W tym przewodniku omówimy, czym są tablice, jak działają i dlaczego powinieneś ich używać w swoim kodzie. Omówimy kilka przykładowych tablic w akcji, abyś mógł zostać ninja tablic JavaScript!

Co to jest tablica?

Tablica to obiekt, który przechowuje dane. Tablice zawierają uporządkowaną kolekcję elementów i mogą przechowywać zero lub więcej elementów. Tablice są przydatne w programowaniu, ponieważ umożliwiają możesz przechowywać podobne wartości w zmiennej.

Nie musisz na przykład pisać dziesięciu prostych zmiennych, aby wyświetlić listę ulubionych owoców. Dzięki tablicy możesz dodać wszystkie swoje ulubione owoce do jedna zmienna.

Rozważmy następujący przykład:.

Tu stworzyliśmy tablicę o nazwie "owoce". Przechowuje trzy różne wartości, z których każda odzwierciedla owoc, który chcemy kupić w sklepie spożywczym. Aby zadeklarować naszą tablicę, umieściliśmy naszą listę elementów w nawiasach kwadratowych.

Deklarowanie tablicy

Są dwa sposoby deklarowania tablicy. Większość ludzi to robi, zakreślając listę elementów w nawiasach kwadratowych, tak jak to zrobiliśmy wcześniej:

W tym przykładzie zadeklarowaliśmy tablicę z trzema wartościami. Możemy również użyć konstruktora tablicy, który używa słowa kluczowego new do zadeklarowania tablicy:

Te fragmenty kodu tworzą tę samą tablicę, ale przy użyciu różnych metod. Zauważ, że w naszym drugim przykładzie użyliśmy okrągłych podpór do zadeklarowania naszej tablicy. Używamy również konstruktora nowy Array do deklarowania tablicy. Z tego powodu większość ludzi preferuje pierwszą metodę; Nawiasy kwadratowe są znacznie łatwiejsze do zapamiętania i szybsze

tabele mogą nie zawierać tego samego typ danych Nasza sieć może przechowywać wiele różnych typów danych.

Ta tablica przechowuje trzy różne typy danych: łańcuch, liczbę i wartość logiczną Teraz, kiedy już wiesz, jak deklarować tablicę, jesteś gotowy, aby uzyskać dostęp do ich zawartości.

Czytanie tablicy

Tablice nie byłyby zbyt przydatne, gdybyśmy nie mogli odczytać ich wartości. Dlatego istnieje indeksacja. Indeks jest sposobem na dostęp do poszczególnych elementów w obiekt iterowalny jako lista.

Każdy element tablicy w tablicy ma przypisany numer indeksu er. Liczby te zaczynają się od 0 i mogą być używane do zmiany prądu na poszczególne elementy w tablicy. Pamiętasz naszą tabelę "owoce"?

Oto wartości indeksu ‚Ęã‚Ęãprzypisane do tej tablicy:

za pomocą tych numerów możemy uzyskać dostęp do różnych pozycji na naszej liście. Załóżmy, że chcesz zidentyfikować, że owoc znajduje się na pozycji indeksu 1 w Twojej tablicy. Możesz to zrobić, podając wartość indeksu w nawiasie po nazwie tabeli:

Nasz kod powraca. winogrona Odnosimy się do pozycji 1 indeksu, która przechowuje wartość „rodzynki”. Jeśli przekażesz wartość 0, zostanie zwrócony „Banana”. Jeśli spróbujesz uzyskać dostęp do elementu, który nie istnieje, zostanie zwrócone "undefined":

Wyjście: niezdefiniowane. Indeksowanie jest szczególnie przydatne, gdy chcesz przejść przez elementy w tablicy. Załóżmy, że chcesz wydrukować każdy owoc ze swojego szablonu na konsoli. Możesz to zrobić za pomocą pętli takiej jak ta:

Ten kod zwraca:

Nasz kod przechodzi przez każdy element na naszej liście, a następnie wyświetla każdy element w konsoli. Zauważysz również, że użyliśmy długości . Ta funkcja zwraca długość naszej listy

Dodaj elementy do tablicy

most pa , Czasami chcesz dodać nową wartość do tablicy po wstępnym zadeklarowaniu tablicy.Możesz to zrobić za pomocą tablicy push() .

Zapomnieliśmy dodać „Truskawkę” do naszej listy owoców. O nie! Nie martw się, zawsze możemy dodać za pomocą push() :

Teraz, gdy już uruchomiliśmy ten kod, nasza tablica wygląda tak:

< table class = "wp-block table cours-info table"> Banan winogrona Melon Truskawka 1 2 3

Możesz dodać dane na początku tabeli za pomocą kodu < > unshift () . Truskawki są tak ważne na naszej liście zakupów, że chcemy, aby pojawiły się jako pierwsze:

Dzięki temu nasza lista „owoców” wyglądałaby tak:

< td > truskawka
Banan winogrona Melon
1 2 3

usuwanie elementów z tablicy

Okazuje się, że mamy już w domu melon, więc nie potrzebowaliśmy kupić jeden. Jaki jest sens kupowania melona, prawda? Ponieważ melon znajduje się na końcu naszej listy, mamy dwie opcje, aby go usunąć:

za pomocą Let splice() jako przykład:.

Nasz kod zwraca:

splice() akceptuje dwa parametry. Pierwszy to numer indeksu do usunięcia z tablicy, a drugi to liczba elementów do usunięcia. W tym przypadku chcieliśmy usunąć element o wartości indeksu 3, więc jako nasze parametry określiliśmy „3, 1”.

pop() nie przyjmuje żadnego parametru . Usuń tylko ostatni element z listy:

Nasz kod zwraca:

Możesz również użyć shift (), aby usunąć element z początku listy:

Nasz kod zwraca:

push () i unshift () dodają elementy do listy. Elementy pop () i shift () Usuń z listy. Metoda składania może być również użyta do usunięcia elementu z listy na podstawie jego wartości indeksu

Modyfikacja elementy serii

Mimo że banany są smacznym owocem, często są tak duże, że nie możesz ich zjeść jako przekąski, gdy czujesz się trochę zdenerwowany. Ośmielę się być głodny. Banany dla niemowląt są łatwiejsze do jedzenia.

Teraz załóżmy, że chcemy zmienić naszą listę „owoców”, aby kupować banany dla niemowląt zamiast zwykłych bananów. Moglibyśmy to zrobić za pomocą operatora przypisania, ponieważ wszystkie zmienne:

Nasze zwraca kod:

Zmodyfikowaliśmy wpis na pozycji indeksu 0, aby zapisać wartość „Baby banany”. Nie ma potrzeby używania specjalnych metod, aby dokonać tej zmiany; operator przypisania służy do modyfikacji wartości val używa ‚Ę‚‚w tablicy.

Wniosek

Jest to podstawa tego, co musisz wiedzieć o tablicach JavaScript. Jest jeszcze więcej do nauczenia się, ale właśnie to sprawia, że programowanie jest zabawne: zawsze jest nowe wyzwanie do rozwiązania. Jeśli nic więcej, dowiedziałeś się o moich ulubionych owocach. Chociaż powiedziałbym, że lubię czarną porzeczkę, nie wspomniałem o tym w tym samouczku.

Jesteś teraz gotowy do rozpoczęcia pracy z tablicami JavaScript, takimi jak ekspert!