Tutoriale JavaScript tablic - wyjaśnione przykładami dla początkujących

Ucząc się każdego języka programowania, spotykamy się z uczeniem się tablic. Tablice są pomocne, gdy istnieje potrzeba przechowywania kilku różnych wartości w jednej zmiennej. Aplikacja tablic jest widoczna w wielu miejscach, takich jak wdrażanie macierzy, struktury danych lub przechowywanie danych w formie tabelarycznej.

Pojęcie tablic pochodziło z rozmieszczenia przedmiotów w prawdziwym życiu. Sposób, w jaki organizujemy obiekty w prawdziwym życiu, możemy zorganizować dane w programowaniu. Więc ten post chodzi o uczenie się podstawowych i podstawowych koncepcji tablic w JavaScript. Zanurzmy się i miejmy jasne zrozumienie tablicy, jak ją utworzyć i używać jej do przypisania, dostępu i zmiany wartości.

Co to jest tablica?

Tablica jest typem zmiennym w dowolnym języku programowania używanym do przechowywania wielu wartości jednocześnie. Tablice przechowują dane w postaci segmentów, znane również jako elementy tablicy, więc prosto, tablica jest zbiorem elementów.

Zwykle używamy ich do przechowywania tego samego rodzaju wartości lub listy elementów w jednym miejscu/zmiennej, takiej jak nazwa zwierząt [„Lion”, „Bear”, „Monkey”] lub lista studentów [„John”, „Bob”, „Ivan”].

Możemy jednak przechowywać wiele typów danych w tablicach, takich jak ciągniki, liczby całkowite, tablice, a nawet funkcje.

Typy tablic dotyczących implementacji są podzielone na cztery typy:

• Jednorodne tablice
• Heterogeniczne tablice
• Wielowymiarowe tablice
• Postrzępione tablice

Miejmy krótkie wprowadzenie każdego typu.

Jednorodna tablica:

Tablica, w której elementy są tego samego typu danych, jest znana jako jednorodna tablica. Na przykład wartości String, Liczby całkowite lub Bool.

var stringarr = [„John”, „Bob”, „Ivan”];
var intarr = [23, 45, 67];

Heterogeniczna tablica

Tablica, w której przechowywane są wartości wielu typów danych, jest znana jako tablica heterogeniczna. Na przykład:

var Student = [„John”, 25, „mężczyzna”]

Wielowymiarowa tablica:

Tablica, która zawiera kolejne tablice jako elementy, jest znana jako tablica wielowymiarowa. Na przykład lista studentów:

var Student = [[„John”, 25, „mężczyzna”], [„Steve”, 21, „mężczyzna”], [„Angela”, 22, „kobieta”]]]

Jagged Array:

Jagged jest prawie taki sam jak tablica wielowymiarowa, ale z subtelną różnicą liczby elementów w podatach w ramach tablicy. Wielowymiarowa tablica, w której dodatkowe zestawy danych tablicy nie są jednolite.

var Student = [[„John”], [„Steve”, 21, „Male”], [„Angela”, „Kobieta”]]

Notatka: Użyjemy konsoli przeglądarki, aby zademonstrować przykłady wykonane w tym poście. Aby otworzyć konsolę przeglądarki:

• Użyj Klucz F12 w Chrome i inne przeglądarki na bazie chromu.
• używać Ctrl + Shift + K Klawiatura Klucze skrótów dla Mozilli.
• używać Opcja + ⌘ + C klawiatura Klawisze skrótów w safari (jeśli menu programisty nie pojawia się, to otwórz preferencje, naciskając ⌘ +, oraz w zaawansowanej karcie sprawdź ”Pokaż opracuj menu na pasku menu”).

Jak utworzyć tablicę?

Ponieważ JavaScript jest językiem scenariusza, nie musimy najpierw zadeklarować typu i przypisać niektóre wartości do zmiennej. Możemy bezpośrednio napisać nazwę zmiennej bez wspominania typu danych zmiennej i przypisania do niej wartości.

Na przykład:

var języki = [„JavaScript”, „Python”, „Java”];

Jak przypisać wartości do tablicy?

Chociaż możemy przypisać wartości do tablicy podczas tworzenia tablicy, istnieje inny sposób przypisania wartości, jest przypisanie wartości do określonych indeksów. Lokalizacja, w której element jest obecny w tablicy, jest znana jako jego indeks.

Na przykład:

var języki = [];
języki [0] = "javascript";
języki [1] = "Python";

Notatka: W tablicach liczby indeksu zaczynają się od „0” (zero):

Jak zmienić wartość elementu tablicy?

Wartość elementu obecnego w tablicy można zmienić w ten sam sposób, w jaki możemy przypisać jego wartości.

Na przykład, jeśli chcemy zmienić wartość pierwszego indeksu tablicy „Języki”, oświadczenie pójdzie w ten sposób:

Języki [0] = „TypeScript”;

Wbudowane właściwości i metody tablicy:

Prawdziwym dodatkiem JavaScript to jego wbudowane właściwości i metody tablic. Najczęstsze właściwości i metody macierzy obecne w JavaScript to:

szyk.Własność długości:

„„szyk.długość„Własność można wykorzystać do uzyskania liczby elementów/elementów obecnych w tablicy. Na przykład:

var języki = [„JavaScript”, „Python”, „Java”];
konsola.log (języki.długość);

szyk.Sort () Metoda:

