Instrukcje powtarzania w TypeScript

Ten artykuł wyjaśnia instrukcje powtarzania w TypeScript.

YouTube Video

Instrukcja for w TypeScript

Instrukcja for w TypeScript to podstawowa struktura pętli do wykonywania powtarzalnych operacji. W pętli for, ten sam blok kodu może być wielokrotnie wykonywany na podstawie określonej liczby razy lub warunków.

Podstawowa składnia

1for (initialization; condition; update) {
2    // Code to execute repeatedly while the condition is true
3}

• • • Inicjalizacja * *: Jest to część, która jest wykonywana tylko raz przed rozpoczęciem pętli. Inicjalizacja zmiennych, takich jak liczniki pętli.
• • • Warunki ('warunek') * *: Określa, czy pętla jest kontynuowana. Jeśli true, kontynuuj pętlę, a jeśli false, wyjście.
• • • Aktualizacja ('update') * *: Uruchom na końcu każdej pętli i uaktualnij licznik pętli.

Przykład 1: Podstawowa pętla for

W poniższym przykładzie wypisywane są liczby od 0 do 4 w kolejności.

1for (let i = 0; i < 5; i++) {
2    console.log("The value of i is: " + i);
3}
4// Outputs:
5// The value of i is: 0
6// The value of i is: 1
7// The value of i is: 2
8// The value of i is: 3
9// The value of i is: 4

Przykład 2: Pętla for z tablicą

Możesz także użyć pętli for do przetwarzania elementów tablicy w kolejności.

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

Przykład 3: Pętla for-in

Pętla for-in jest używana do iteracji po właściwościach obiektu lub indeksach tablicy w kolejności.

1let car = { brand: "Toyota", model: "Corolla", year: 2020 };
2
3for (let key in car) {
4    console.log(key + ": " + car[key]);
5}
6// Outputs:
7// brand: Toyota
8// model: Corolla
9// year: 2020

Przykład 4: Pętla for-of

Pętla for-of jest używana do pobierania wartości każdego elementu w kolejności z obiektów iterowalnych, takich jak tablice lub ciągi znaków.

1let colors: string[] = ["red", "green", "blue"];
2
3for (let color of colors) {
4    console.log("Color: " + color);
5}
6// Outputs:
7// Color: red
8// Color: green
9// Color: blue

Przykład 5: Zagnieżdżona pętla for

Możliwe jest również użycie pętli for wewnątrz innej pętli for, co nazywane jest pętlą zagnieżdżoną. Pozwala to między innymi na tworzenie podwójnych pętli.

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

Podsumowanie

• Instrukcja for wykonuje przetwarzanie powtarzalne na podstawie określonych liczników lub warunków.
• for-in służy do pobierania właściwości obiektu lub indeksów tablicy.
• for-of pobiera wartości elementów z obiektów iterowalnych, takich jak tablice.
• Złożone przetwarzanie powtarzalne jest również możliwe za pomocą zagnieżdżonych pętli for.

Instrukcja for w TypeScript oferuje potężne i elastyczne przetwarzanie powtarzalne, podobnie jak inne pętle.

Instrukcje while w TypeScript

W TypeScript instrukcja while to konstrukcja pętli, która wykonuje proces powtarzalny, dopóki określony warunek jest true. Podobnie jak pętla for, pętla while nadaje się do sytuacji, w których liczba iteracji nie jest z góry określona, lub gdy chcesz kontrolować powtarzanie na podstawie warunku.

Podstawowa składnia

1while (condition) {
2    // Code to execute repeatedly while the condition is true
3}

• Warunek: Warunek, pod którym pętla jest wykonywana. Pętla trwa, dopóki ten warunek jest true, i kończy się, gdy staje się false.

Przykład 1: Podstawowa pętla while

W poniższym przykładzie pętla wyświetla wartość i, dopóki i jest mniejsze niż 5.

 1let i: number = 0;
 2
 3while (i < 5) {
 4    console.log("The value of i is: " + i);
 5    i++;
 6}
 7// Outputs:
 8// The value of i is: 0
 9// The value of i is: 1
10// The value of i is: 2
11// The value of i is: 3
12// The value of i is: 4

