Repetition Statements в TypeScript

Эта статья объясняет операторы повторения в TypeScript.

YouTube Video

Оператор for в TypeScript

Оператор for в TypeScript – это базовая структура цикла для выполнения повторяющихся операций. В цикле for один и тот же блок кода может выполняться многократно на основе заданного количества повторений или условий.

Базовый синтаксис

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

• ** инициализация**: Это часть, которая выполняется только один раз перед началом цикла. Инициализировать переменные, такие как счетчики циклов.
• Условия («условия»): Определить, продолжается ли цикл. Если верно, продолжайте цикл, а если ложно, выход.
• ** Обновление (обновление)**: Запустите в конце каждого цикла и обновите счетчик цикла.

Пример 1: Базовый цикл for

В примере ниже выводятся числа от 0 до 4 по порядку.

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

Пример 2: цикл for с массивом

Вы также можете использовать цикл for для обработки элементов массива по порядку.

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

Пример 3: цикл for-in

Цикл for-in используется для перебора свойств объекта или индексов массива по порядку.

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

Пример 4: цикл for-of

Цикл for-of используется для получения значений каждого элемента по порядку из итерируемых объектов, таких как массивы или строки.

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

Пример 5: Вложенный цикл for

Также возможно использовать цикл for внутри другого цикла for, что называется вложенным циклом. Это позволяет, среди прочего, создавать двойные циклы.

 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

Резюме

• Оператор for выполняет повторяющуюся обработку на основе заданных количеств или условий.
• for-in используется для получения свойств объекта или индексов массива.
• for-of получает значения элементов из итерируемых объектов, таких как массивы.
• Сложная повторяющаяся обработка также возможна с вложенными циклами for.

Оператор for в TypeScript предоставляет мощную и гибкую обработку повторений, аналогичную другим циклам.

Оператор while в TypeScript

В TypeScript оператор while — это конструкция цикла, которая выполняет повторяющийся процесс, пока указанное условие равно true. Аналогично циклу for, цикл while подходит для случаев, когда количество итераций заранее не определено, или когда вы хотите управлять повторением на основе условия.

Базовый синтаксис

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

• Условие: Условие, при котором выполняется цикл. Цикл продолжается, пока это условие равно true, и останавливается, когда оно становится false.

Пример 1: Базовый цикл while

В приведённом ниже примере продолжается вывод значения i, пока i меньше 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

В этом примере цикл заканчивается, когда i становится равно или больше 5, так как условие становится false.

Пример 2: Пример бесконечного цикла

Если условие в цикле while всегда равно true, он может стать бесконечным. Это обычно приводит к тому, что программа не может завершиться, как планировалось, поэтому требуется осторожность.

 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

Вы можете использовать оператор break, чтобы принудительно выйти из цикла при выполнении условия.

Пример 3: цикл do-while

Цикл do-while — это структура, в которой процесс цикла выполняется как минимум один раз. Поскольку условие проверяется после выполнения процесса, процесс выполняется хотя бы один раз, даже если условие — 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

В этом примере j равно 5 с самого начала, и j < 5 — это false, но в цикле do-while процесс выполняется хотя бы один раз, независимо от условия.

Резюме

• Цикл while повторяет процесс, пока условие — true.
• Если условие завершения цикла не очевидно, нужно быть осторожным с бесконечными циклами.
• Цикл do-while отличается от обычного цикла while тем, что процесс выполняется хотя бы один раз.

Оператор while в TypeScript полезен для циклов с неопределённым числом итераций или когда требуется динамическая проверка условий.

break и continue

Вы можете использовать break и continue внутри циклов.

• break используется для досрочного завершения цикла.
• continue используется для пропуска текущей итерации и перехода к следующей итерации.

Пример использования 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

В данном случае break срабатывает, когда i становится равным 5. В результате будут отображены числа от 0 до 4.

Пример использования 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

В данном случае continue срабатывает, когда i равно 2. В результате отображаются числа, исключая 2.

Вложенные циклы в TypeScript

Вложенный цикл — это структура, в которой один цикл используется внутри другого цикла. В TypeScript поддерживаются такие конструкции циклов, как for, while и do-while. С помощью вложенных циклов можно обрабатывать двумерные массивы (матрицы) и упрощать обработку на основе нескольких условий.

Базовый синтаксис

Основной синтаксис вложенного цикла выглядит следующим образом.

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}

Для каждой итерации внешнего цикла внутренний цикл выполняет все свои итерации. Эта структура очень полезна при работе с несколькими циклами или структурами данных.

Пример вложенного цикла в TypeScript

Перебор двумерного массива

Вложенные циклы часто используются при работе с многомерными структурами данных, такими как двумерные массивы. В следующем примере перебираются элементы двумерного массива, и их значения выводятся в консоль.

 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

В этом примере мы перебираем элементы двумерного массива matrix. Внешний цикл обрабатывает строки, а внутренний цикл — столбцы, отображая каждый элемент по порядку.

Комбинация двух массивов

Далее мы рассмотрим пример вычисления всех комбинаций двух массивов. Например, вы можете взять по одному элементу из каждого из двух массивов и вывести все возможные пары.

 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)

В этом примере создаются все пары между строковым массивом array1 и числовым массивом array2. Внешний цикл извлекает элементы из array1, а внутренний цикл извлекает элементы из array2, отображая каждую пару.

Генерация координат с использованием тройного цикла

Используя тройные вложенные циклы, вы можете, например, генерировать координаты в трехмерном пространстве.

 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)

Таким образом, использование тройных вложенных циклов позволяет легко генерировать координаты в трехмерном пространстве.

Производительность вложенных циклов

Вложенные циклы удобны, но вычислительная стоимость быстро возрастает с увеличением глубины циклов. Например, если во внешнем цикле n итераций, а во внутреннем цикле m итераций, общее число итераций составит n * m. Когда циклы становятся более вложенными, вычислительная сложность увеличивается экспоненциально, что может повлиять на производительность программы.

Ниже приведены вычислительные сложности при переборе трех массивов.

 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}

В данном случае необходимо вычислить array1.length * array2.length * array3.length, это дает 3 * 3 * 3 = 27 итераций для обработки всех комбинаций.

Оптимизация вложенных циклов

При использовании вложенных циклов вы можете повысить производительность, учитывая следующие оптимизации.

1. Используйте ранний выход (early returns): Прерывайте цикл заранее, если цель достигнута, чтобы избежать лишних итераций.
2. Кэшируйте переменные цикла: Предварительно сохраняйте значения переменных, используемых в цикле (особенно длины и диапазоны), чтобы снизить затраты на вычисления при каждой итерации.
3. Измените структуры данных: Пересмотр структуры массивов и объектов может быть эффективным для ускорения определенных повторяющихся процессов.

Заключение

Вложенные циклы являются мощным инструментом для обработки сложных данных и алгоритмов. Однако с увеличением глубины циклов и числа итераций могут возникнуть проблемы с производительностью. С помощью соответствующих оптимизаций и тщательного проектирования вы можете эффективно использовать вложенные циклы в TypeScript.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video