Ten Szyk.Metoda sort () sortuje elementy obecne w tablicy w kolejności rosnącej.

Załóżmy, że mamy szereg trzech języków programowania:

var języki = [„JavaScript”, „Python”, „Java”];

i chcemy je rozwiązać w kolejności alfabetycznej, aby funkcja sortowania była tak:

Niech sortedlang = języki.sortować();
konsola.log (sortedlang);

W wyjściu widać, że tablica jest sortowana w zależności od tego:

Jak uzyskać dostęp do elementów/elementów tablicy?

Dostęp do elementów tablicy można uzyskać, wspominając numer indeksu.

Na przykład chcemy uzyskać dostęp do drugiego elementu tablicy; Oświadczenie by się podobało:

niech SecondLanguage = Języki [1];

Notatka: Numer indeksu Array zaczyna się od zera ”0”:

Jak uzyskać dostęp do pierwszego elementu/elementu tablicy?

Ponieważ indeksy tablic zaczynają się od „0,”, Więc możemy uzyskać dostęp do pierwszego elementu tablicy, wspominając„0”W kwadratowych nawiasach, jak pokazano poniżej:

niech FirstLanguage = Języki [0];

Jak uzyskać dostęp do ostatniego elementu/elementu tablicy?

Aby uzyskać ostatni element tablicy, „szyk.długość„Własność jest pomocna. Możemy uzyskać dostęp do ostatniego elementu obecnego w tablicy, wspominając „szyk.długość -1”W kwadratowych nawiasach, jak pokazano poniżej:

Let LastLanguage = Języki [Języki.długość - 1];

Jak zapętlić tablicę?

Aby uzyskać wszystkie elementy obecne w tablicy, najlepszym sposobem jest zapętlenie tablicy. Najwygodniejsze i wydajne sposoby są wykorzystanie:

• Dla pętli
• metoda Foreach Array

Dla pętli:

Najłatwiej jest pobrać wszystkie elementy za pomocą pętli. Po prostu wykonaj kod podany poniżej, aby zapętlił całą tablicę i pobrać wszystkie elementy jeden po drugim:

var języki = [„JavaScript”, „Python”, „Java”];
dla (niech i = 0; i < languages.length; i++)
const language = języki [i];
konsola.log (język);

W powyższym kodzie widać, że użyliśmy Języki.długość Własność w klauzuli warunkowej dla pętli, aby zapętlić się przez całą tablicę bez znajomości całkowitej liczby elementów w tablicy.

Metoda Foreach Metoda:

JavaScript zapewnia również metoda foreach tablicy do zapętlenia przez całą tablicę. Składnia używania metoda foreach następująco:

var języki = [„JavaScript”, „Python”, „Java”];
Języki.Foreach (Oneelang);
funkcja Oneelang (język)
konsola.log (język);

Powyższa składnia można skrócić za pomocą funkcji wywołania zwrotnego inline, jak podano poniżej:

Języki.foreach ((język) =>
konsola.log (język);
)

Tablice asocjacyjne w JavaScript?

Tablice asocjacyjne to tablice, które wymieniły indeksy. JavaScript nie obsługuje takich tablic. Jeśli to zrobisz, JavaScript przyjmie go jako obiekt, a metody i właściwości tablicy nie mają zastosowania.

Tablice JavaScript to obiekty:

Tak, rodzaj Tablica w JavaScript jest przedmiotem. Dlatego tablice mogą przechowywać różne typy zmiennych. Tablice mogą przechowywać obiekty, funkcje, a nawet tablice w tablicy jako element.

Jeśli używamy Operator typu nad zmienną tablicową:

var języki = [„JavaScript”, „Python”, „Java”];
konsola.log (typeof (języki));

Pokaże, że rodzaj „Języki„Zmienna tablicy to obiekt.

Jednak nadal istnieją pewne różnice koncepcyjne między tablicami i obiektami:

Różnica między tablicami i obiektami:

• W tablicach indeksy są oznaczone liczbami.
• Podczas gdy w obiektach indeksy mogą być oznaczone nazwami (liczby lub alfabety).

Tak więc lepiej jest wybrać odpowiedni typ zmiennej we właściwym miejscu:

• Użyj tablic, gdy masz dużą listę elementów.
• Użyj obiektów, gdy trzeba przypisać nazwy do indeksów.

Teraz pojawia się pytanie, jak określić, czy zmienna jest obiektem, czy tablicą.

Jak zidentyfikować zmienną tablicy?

Do identyfikacji albo zmienną jest tablica, albo nie, JavaScript zapewnia Szyk.funkcja isarray ().

Na przykład:

var języki = [„JavaScript”, „Python”, „Java”];
konsola.Log (tablica.isArray (języki));

Powyższy kod zwróci prawdziwie.

Notatka: Szyk.funkcja isarray () został wprowadzony w EcMascript 5.

Wniosek

Ten post zawiera całą podstawową i niezbędną wiedzę wymaganą do rozpoczęcia działalności z tablicami w JavaScript. Najpierw przedstawiamy, czym są tablice, a następnie nauczyliśmy się tworzyć, przypisać i zmieniać wartości tablicy.

Ponadto nauczyliśmy się podstawowych wbudowanych właściwości i funkcji tablic w JavaScript, aby stać się bardziej interaktywne z tablicami. Ostatecznie szczegółowo omówiliśmy rodzaj tablicy danych i różnicę między tablicami a obiektami.