W tym przykładzie pętla kończy się, gdy i osiągnie wartość 5 lub większą, ponieważ warunek staje się false.

Przykład 2: Przykład nieskończonej pętli

Jeśli warunek w pętli while zawsze jest true, może stać się pętlą nieskończoną. Zazwyczaj powoduje to, że program nie zatrzymuje się zgodnie z zamierzeniem, więc należy zachować ostrożność.

 1let x: number = 0;
 2
 3while (true) {
 4    console.log("The value of x is: " + x);
 5    x++;
 6    if (x >= 5) {
 7        break; // Exit the loop when the condition is met
 8    }
 9}
10// Outputs:
11// The value of x is: 0
12// The value of x is: 1
13// The value of x is: 2
14// The value of x is: 3
15// The value of x is: 4

Możesz użyć instrukcji break, aby wymusić wyjście z pętli, gdy warunek zostanie spełniony.

Przykład 3: Pętla do-while

Pętla do-while to struktura, w której proces pętli jest wykonywany co najmniej raz. Ponieważ warunek jest oceniany po wykonaniu procesu, proces jest wykonywany co najmniej raz, nawet jeśli warunek jest false.

1let j: number = 5;
2
3do {
4    console.log("The value of j is: " + j);
5    j++;
6} while (j < 5);
7// Outputs: The value of j is: 5

W tym przykładzie j ma początkowo wartość 5, a j < 5 jest false, ale w pętli do-while proces jest wykonywany co najmniej raz niezależnie od warunku.

Podsumowanie

• Pętla while powtarza proces, dopóki warunek jest true.
• Jeśli warunek zakończenia pętli jest niejasny, należy uważać na pętle nieskończone.
• Pętla do-while różni się od zwykłej pętli while tym, że proces jest wykonywany co najmniej raz.

Instrukcja while w TypeScript jest przydatna do przetwarzania pętli, gdy liczba iteracji jest nieokreślona lub gdy konieczne jest dynamiczne sprawdzanie warunku.

break i continue

Możesz używać break i continue w pętlach.

• break służy do przedwczesnego zakończenia pętli.
• continue służy do pomijania bieżącej iteracji i przechodzenia do następnej.

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ągnie wartość 5. W wyniku tego 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;
10
11while (i < 5) {
12    i++;
13    if (i === 3) {
14        continue;  // Skips when i is 3
15    }
16    console.log(i);
17}
18// Outputs 1, 2, 4, 5

W tym przypadku continue jest wykonywane, gdy i wynosi 2. W wyniku tego wyświetlane są liczby z wyjątkiem 2.

Zagnieżdżone pętle w TypeScript

Zagnieżdżona pętla to struktura, w której jedna pętla znajduje się wewnątrz innej pętli. W TypeScript obsługiwane są konstrukcje pętli, takie jak for, while i do-while. Dzięki zagnieżdżonym pętlom można przetwarzać tablice dwuwymiarowe (macierze) i uprościć przetwarzanie oparte na wielu warunkach.

Podstawowa składnia

Podstawowa składnia zagnieżdżonej pętli jest następująca.

1for (let i: number = 0; i < n; i++) {
2  for (let j: number = 0; j < m; j++) {
3    // Processing for the inner loop
4  }
5}

Dla każdej iteracji pętli zewnętrznej pętla wewnętrzna wykonuje wszystkie swoje iteracje. Ta struktura jest bardzo przydatna przy obsłudze wielu pętli lub struktur danych.

Przykład zagnieżdżonej pętli w TypeScript

Przemierzanie tablicy dwuwymiarowej

Zagnieżdżone pętle są często używane przy manipulacji wielowymiarowymi strukturami danych, takimi jak tablice dwuwymiarowe. W poniższym przykładzie przemierzane są elementy tablicy dwuwymiarowej, a ich wartości są wyświetlane w konsoli.

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

W tym przykładzie przemierzamy tablicę dwuwymiarową matrix. Pętla zewnętrzna obsługuje wiersze, a pętla wewnętrzna obsługuje kolumny, wyświetlając każdy element w kolejności.

Kombinacja dwóch tablic

