Przetwarzanie powtórzeń w JavaScript

W tym artykule wyjaśnimy przetwarzanie powtórzeń w JavaScript.

YouTube Video

Instrukcja for w JavaScript

Podstawowa składnia

1for (initialization; condition; update) {
2  // Code to repeat
3}

Instrukcja for w JavaScript to składnia służąca do wykonywania iteracji. Wielokrotnie wykonuje określony blok kodu, dopóki spełniony jest określony warunek. Używając instrukcji for, można efektywnie wykonywać ten sam proces wielokrotnie.

• Inicjalizacja (initialization): Część wykonywana tylko raz przed rozpoczęciem pętli. Inicjalizuj zmienne, takie jak licznik pętli.
• Warunek (condition): Warunek określający, czy pętla ma być kontynuowana. Jeśli true, pętla jest kontynuowana; jeśli false, kończy się.
• Aktualizacja (update): Wykonywana na końcu każdej iteracji pętli w celu zaktualizowania licznika.

Przykład

1for (let i = 0; i < 5; i++) {
2    console.log(i);
3}

W tym przypadku i zaczyna się od 0, a pętla działa, dopóki i < 5 jest true. i++ zwiększa i o 1 przy każdej iteracji pętli. W rezultacie wyświetlane są liczby od 0 do 4.

Zakres licznika pętli

Deklaruj lub inicjalizuj zmienne w części inicjalizacyjnej instrukcji for. Zmienne zadeklarowane tutaj są ważne tylko w obrębie pętli.

1for (let i = 0; i < 3; i++) {
2    console.log(i); // Outputs 0, 1, 2
3}
4console.log(i);  // ReferenceError

• Jak pokazano w tym przykładzie, odwołanie się do zmiennej poza instrukcją for spowoduje błąd.

Pętla nieskończona

Ustawienie warunku, który nie kończy pętli, powoduje powstanie pętli nieskończonej. Może to obciążyć przeglądarkę lub system, dlatego należy zachować ostrożność.

1for (;;) {
2    console.log("Infinite loop");
3    break; // Exits the infinite loop with break
4}

Tablice i instrukcja for

Często używa się instrukcji for w połączeniu z tablicami. Jest to wygodne do przetwarzania każdego elementu tablicy.

Przykład

1let fruits = ["apple", "banana", "cherry"];
2
3for (let i = 0; i < fruits.length; i++) {
4    console.log(fruits[i]);
5}
6// Outputs "apple", "banana", "cherry"

W ten sposób możesz przetwarzać każdy element tablicy za pomocą indeksów.

Inne Konstrukcje Pętli

Instrukcja for...of

Instrukcja for...of jest używana dla obiektów iterowalnych, takich jak tablice i ciągi znaków.

1let fruits = ["apple", "banana", "cherry"];
2
3for (let fruit of fruits) {
4    console.log(fruit);
5}
6// Outputs "apple", "banana", "cherry"

Pozwala to przetwarzać każdy element bez użycia indeksów.

Instrukcja for...in

Instrukcja for...in jest używana do iteracji po właściwościach obiektu.

1let person = { name: "John", age: 30, city: "Tokyo" };
2
3for (let key in person) {
4    console.log(key + ": " + person[key]);
5}
6// Outputs "name: John", "age: 30", "city: Tokyo"

W ten sposób możesz wykonywać operacje na każdym elemencie, używając kluczy.

Podsumowanie

• Instrukcja for to konstrukcja pętli składająca się z trzech części: inicjalizacji, warunku i aktualizacji.
• Możesz kontrolować zachowanie pętli za pomocą instrukcji break lub continue.
• W połączeniu z tablicami lub obiektami elementy lub właściwości mogą być przetwarzane efektywnie.

Instrukcja while w JavaScript

Podstawowa składnia

1while (condition) {
2    // Code that repeats while the condition is true
3}

Instrukcja while w JavaScript to struktura pętli, która wykonuje powtarzające się operacje tak długo, jak podany warunek jest true. Podobnie jak instrukcja for, instrukcja while określa tylko warunek.

• Warunek: Napisz wyrażenie warunkowe, które decyduje o kontynuacji pętli. Pętla trwa, dopóki warunek jest true, i kończy się, gdy stanie się false.

Przykład

1let i = 0;
2
3while (i < 5) {
4    console.log(i);
5    i++;
6}
7console.log(i);  // 5

W tym przykładzie pętla rozpoczyna się od zmiennej i ustawionej na 0 i działa tak długo, jak i < 5 jest true. W każdej iteracji pętli i jest zwiększane o 1, a gdy i osiągnie 5, warunek staje się false i pętla się kończy. W wyniku działania instrukcji while wyświetlane są wartości od 0 do 4.

