|
7 days ago | |
---|---|---|
.. | ||
README.md | 7 days ago | |
assignment.md | 2 weeks ago |
README.md
Podstawy JavaScript: Tablice i Pętle
Sketchnote autorstwa Tomomi Imura
Quiz przed wykładem
Ta lekcja obejmuje podstawy JavaScript, języka, który zapewnia interaktywność w sieci. W tej lekcji nauczysz się o tablicach i pętlach, które są używane do manipulacji danymi.
🎥 Kliknij obrazy powyżej, aby obejrzeć filmy o tablicach i pętlach.
Możesz przerobić tę lekcję na Microsoft Learn!
Tablice
Praca z danymi to częste zadanie w każdym języku programowania, a jest ono znacznie łatwiejsze, gdy dane są zorganizowane w strukturze, takiej jak tablice. W tablicach dane są przechowywane w strukturze przypominającej listę. Jedną z głównych zalet tablic jest to, że można w nich przechowywać różne typy danych.
✅ Tablice są wszędzie wokół nas! Czy potrafisz podać przykład tablicy z życia codziennego, na przykład tablicy paneli słonecznych?
Składnia tablicy to para nawiasów kwadratowych.
let myArray = [];
To jest pusta tablica, ale tablice mogą być deklarowane już z danymi. Wartości w tablicy są oddzielone przecinkami.
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
Wartości w tablicy mają przypisany unikalny numer zwany indeksem, który jest liczbą całkowitą przypisywaną na podstawie odległości od początku tablicy. W powyższym przykładzie wartość "Chocolate" ma indeks 0, a "Rocky Road" ma indeks 4. Użyj indeksu z nawiasami kwadratowymi, aby pobrać, zmienić lub wstawić wartości tablicy.
✅ Czy zaskakuje Cię, że indeksy w tablicach zaczynają się od zera? W niektórych językach programowania indeksy zaczynają się od 1. To ciekawa historia, o której możesz przeczytać na Wikipedii.
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors[2]; //"Vanilla"
Możesz wykorzystać indeks, aby zmienić wartość, na przykład tak:
iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"
Możesz również wstawić nową wartość pod danym indeksem w ten sposób:
iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"
✅ Bardziej powszechnym sposobem dodawania wartości do tablicy jest użycie operatorów tablicowych, takich jak array.push().
Aby dowiedzieć się, ile elementów znajduje się w tablicy, użyj właściwości length
.
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors.length; //5
✅ Wypróbuj sam! Użyj konsoli przeglądarki, aby utworzyć i manipulować tablicą własnego pomysłu.
Pętle
Pętle pozwalają nam wykonywać powtarzalne lub iteracyjne zadania, co pozwala zaoszczędzić dużo czasu i kodu. Każda iteracja może różnić się zmiennymi, wartościami i warunkami. Istnieją różne rodzaje pętli w JavaScript, które różnią się nieco składnią, ale zasadniczo robią to samo: iterują po danych.
Pętla for
Pętla for
wymaga 3 elementów do iteracji:
counter
Zmienna, która jest zazwyczaj inicjalizowana liczbą i zlicza liczbę iteracjicondition
Wyrażenie wykorzystujące operatory porównania, które powoduje zatrzymanie pętli, gdy zwrócifalse
iteration-expression
Wykonywane na końcu każdej iteracji, zazwyczaj używane do zmiany wartości licznika
// Counting up to 10
for (let i = 0; i < 10; i++) {
console.log(i);
}
✅ Uruchom ten kod w konsoli przeglądarki. Co się stanie, gdy wprowadzisz drobne zmiany w liczniku, warunku lub wyrażeniu iteracyjnym? Czy możesz sprawić, by działała wstecz, tworząc odliczanie?
Pętla while
W przeciwieństwie do składni pętli for
, pętle while
wymagają jedynie warunku, który zatrzyma pętlę, gdy stanie się false
. Warunki w pętlach zazwyczaj opierają się na innych wartościach, takich jak liczniki, i muszą być zarządzane w trakcie działania pętli. Wartości początkowe liczników muszą być utworzone poza pętlą, a wszelkie wyrażenia spełniające warunek, w tym zmiana licznika, muszą być utrzymywane wewnątrz pętli.
//Counting up to 10
let i = 0;
while (i < 10) {
console.log(i);
i++;
}
✅ Dlaczego wybrałbyś pętlę for zamiast while? 17 tysięcy użytkowników miało to samo pytanie na StackOverflow, a niektóre opinie mogą Cię zainteresować.
Pętle i Tablice
Tablice są często używane z pętlami, ponieważ większość warunków wymaga długości tablicy, aby zatrzymać pętlę, a indeks może również pełnić rolę licznika.
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
for (let i = 0; i < iceCreamFlavors.length; i++) {
console.log(iceCreamFlavors[i]);
} //Ends when all flavors are printed
✅ Poeksperymentuj z iterowaniem po tablicy własnego pomysłu w konsoli przeglądarki.
🚀 Wyzwanie
Istnieją inne sposoby iterowania po tablicach niż pętle for i while. Są to forEach, for-of i map. Przepisz swoją pętlę tablicową, używając jednej z tych technik.
Quiz po wykładzie
Przegląd i samodzielna nauka
Tablice w JavaScript mają wiele metod, które są niezwykle przydatne do manipulacji danymi. Przeczytaj o tych metodach i wypróbuj niektóre z nich (takie jak push, pop, slice i splice) na tablicy własnego pomysłu.
Zadanie
Zastrzeżenie:
Ten dokument został przetłumaczony za pomocą usługi tłumaczenia AI Co-op Translator. Chociaż dokładamy wszelkich starań, aby tłumaczenie było precyzyjne, prosimy pamiętać, że automatyczne tłumaczenia mogą zawierać błędy lub nieścisłości. Oryginalny dokument w jego rodzimym języku powinien być uznawany za wiarygodne źródło. W przypadku informacji o kluczowym znaczeniu zaleca się skorzystanie z profesjonalnego tłumaczenia przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z użycia tego tłumaczenia.