Главная - Основы JavaScript - Цикл в цикле и метки

Цикл в цикле и метки

Размещено в категории "Основы JavaScript"
22.09.2024 / просмотров: 36 / комментариев: 0

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

Код

for (let i = 0; i < 3; i++) {
  console.log(i);

  for (let j = 0; j < 3; j++) {
  console.log(j);
  }
}

Как будет работать в данном случае код?

Запускается основной цикл, i = 0, 0 < 3 (истина), в консоль выводится 0. Теперь запускается внутренний цикл и он работает, пока его условие отрабатывает как true, в консоль выводятся цифры 0, 1, 2.

Теперь пришла очередь следующей итерации основного цикла, где i = 1, 1 < 3 (истина), в консоль выводится 1. Снова запускается внутренний цикл...

С помощью цикла в цикле выведем фигуру треугольника в консоли

Цитата

*
**
***
****
*****
******

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

Код

let result = '';

console.log(result);

Каждый ряд нужно ограничивать в длину, так как самый длинный ряд состоит из 6 звездочек, зададим условием длина не больше 7.

Код

const length = 7;

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

Код

let result = '';
const length = 7;

for (let i = 1; i < length; i++) {

  for (let j = 0; j < i; j++) {
  result += "*";
  }

  result += "\n";
}

console.log(result);

Разберём по шагам, как работает код:

Запускается основной цикл, i = 1, 1 < 7 (истина), запускается внутренний цикл, j = 0, 0 < 1 (истина), в пустую строку result добавляется одна звёздочка, строкой ниже туда же добавляется символ переноса строки.
Первый ряд сформирован.

Вновь запускается основной цикл, теперь i = 2, 2 < 7 (истина), запускается внутренний цикл, j = 0, 0 < 2 (истина), в строку result добавляется одна звёздочка, значение j увеличивается на единицу, внутренний цикл продолжает свою работу, теперь j = 1, 1 < 2 (истина), в строку result добавляется ещё одна звёздочка, значение j увеличивается на единицу, на следующей итерации внутренний цикл останавливается, так как условие 2 < 2 ложное. Шагом ниже в result добавляется перенос строки.
Второй ряд сформирован, в нём две звёздочки.

То есть общая логика работы тут такова:

Запускается основной цикл - запускается и полностью отрабатывает внутренний цикл, добавляя в строку звездочки - к сформированной строке добавляется символ переноса строки. И так далее.

Метки

Как сделать так, чтобы остановить внутренний цикл и перейти к следующей итерации основного цикла?

Код

for (let i = 0; i < 3; i++) {
  console.log(`First level: ${i}`);

  for (let j = 0; j < 3; j++) {
  console.log(`Second level: ${j}`);

  for (let k = 0; k < 3; k++) {
  console.log(`Third level: ${k}`);
  }
  }
}

Допустим, нам нужно при значении k === 2, чтобы внутренний цикл завершил свою работу и работа кода перешла к следующей итерации основного цикла.

Прописываем внутри вложенного цикла условие, а в начала кода основного цикла ставим метку, назовём её, к примеру, first:

Код

first: for (let i = 0; i < 3; i++) {
  console.log(`First level: ${i}`);

  for (let j = 0; j < 3; j++) {
  console.log(`Second level: ${j}`);

  for (let k = 0; k < 3; k++) {
  if (k === 2) continue first;
  console.log(`Third level: ${k}`);
  }
  }
}

Результат в консоли:

Цитата

First level: 0
Second level: 0
Third level: 0
Third level: 1
First level: 1
Second level: 0
Third level: 0
Third level: 1
First level: 2
Second level: 0
Third level: 0
Third level: 1

Теперь, каждый раз, когда будет срабатывать условие k === 2, будет срабатывать continue, будет искать нужную метку и запускать следующую итерацию основного цикла.

Подробнее:

запускается основной цикл, в консоль выводится 'First level: 0',
запускается первый вложенный цикл, в консоль выводится 'Second level: 0',
запускается второй вложенный цикл и он будет работать до тех пор, пока значение k не станет равным 2, в консоль успеет попасть 'Third level: 0' и 'Third level: 1', после чего срабатывает continue и происходит переход к метке first:, за счёт чего начинается новая итерация основного цикла.

Если в этом коде заменить continue на break, то при достижении условия k === 2, сработает break, который перейдёт к метке и полностью остановит дальнейшее выполнение основного цикла

Код

first: for (let i = 0; i < 3; i++) {
  console.log(`First level: ${i}`);

  for (let j = 0; j < 3; j++) {
  console.log(`Second level: ${j}`);

  for (let k = 0; k < 3; k++) {
  if (k === 2) break first;
  console.log(`Third level: ${k}`);
  }
  }
}

Результат в консоли

Цитата

First level: 0
Second level: 0
Third level: 0
Third level: 1

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.