Następnie przedstawimy przykład obliczania wszystkich kombinacji dwóch tablic. Na przykład możesz wziąć jeden element z każdej z dwóch tablic i wyprowadzić wszystkie możliwe pary.

 1const array1: string[] = ['A', 'B', 'C'];
 2const array2: number[] = [1, 2, 3];
 3
 4for (let i: number = 0; i < array1.length; i++) {
 5  for (let j: number = 0; j < array2.length; j++) {
 6    console.log(`Pair: (${array1[i]}, ${array2[j]})`);
 7  }
 8}
 9// Output
10// Pair: (A, 1)
11// Pair: (A, 2)
12// Pair: (A, 3)
13// Pair: (B, 1)
14// Pair: (B, 2)
15// Pair: (B, 3)
16// Pair: (C, 1)
17// Pair: (C, 2)
18// Pair: (C, 3)

W tym przykładzie tworzone są wszystkie pary między tablicą stringów array1 a tablicą liczb array2. Pętla zewnętrzna pobiera elementy z array1, a pętla wewnętrzna pobiera elementy z array2, wyświetlając każdą parę.

Generowanie współrzędnych za pomocą potrójnej pętli

Korzystając z potrójnych zagnieżdżonych pętli, możesz na przykład generować współrzędne w przestrzeni trójwymiarowej.

 1for (let x: number = 0; x < 3; x++) {
 2  for (let y: number = 0; y < 3; y++) {
 3    for (let z: number = 0; z < 3; z++) {
 4      console.log(`Coordinate: (${x}, ${y}, ${z})`);
 5    }
 6  }
 7}
 8// Output
 9// Coordinate: (0, 0, 0)
10// Coordinate: (0, 0, 1)
11// Coordinate: (0, 0, 2)
12// ...
13// Coordinate: (2, 2, 1)
14// Coordinate: (2, 2, 2)

W ten sposób potrójne zagnieżdżone pętle umożliwiają łatwe generowanie współrzędnych w przestrzeni trójwymiarowej.

Wydajność zagnieżdżonych pętli

Zagnieżdżone pętle są wygodne, ale koszt obliczeniowy szybko rośnie wraz ze zwiększaniem głębokości pętli. Na przykład, jeśli w pętli zewnętrznej jest n iteracji, a w pętli wewnętrznej m iteracji, całkowita liczba iteracji wyniesie n * m. Kiedy pętle są dalej zagnieżdżane, złożoność obliczeniowa rośnie wykładniczo, co może wpływać na wydajność programu.

Poniżej przedstawiono złożoności obliczeniowe podczas przeszukiwania trzech tablic.

 1const array1: number[] = [1, 2, 3];
 2const array2: number[] = [4, 5, 6];
 3const array3: number[] = [7, 8, 9];
 4
 5for (let i: number = 0; i < array1.length; i++) {
 6  for (let j: number = 0; j < array2.length; j++) {
 7    for (let k: number = 0; k < array3.length; k++) {
 8      console.log(`Combination: (${array1[i]}, ${array2[j]}, ${array3[k]})`);
 9    }
10  }
11}

W tym przypadku musisz obliczyć array1.length * array2.length * array3.length, co daje 3 * 3 * 3 = 27 iteracji dla przetworzenia wszystkich kombinacji.

Optymalizacja zagnieżdżonych pętli

Korzystając z zagnieżdżonych pętli, można poprawić wydajność, biorąc pod uwagę następujące optymalizacje.

1. Wprowadź wcześniejsze wyjścia: Zakończ pętlę wcześniej, gdy cel zostanie osiągnięty, aby uniknąć zbędnych iteracji.
2. Buforowanie zmiennych pętli: Wstępnie buforuj wartości zmiennych używanych w pętli (szczególnie długości i zakresy), aby zmniejszyć koszt obliczeń za każdym razem.
3. Zmień struktury danych: Zmiana struktury tablic i obiektów może być skuteczna w przyspieszaniu określonych powtarzających się procesów.

Wnioski

Zagnieżdżone pętle to potężne narzędzie w przetwarzaniu danych i algorytmach. Jednakże wraz ze wzrostem głębokości pętli i liczby iteracji mogą pojawić się problemy z wydajnością. Dzięki odpowiednim optymalizacjom i starannemu projektowaniu można skutecznie wykorzystać zagnieżdżone pętle w TypeScript.

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

YouTube Video