W przeciwieństwie do instrukcji for, w instrukcji while inicjalizacja i aktualizacja zmiennych są zapisywane jako osobne instrukcje. Możesz również odwołać się do zmiennej po instrukcji while. W tym przypadku 5 jest wyświetlane po zakończeniu instrukcji while.

Pętla nieskończona

Jeśli warunek jest zawsze true, powstaje nieskończona pętla, która się nie kończy. Należy unikać nieskończonych pętli, ale jeśli są używane celowo, można zakończyć pętlę za pomocą instrukcji break.

Przykład

1while (true) {
2    console.log("Infinite loop");
3    break;  // Ends the loop with `break`
4}

Przetwarzanie tablic za pomocą pętli while

Możliwe jest również przetwarzanie tablic za pomocą instrukcji while.

Przykład

1let fruits = ["apple", "banana", "cherry"];
2let i = 0;
3
4while (i < fruits.length) {
5    console.log(fruits[i]);
6    i++;
7}
8// Outputs "apple", "banana", "cherry"

Instrukcja do...while

Podstawowa składnia

1do {
2    // Code that is executed at least once
3} while (condition);

Instrukcja do...while, będąca wariantem instrukcji while, sprawdza warunek po wykonaniu pętli co najmniej raz. Podczas gdy instrukcja while najpierw sprawdza warunek, instrukcja do...while wykonuje proces raz przed weryfikacją warunku.

Przykład

1let i = 0;
2
3do {
4    console.log(i);
5    i++;
6} while (i < 5);

W tym przykładzie i jest wyświetlane od 0 do 4. Instrukcja do...while różni się od instrukcji while tym, że zawsze jest wykonana raz, nawet gdy warunek jest false.

Podsumowanie

• Instrukcja while jest używana do wielokrotnego wykonywania kodu, dopóki warunek jest true.
• Należy uważać na nieskończone pętle, ale przepływ pętli można kontrolować za pomocą break i continue.
• Instrukcja do...while jest przydatna, gdy chcesz wykonać pętlę co najmniej raz.

break i continue

Możesz używać break i continue wewnątrz pętli.

• break jest używane do przedwczesnego zakończenia pętli.
• continue pomija bieżącą iterację i przechodzi do następnej iteracji.

Przykład użycia break

 1for (let i = 0; i < 10; i++) {
 2    if (i === 5) {
 3        break;  // Exits the loop when i is 5
 4    }
 5    console.log(i);
 6}
 7// Outputs 0, 1, 2, 3, 4
 8
 9let i = 0;
10
11while (i < 10) {
12    if (i === 5) {
13        break;  // Ends the loop when i is 5
14    }
15    console.log(i++);
16}
17// Outputs 0, 1, 2, 3, 4

W tym przypadku break jest wykonywane, gdy i osiąga wartość 5. W rezultacie wyświetlane są liczby od 0 do 4.

Przykład użycia continue

 1for (let i = 0; i < 5; i++) {
 2    if (i === 2) {
 3        continue;  // Skips when i is 2
 4    }
 5    console.log(i);
 6}
 7// Outputs 0, 1, 3, 4
 8
 9let i = 0;
10while (i < 5) {
11    i++;
12    if (i === 3) {
13        continue;  // Skips when i is 3
14    }
15    console.log(i);
16}
17// Outputs 1, 2, 4, 5

W tym przypadku continue jest wykonywane, gdy i ma wartość 2. W rezultacie wyświetlane są liczby inne niż 2.

Zagnieżdżone pętle w JavaScript

W programowaniu w JavaScript zagnieżdżona pętla to struktura, w której jedna pętla znajduje się wewnątrz innej. Takie pętle są bardzo skuteczne, gdy konkretne algorytmy lub procesy obejmują wiele wymiarów lub warstw. Na przykład przetwarzanie tablicy wielowymiarowej zawierającej tablice jest typowym przypadkiem.

Tutaj wyjaśnimy podstawową strukturę zagnieżdżonych pętli, przykłady użycia, środki ostrożności i kwestie optymalizacji.

Podstawowa struktura zagnieżdżonych pętli

Podstawowa struktura zagnieżdżonej pętli to forma, w której jedna lub więcej pętli znajduje się wewnątrz innej pętli. Za każdym razem, gdy pętla zewnętrzna wykona się jeden raz, pętla wewnętrzna wykonuje się tyle razy.

Poniżej znajduje się podstawowy przykład dwóch zagnieżdżonych pętli.

 1for (let i = 0; i < 3; i++) {
 2    console.log(`Outer loop iteration: ${i}`);
 3
 4    for (let j = 0; j < 2; j++) {
 5        console.log(`  Inner loop iteration: ${j}`);
 6    }
 7}
 8// Output:
 9// Outer loop iteration: 0
