Tablica Javy. Część 6 Kurs JavaScript od początkującego do zaawansowanego w 10 postach na blogu

To jest część 6 serii wpisów na blogu JavaScript, która zabierze Cię od początkującego do zaawansowanego. Pod koniec tej serii poznasz wszystkie podstawy potrzebne do rozpoczęcia kodowania w JavaScript. Bez dalszych ceregieli zacznijmy od szóstego samouczka.

Tablica Java – spis treści:

1. Tablice – podstawowe informacje
2. Dodawanie elementów do tablicy Java
3. Usuwanie elementów z tablicy
4. Obliczanie długości w tablicach
5. Sortowanie tablic
6. Odwracanie elementów w tablicach
7. Dla każdego
8. Zawiera w tablicach

W tym samouczku założono, że masz już skonfigurowane środowisko kodowania. Jeśli śledziłeś poprzednie samouczki, powinieneś już je otworzyć. Jeśli z jakiegoś powodu zamknąłeś konfigurację, pełne instrukcje dotyczące konfiguracji znajdziesz w części 4 tej serii. W tym samouczku omówimy, jak skonfigurować środowisko Google Chrome Snippets do kodowania.

Jeśli nie masz nic przeciwko korzystaniu z Google Chrome, oto szybki sposób na skonfigurowanie tego samouczka, w przeciwnym razie możesz zapoznać się z częścią 4, aby uzyskać pełny zestaw instrukcji krok po kroku, jak skonfigurować środowisko kodowania.

Jeśli korzystasz z komputera Mac, skrót klawiaturowy do otwierania konsoli polega na naciśnięciu „Opcja + Command + J” po otwarciu Chrome. Jeśli używasz urządzenia z systemem Windows, możesz użyć skrótu klawiaturowego „Control + Shift + J”, aby otworzyć konsolę JavaScript po otwarciu Chrome. Możesz też przejść do menu u góry i przejść do Widok -> Programista -> Konsola JavaScript. Po otwarciu konsoli możesz kliknąć kartę "Źródła", która znajduje się tuż obok "Konsoli". Teraz pokazujesz, że widzisz Snippets. Możesz kontynuować kodowanie we fragmencie, którego już zacząłeś używać, lub utworzyć nowy fragment, klikając przycisk „+ Nowy fragment”. Tak długo, jak masz skonfigurowane kodowanie dla tego samouczka, w którym możesz ćwiczyć, dobrze jest iść.

Tablica Java – podstawowe informacje

Tablice są często używane w wielu językach programowania, a JavaScript nie jest wyjątkiem. I to nie bez powodu. Ale możesz się zastanawiać, od czego jest tablica na początek? Tablice są zasadniczo zbiorem powiązanych danych, do których można uzyskać dostęp i manipulować nimi za pomocą określonych zdefiniowanych metod. Zobaczmy kilka przykładów tablicy, aby uzyskać pełniejsze zrozumienie.

const numbersUntilTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const testAnswers = [true, true, false, false, true];
const pets = ["dogs", "cats", "birds", "fishes"];

Możemy użyć tablicy Java do przechowywania wielu różnych rodzajów danych. Na przykład w powyższym kodzie zapisaliśmy pewne liczby, wartości logiczne, a także dane typu string.

Możemy utworzyć tablicę java tak samo jak inne zmienne, ze słowami kluczowymi const lub let po lewej stronie i zawartością tablic po prawej stronie równań. Jedną rzeczą, na którą powinieneś zwrócić uwagę, jest to, że podczas tworzenia tablic używamy nawiasów kwadratowych, aby otoczyć elementy, tak jak zrobiliśmy to w powyższym kodzie. Każdy element oddzielamy również przecinkiem, niezależnie od typu danych.

W tym samouczku napiszemy kod w taki sposób, że możesz skopiować i wkleić wszystko z tego samouczka, sekwencyjnie lub wpisać wszystko, do fragmentu JavaScript w Chrome, i będzie działał zgodnie z oczekiwaniami, biorąc pod uwagę kolejność. Na przykład oznacza to, że jeśli definiujemy zmienną za pomocą słowa kluczowego const raz w samouczku, zwykle nie można ponownie zdefiniować innej zmiennej o dokładnie takiej samej nazwie. Dlatego jeśli zamierzasz częściowo skopiować i wkleić część kodu, dobrym pomysłem jest upewnienie się, że te zmienne również zdefiniowałeś w swoim kodzie. Nie powinno to stanowić problemu, jeśli postępujesz zgodnie z samouczkiem w kolejności, w jakiej jest przedstawiony.

Jedną z pierwszych rzeczy, które powinieneś wiedzieć o tablicy java jest to, że po utworzeniu tablicy musisz uzyskać dostęp do jej elementów. Tablice mają coś, co nazywa się „indeksami ponumerowanymi”, a w praktyce oznacza to, że z każdym elementem, który tworzysz w JavaScript, jest powiązana z nim liczba od lewej do prawej, od zera do długości tablicy java minus jeden.

