A For… Pętla w moim umyśle

Podjęcie pracy w JavaScript po raz pierwszy z pewnością może być trudne, zwłaszcza jeśli nie masz kodu w tle. Jeśli dopiero uczysz się JavaScript, być może już wiesz, że jest to język zorientowany obiektowo, co oznacza, że ​​opiera się na koncepcji obiektów oraz ich właściwości i metod. Praca w JavaScript pozwala na łatwą manipulację Document Object Model (DOM), który reprezentuje strukturę strony internetowej. JavaScript jest często używany w połączeniu z innymi technologiami, takimi jak HTML i CSS, do tworzenia interaktywnych stron internetowych, z których ty i ja korzystamy na co dzień. Jako jeden z najczęściej używanych języków programowania w sieci, możesz się wiele nauczyć, pracując na drodze do zostania ekspertem od JavaScript.

Nauka tak złożonego języka kodowania ma swoje wyzwania. Ponieważ JavaScript jest sterowany zdarzeniami, co oznacza, że ​​wykonywanie kodu opiera się na zdarzeniach, takich jak dane wprowadzane przez użytkownika, ładowanie strony i żądania sieciowe, potrzeba dobrego zrozumienia, jak działają różne metody obiektowe i tablicowe, aby odnieść sukces jako twórca JavaScript.

Niezależnie od tego, czy zmagasz się z bardziej złożonymi metodami JavaScript, wrócę do podstaw i opiszę, jak działają różne typy pętli for w JavaScript.

Co to jest pętla for…?

Pętla for w języku JavaScript to struktura kontrolna, która umożliwia powtórzenie bloku kodu określoną liczbę razy. Podstawowa składnia pętli for wygląda następująco:

Sekcja inicjalizacji jest wykonywana tylko raz, na początku pętli. Zwykle jest używany do inicjalizacji zmiennej licznika. Warunek jest sprawdzany przed każdą iteracją pętli, a jeśli ma wartość true, blok kodu w pętli jest wykonywany. Jeśli warunek ma wartość false, pętla zostaje zakończona. Sekcja increment jest wykonywana na końcu każdej iteracji i jest zwykle używana do aktualizacji zmiennej licznika.

Na przykład poniższy kod wykorzystuje pętlę for do wyświetlenia na konsoli liczb od 1 do 10:

W tym przykładzie sekcja inicjalizacji inicjuje zmienną i na 1, sekcja warunku sprawdza, czy i jest mniejsze lub równe 10, a sekcja przyrostu zwiększa i o 1 po każdej iteracji. Powoduje to wykonanie pętli 10 razy, przy czym wartość i jest drukowana na konsoli przy każdej iteracji.

Oprócz pętli for w JavaScript można również używać pętli for…in i for…of, które są używane odpowiednio do iteracji po obiektach i tablicach.

Zrozumienie pętli for…in

Podczas gdy pętla for… jest używana do iteracji po sekwencji liczb lub tablicy, pętla for…in jest zwykle używana, gdy chcesz iterować po właściwościach obiektu.

Podstawowa składnia pętli for...in jest następująca:

Zmienna jest nową zmienną, która zostanie utworzona dla każdej iteracji pętli i przyjmie nazwę właściwości obiektu. Obiekt to obiekt, którego właściwości będą iterowane.

Na przykład poniższy kod wykorzystuje pętlę for…in do iteracji właściwości obiektu i wyświetlenia ich wartości w konsoli:

W tym przykładzie zmienna „klucz” jest tworzona dla każdej iteracji pętli i przyjmuje nazwę właściwości obiektu „osoba” oraz uzyskuje dostęp do wartości tej właściwości za pomocą zmiennej kluczowej. Wyjście byłoby:

Należy pamiętać, że kolejność właściwości w obiekcie może nie być gwarantowana, więc nie należy polegać na określonej kolejności podczas używania pętli for…in. Ponadto pętla for…in nie działa z tablicą, w takim przypadku należy użyć pętli for..of lub pętli forEach().

Zrozumienie pętli for…of

Pętla for…of w JavaScript jest używana do iteracji elementów obiektu iterowalnego, takiego jak tablica lub ciąg znaków.

Podstawowa składnia pętli for…of jest następująca:

Zmienna jest nową zmienną, która zostanie utworzona dla każdej iteracji pętli i przyjmie wartość bieżącego elementu w iterowalnym. Iterable to obiekt, którego elementy będą iterowane.

Na przykład poniższy kod wykorzystuje pętlę for…of do iteracji elementów tablicy i wyświetlenia ich wartości w konsoli:

W tym przykładzie zmienna „liczba” jest tworzona dla każdej iteracji pętli i przyjmuje wartość bieżącego elementu w tablicy. Wyjście byłoby:

Zrozumienie pętli forEach().

Metoda forEach() jest metodą tablicową, która pozwala na wykonanie określonej funkcji na każdym elemencie tablicy. Pamiętaj, że forEach() nie może być używane na obiektach, więc jest to świetna metoda, jeśli chcesz iterować po tablicy.

Podstawowa składnia metody forEach jest następująca:

pierwszym parametrem funkcji jest bieżący element, drugim parametrem jest indeks bieżącego elementu, a trzecim parametrem jest tablica. Możesz także podać opcjonalny parametr thisValue, który będzie używany jako słowo kluczowe this wewnątrz funkcji.

Na przykład poniższy kod używa metody forEach do iteracji po elementach tablicy i wyświetlenia ich wartości w konsoli:

Jeśli chcesz iterować po właściwościach obiektu, możesz użyć pętli for...in lub metody Object.keys(), która zwraca tablicę nazw własnych właściwości obiektu, w tej samej kolejności, w jakiej otrzymujemy z normalną pętlą. Następnie możesz użyć metody forEach do iteracji po tej tablicy.

Do pętli owiniętych

Podsumowując, pętle for są niezbędnym narzędziem w JavaScript do iteracji po tablicach i obiektach. Zapewniają sposób na wielokrotne wykonywanie bloku kodu, dzięki czemu są przydatne do takich zadań, jak przeglądanie elementów tablicy lub iteracja właściwości obiektu.

JavaScript oferuje różne typy pętli for, z których każda ma swoje specyficzne zastosowania:

• Pętla for służy do iteracji po sekwencji liczb lub tablicy.
• Pętla for…in służy do iteracji po właściwościach obiektu.
• Pętla for…of służy do iteracji po elementach obiektu iterowalnego, takiego jak tablica lub ciąg znaków.
• Metoda forEach() jest metodą tablicową, która pozwala na wykonanie określonej funkcji na każdym elemencie tablicy.

Użycie pętli odpowiedniego typu do danego zadania może sprawić, że kod będzie bardziej czytelny, wydajny i mniej podatny na błędy. Dlatego zrozumienie różnych typów pętli i tego, kiedy ich używać, jest ważnym aspektem programowania w JavaScript.