10//   Inner loop iteration: 0
11//   Inner loop iteration: 1
12// Outer loop iteration: 1
13//   Inner loop iteration: 0
14//   Inner loop iteration: 1
15// Outer loop iteration: 2
16//   Inner loop iteration: 0
17//   Inner loop iteration: 1

W powyższym kodzie i jest liczone w pętli zewnętrznej, a j jest liczone w pętli wewnętrznej. Za każdym razem, gdy pętla zewnętrzna wykona się jeden raz, pętla wewnętrzna wykonuje się dwa razy.

Praktyczny przykład zagnieżdżonych pętli

Zagnieżdżone pętle są szczególnie przydatne do obsługi tablic wielowymiarowych. Na przykład, podczas przetwarzania tablicy dwuwymiarowej musisz obsługiwać zarówno wiersze (pętla zewnętrzna), jak i kolumny (pętla wewnętrzna).

W poniższym przykładzie obsługujemy tablicę dwuwymiarową i drukujemy każdy jej element.

 1const matrix = [
 2  [1, 2, 3],
 3  [4, 5, 6],
 4  [7, 8, 9]
 5];
 6
 7for (let row = 0; row < matrix.length; row++) {
 8    for (let col = 0; col < matrix[row].length; col++) {
 9        console.log(`Element at [${row}][${col}] is: ${matrix[row][col]}`);
10    }
11}
12// Output:
13// Element at [0][0] is: 1
14// Element at [0][1] is: 2
15// Element at [0][2] is: 3
16// Element at [1][0] is: 4
17// Element at [1][1] is: 5
18// Element at [1][2] is: 6
19// Element at [2][0] is: 7
20// Element at [2][1] is: 8
21// Element at [2][2] is: 9

W ten sposób, używając zagnieżdżonych pętli, uzyskujemy dostęp do każdego elementu tablicy dwuwymiarowej.

Notatki

Istnieją pewne kwestie, na które należy zwrócić uwagę podczas korzystania z zagnieżdżonych pętli.

1. Problemy z wydajnością

   Wraz z większym zagłębieniem zagnieżdżonych pętli czas wykonania znacznie się wydłuża. Na przykład, jeśli pętla zewnętrzna wykonuje się 100 razy, a pętla wewnętrzna 100 razy, w sumie wykonywane jest 10 000 operacji. Dlatego jeśli mamy do czynienia z wieloma iteracjami pętli, należy rozważyć ich optymalizację w celu zwiększenia wydajności.

2. Zastosowanie w złożonych algorytmach

   Zagnieżdżone pętle są bardzo potężne, ale w miarę wzrostu złożoności przetwarzania kod może stać się trudny do zrozumienia. Dlatego, aby zachować czytelność kodu, ważne jest odpowiednie uporządkowanie przetwarzania za pomocą komentarzy i funkcji.

Rozważania dotyczące optymalizacji

Podczas korzystania z zagnieżdżonych pętli można rozważyć następujące optymalizacje.

1. Wczesne zakończenie pętli

   Jeśli wewnątrz pętli zostanie spełniony określony warunek, można użyć instrukcji break, aby zakończyć pętlę. Pozwoli to uniknąć niepotrzebnych pętli i poprawić wydajność.

1for (let i = 0; i < 5; i++) {
2    for (let j = 0; j < 5; j++) {
3        if (i + j > 5) {
4            break;
5        }
6        console.log(`i: ${i}, j: ${j}`);
7    }
8}

2. Przenoszenie obliczeń na zewnątrz

   Zamiast wykonywać te same obliczenia wewnątrz pętli za każdym razem, można je przeprowadzić raz na zewnątrz pętli i użyć wyniku, aby proces był bardziej wydajny.

 1let array = [1, 2, 3, 4, 5];
 2
 3// Inefficient example (calculating every time)
 4for (let i = 0; i < array.length; i++) {
 5    for (let j = 0; j < array.length; j++) {
 6        let sum = array[i] + array[j];
 7        console.log(sum);
 8    }
 9}
10
11// Efficient example (calculating outside)
12let arrayLength = array.length;
13for (let i = 0; i < arrayLength; i++) {
14    for (let j = 0; j < arrayLength; j++) {
15        let sum = array[i] + array[j];
16        console.log(sum);
17    }
18}

Podsumowanie

Zagnieżdżone pętle są bardzo przydatne w obsłudze złożonych struktur danych i algorytmów w JavaScript. Jednakże, jeśli nie są używane prawidłowo, mogą prowadzić do pogorszenia wydajności i zmniejszenia czytelności kodu. Aby efektywnie korzystać z zagnieżdżonych pętli, ważne jest dążenie do optymalizacji pętli i organizacji kodu oraz stosowanie odpowiednich podejść w zależności od sytuacji.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video