Articles
Введение в JavaScript
Обработка повторений в JavaScript

Обработка повторений в JavaScript

В этой статье мы объясним обработку повторений в JavaScript.

YouTube Video

Оператор for в JavaScript

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

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

Оператор for в JavaScript – это синтаксис для выполнения итерации. Он многократно выполняет указанный блок кода, пока выполняется определенное условие. С помощью оператора for один и тот же процесс можно эффективно выполнять несколько раз.

  • Инициализация (initialization): Часть, которая выполняется только один раз перед началом цикла. Инициализируйте переменные, например, счетчик цикла.
  • Условие (condition): Условие, определяющее необходимость продолжения цикла. Если true, цикл продолжается; если false, он завершается.
  • Обновление (update): Эта часть выполняется в конце каждой итерации цикла для обновления счетчика.

Пример 

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

В данном случае i начинается с 0, и цикл выполняется, пока i < 5 равно true. i++ увеличивает i на 1 на каждой итерации цикла. В результате выводятся числа от 0 до 4.

Область видимости счетчика цикла

Объявляйте или инициализируйте переменные в части инициализации оператора for. Переменные, объявленные здесь, действительны только в пределах цикла.

1for (let i = 0; i < 3; i++) {
2    console.log(i); // Outputs 0, 1, 2
3}
4console.log(i);  // ReferenceError
  • Как показано в этом примере, обращение к переменной за пределами оператора for приведет к ошибке.

Бесконечный цикл

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

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

Массивы и оператор for

Часто используется оператор for в сочетании с массивами. Удобно для обработки каждого элемента массива.

Пример 

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"

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

Другие конструкции циклов

Оператор for...of

Оператор for...of используется для итерируемых объектов, таких как массивы и строки.

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

Это позволяет обрабатывать каждый элемент без использования индексов.

Оператор for...in

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

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"

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

Резюме

  • Оператор for является конструкцией цикла, состоящей из трёх частей: инициализация, условие и обновление.
  • Вы можете управлять поведением циклов, используя оператор break или continue.
  • При работе с массивами или объектами элементы или свойства могут обрабатываться эффективно.

Оператор while в JavaScript

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

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

Оператор while в JavaScript является структурой цикла, выполняющей повторяющиеся операции до тех пор, пока указанное условие равно true. Подобно оператору for, оператор while задаёт только условие.

  • Условие: Запишите условное выражение, определяющее, продолжать ли выполнение цикла. Цикл продолжается, пока условие равно true, и заканчивается, когда оно становится false.

Пример 

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

В этом примере цикл начинается с переменной i, равной 0, и выполняется, пока условие i < 5 равно true. На каждой итерации цикла значение i увеличивается на 1, и когда i становится равным 5, условие становится false, и цикл завершается. В результате оператор while выводит значения от 0 до 4.

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

Бесконечный цикл

Если условие всегда равно true, возникает бесконечный цикл, который не завершится. Бесконечных циклов следует избегать, но если они используются намеренно, вы можете завершить цикл с помощью оператора break.

Пример 

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

Обработка массивов с помощью цикла while

Массивы также можно обрабатывать с помощью оператора while.

Пример 

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"

Оператор do...while

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

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

Оператор do...while, разновидность оператора while, проверяет условие после выполнения цикла хотя бы один раз. Если оператор while сначала проверяет условие, то оператор do...while выполняет процесс один раз перед проверкой условия.

Пример 

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

В этом примере i отображается от 0 до 4. Оператор do...while отличается от оператора while тем, что он всегда выполняется хотя бы один раз, даже если условие равно false.

Резюме

  • Оператор while используется для многократного выполнения кода, пока условие равно true.
  • Будьте внимательны с бесконечными циклами, но управление потоком циклов можно осуществлять с помощью break и continue.
  • Оператор do...while полезен, если нужно выполнить цикл хотя бы один раз.

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;
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

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

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

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

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

Основная структура вложенных циклов

Основная структура вложенного цикла заключается в форме, где один или несколько циклов вложены в другой цикл. Каждый раз, когда внешний цикл выполняется один раз, внутренний цикл выполняется столько раз.

Ниже приведен базовый пример двух вложенных циклов.

 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

В приведенном выше коде счетчик i используется во внешнем цикле, а счетчик j - во внутреннем цикле. Каждый раз, когда внешний цикл выполняется один раз, внутренний цикл выполняется дважды.

Практический пример вложенных циклов.

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

В следующем примере мы работаем с двумерным массивом и выводим каждый элемент.

 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

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

Примечания

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

  1. Проблемы с производительностью

    По мере увеличения глубины вложенных циклов время выполнения резко возрастает. Например, если внешний цикл выполняется 100 раз, а внутренний 100 раз, всего будет выполнено 10 000 операций. Таким образом, если итераций цикла много, следует рассмотреть возможность оптимизации цикла для повышения эффективности.

  2. Применение к сложным алгоритмам

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

Рассмотрение вопросов оптимизации.

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

  1. Раннее завершение цикла

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

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}

  1. Вынос вычислений за пределы цикла

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

 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}

Резюме

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

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

YouTube Video

Лучшие практики использования условных операторов в JavaScriptЛучшие практики итерации в JavaScript