Na przykład w powyższym kodzie dla zwierząt możemy uzyskać dostęp do pierwszego elementu „psów” wpisując nazwę zmiennej, otwierając nawiasy kwadratowe, wstawiając indeks pozycji, do której chcemy uzyskać dostęp i zamykając nawias kwadratowy :

alert(pets[0]);

Podobnie wpisanie wyższych liczb spowoduje wyświetlenie innych elementów w wyświetlanym przez nas oknie alertu.

alert(pets[1]);
alert(pets[2]);
alert(pets[3]);

Ponieważ w tablicy pets mieliśmy 4 elementy, a indeksy rozpoczęliśmy od 0, dostęp do ostatniego elementu tablicy uzyskuje się za pomocą pets[3], czyli o 1 mniej niż całkowita długość tablicy. W tym momencie możesz się zastanawiać, teraz, gdy możemy utworzyć tablicę i uzyskać dostęp do elementu z tej tablicy, co powiesz na modyfikacje tej tablicy? Co powiesz na dodanie nowych przedmiotów, zmianę istniejących przedmiotów lub usunięcie przedmiotów? Cóż, zróbmy to krok po kroku i zacznijmy od dodawania nowych elementów do tablicy.

Dodawanie elementów do tablicy Java

Istnieje wiele sposobów dodawania różnych elementów do tablicy. Jeśli wiemy, że chcemy dodać nowy element na koniec tablicy, możemy skorzystać z metody „push”. Nazywa się to również wpychaniem nowego elementu do tablicy. Zauważ, że wypchnięty element znajdzie się na końcu tablicy. Na przykład:

pets.push("snakes");
// lets verify that we have snakes as the last item
// by displaying the array contents
alert(pets);

Jeśli wiemy, że konkretnie chcemy dodać element do tablicy java jako pierwszy element, możemy użyć słowa kluczowego „unshift”. Zobaczmy to na przykładzie:

//running this code will shift all the values
// to one side and will add the first pet of dragon
pets.unshift(“dragons”); 
//lets verify this by displaying the contents of the array
alert(pets);

Fajnie, że możemy dodawać elementy na końcu tablicy lub na początku tablicy, ale co jeśli z jakiegoś powodu chcę wstrzykiwać elementy do tablicy na określone pozycje. Powiedzmy, że chcę dodać żółwie na trzeciej pozycji. Czy to w ogóle możliwe? Tak to jest. Aby wstrzyknąć element do tablicy, możemy go zdefiniować tak, jak tworzymy tę część tablicy i przypisujemy wartość do określonej części tablicy. Nie zapomnij również użyć wartości indeksu podczas wstawiania wartości. Z praktycznego punktu widzenia wygląda to tak:

pets[2] = "turtles";
// lets verify that we have turtles as the third item
// by displaying the contents of the array
alert(pets);

Usuwanie elementów z tablicy

W tym momencie możesz się zastanawiać, co powiesz na usunięcie elementów z tablicy? Cóż, jest na to wiele sposobów. Chyba najbardziej znana jest metoda „pop”. Spowoduje to w pewnym sensie wyrzucenie ostatniego elementu z tablicy. // to usunie ostatni element z tablicy pets.pop(); // zweryfikujmy wyniki wyświetlając zawartość tablicy alert(pets);

Jak widać, za pomocą metody pop usunęliśmy ostatni element zwierzaka w postaci węży z naszej tablicy zwierzaków.

Innym sposobem usunięcia elementów z tablicy java jest użycie słowa kluczowego „shift”. Gdy użyjemy shift, pierwszy element zostanie usunięty, a pozostałe wartości indeksu dostosują się do nich. Na przykład:

// this will delete the first item
// and will shift the other items into their new index values
// which will be one lower than the previous index values
pets.shift();
// let's also verify this by displaying the array
alert(pets);

Nazwa „shift” w rzeczywistości pochodzi od sposobu działania alokacji pamięci w pamięci komputera. Więc jeśli na początku jest to stosunkowo nieintuicyjne, to również jest w porządku. Na razie powinieneś wiedzieć, że za pomocą metody shift możemy usunąć pierwszy element z tablicy.

Obliczanie długości w tablicach

Kiedy mamy do czynienia z tablicami w prawdziwym życiu, może być wiele razy, gdy chcemy policzyć liczbę elementów tablicy. Może to być potrzebne w różnych miejscach, w tym na listach rzeczy do zrobienia, listach uczestników w szkole lub pracy i tak dalej. Aby to osiągnąć, mamy wbudowaną właściwość tablicy o nazwie „length”, która powie nam całkowitą długość tablicy. Na przykład:

alert(pets.length);

Sortowanie tablic

Sortowanie tablic to dość powszechna operacja w JavaScript. Istnieją różne specyficzne implementacje sortowania elementów w JavaScript. Te konkretne implementacje są ogólnie nazywane algorytmami sortowania. Różne algorytmy sortowania mogą mieć różne zalety i wady. Na przykład algorytm sortowania może zostać wybrany zamiast innego, ponieważ jest po prostu znacznie łatwiejszy do zaimplementowania w kodzie w porównaniu z innym algorytmem, mimo że mogą wykazywać nieco lepszą wydajność. Być może słyszałeś o różnych algorytmach sortowania zapewniających zoptymalizowaną wydajność. W tym samouczku użyjemy wbudowanej metody sortowania dostarczanej przez JavaScript. Sortowanie jest dość powszechnym problemem, zwłaszcza w tworzeniu stron internetowych. Na przykład, jeśli budujesz witrynę e-commerce, musisz wdrożyć różne sytuacje sortowania, z których użytkownik może wybierać. Chociaż nie ma ścisłych zasad dotyczących tego, jakie opcje i możliwości powinieneś zapewnić swoim odbiorcom, istnieją dość powszechne standardy, których oczekuje się od Ciebie jako twórcy witryn. Na przykład, jako użytkownik, istnieje duże prawdopodobieństwo, że zechcesz wystawić niektóre artykuły w sklepie zarówno w cenie rosnącej, jak i malejącej. Wdrażając sortowanie do tych zadań, należy pamiętać, jak je wdrożyć, ponieważ użytkownik może również ograniczyć wyniki wyszukiwania do niektórych innych kategorii, takich jak koszulki, czapki, torby i tak dalej. Możemy posortować tablicę, dodając „.sort()” na jej końcu.

pets.sort();
alert(pets);

Odwracanie elementów w tablicach

Odwracanie tablicy prawdopodobnie częściej łączy się z sortowaniem. W tym przypadku, ponieważ wykonujemy również te kody od góry do dołu, stosujemy również odwracanie po posortowaniu tablicy. Możemy odwrócić i ułożyć tablicę, dodając „.reverse()” na końcu. zwierzaki.rewers(); alert (zwierzęta domowe);

Ponieważ w poprzednim kroku zamówiliśmy tablicę, widać, że teraz mamy tablicę, która jest zarówno posortowana, jak i odwrócona.

Dla każdego

Kiedy pracujemy z tablicami, JavaScript zapewnia nam wygodny sposób na pętlę nad elementami tablicy za pomocą „.forEach()”. Jeśli naprawdę chcemy, nadal możemy użyć zwykłej pętli for do zapętlenia tablicy. W rzeczywistości najpierw zobaczmy, jak skonstruować pętlę for, aby zapętlić się po tablicy, a następnie zobaczymy użycie forEach().

// this will alert us 4 times to feed our pet
for (let a = 0; a < pets.length; a++) {
    alert("Time to feed my pet");
}

Ten sam efekt możemy osiągnąć również za pomocą forEach.

pets.forEach(alert("Time to feed my pet"));

Kiedy porównujemy użycie pętli for lub For each, w zależności od twoich preferencji i konkretnej sytuacji możesz preferować użycie jednej z nich zamiast drugiej. W istocie obaj uzyskują te same wyniki z różnymi stylami w kodzie. ForEach może być stosunkowo prostszy i oszczędzić Ci linijki kodu do przeczytania i napisania, ale ostatecznie będzie to Twój wybór. Nie musisz teraz dokonywać takiego wyboru i też się go trzymaj. Podczas pisania kodu możesz eksperymentować z rozwiązywaniem tego samego problemu przy użyciu różnych podejść w trakcie swojej podróży programistycznej.

Zawiera w tablicach

Możemy również sprawdzić, czy element istnieje w tablicy java. Jednym z przykładów zastosowania tej metody w prawdziwym życiu jest to, czy prywatne wydarzenie zawiera nazwisko osoby na liście zaproszeń. Rzeczywista implementacja jest również dość prosta. Najpierw piszemy nazwę tablicy, w tym przypadku pracujemy z tablicą pets. Następnie umieszczamy kropkę, aby uzyskać dostęp do różnych właściwości i metod tablicy, następnie piszemy „zawiera”, otwieramy i zamykamy nawiasy i wpisujemy nazwę elementu, który chcemy sprawdzić. Oto przykład sprawdzania elementu, o którym wiemy, że istnieje w tablicy:

alert(pets.includes("dogs"));

Jeśli spróbujemy zrobić to samo z elementem, o którym wiemy, że nie istnieje w tablicy java, spodziewamy się otrzymać odpowiedź false. Zobaczmy też ten przypadek na przykładzie:

alert(pets.includes("puppy"));

Ponieważ nie mieliśmy szczeniaka w tablicy pets, otrzymujemy fałsz, tak jak się spodziewaliśmy. W następnym samouczku zobaczymy kolejną ważną koncepcję zarówno w świecie programowania, jak iw JavaScript.

Kurs JavaScript od początkującego do zaawansowanego w 10 postach na blogu:

1. Jak zacząć kodować w JavaScript?
2. Podstawy JavaScript
3. Zmienne i różne typy danych w JavaScript
4. Fragmenty i struktury kontrolne
5. Pętle while i pętle for
6. Tablica Javy
7. Funkcje JavaScript
8. Obiekty JavaScript
9. Metody JavaScript i nie tylko
10. Podsumowanie kursu JavaScript