PS-Studio.info

Веб и веб-технологии

ABC 28.02.2020 в 16:11

Циклы: автоматизация повторяющихся задач в программировании.

Цикл while

Базовый синтаксис цикла while:

Код

while (условие) {
  здесь повторяющийся код, который выполняется, пока условие истинно
}


Если в программе после цикла следует ещё какой-то код, то к нему программа перейдёт только тогда, когда условие цикла окажется ложным (цикл закончит свою работу), а до тех пор цикл будет повторяться снова и снова, и каждый раз при проходе цикла в случае истинности условия будет выполняться код в фигурных скобках.

Например, рассмотрим работу цикла while на примере:

Код

let number = 1;

while (number < 10) {
  document.write('<p>Число ' + number + ' меньше 10</p>');
  number++;
}


В первой строке кода задаётся начальное значение и сохраняется в переменную number. Это первое значение для проверки в условии цикла, с него начинается цикл.

Число 1 меньше 10? Да, это так, результат проверки истина (true), поэтому код в фигурных скобках выполняется: на странице выводится фраза "Число 1 меньше 10", а затем первоначальное значение переменной number увеличивается на единицу за счёт инкремента: number++

В результате в переменную сохраняется новое значение 1 + 1 = 2. И теперь это значение проходит проверку условия и так дальше, снова и снова, дойдя до закрывающей фигурной скобки, интерпретатор JavaScript возвращается к началу цикла и вновь тестирует условие, и так до тех пор, когда проверка условия не вернёт false. Если этого не произойдёт, цикл станет бесконечным.



Пример бесконечного цикла (я просто убрал последнюю строку в фигурных скобках кода выше):

Код

let number = 1;

while (number < 10) {
  document.write('<p>Число ' + number + ' меньше 10</p>');
}


Начало цикла: проверяется условие 1 < 10, возвращается истина(true), на страницу выводится фраза "Число 1 меньше 10", интерпретатор JavaScript возвращается в начало цикла и вновь тестирует условие 1 < 10...(значение переменной number не изменилось, так и осталось 1) и так бесконечно, потому что ложь(false) не вернется никогда, цикл бесконечный.

Цикл do/while

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

Синтаксис цикла do/while:

Код
do {
  здесь повторяющийся код
} while (условие);


Пример работы такого цикла:

Код
let number = 20;

do {
  document.write(number + '<br>');
  number++;
} while (number < 30);




Цикл for

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

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

Синтаксис цикла for:

Код
for(переменная; условие; действие) {
  повторяющийся каждую итерацию код
}


Название переменной, объявляемой в начале цикла может быть любым, но очень часто программисты используют сокращённую форму имени для переменной, просто i

Пример работы цикла for:

Код
for (let number = 0; number < 10; number++) {
  document.write('Число ' + number + ' меньше 10<br>');
}




В круглых скобках мы видим все три части цикла for: объявляется переменная number и ей присваивается начальное значение 0, затем идёт проверка условия 0 < 10 (что возвращает нам истину), на страницу выводится "Число 0 меньше 10", а к начальному значению переменной с помощью операции инкремента добавляется единица, после чего цикл повторяется снова, но проверка условия уже идёт с цифрой 2.
И так далее, пока условие не станет ложным (10 < 10).

Кстати, вот вам пример бесконечного цикла for:

Код
for (let number = 1; number > 0; number++) {
  document.write('Число ' + number + ' меньше 10<br>');
}


А вот так можно вывести числа в убывающем порядке, допустим, начиная с 20 и до 1:

Код

for (let i = 20; i > 0; i--) {
  console.log(i);
}


Мы объявляем начальное значение переменной i равным 20, затем проверяем условие: 20 > 0? получаем утвердительный ответ(true), в консоли выводится цифра 20, а начальное значение переменной с помощью декремента i-- уменьшается на единицу (20 - 1 = 19).
Теперь в переменной значение 19, проверяется условие 19 > 0? и так далее...



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

Код

for (let i = 20; i > 0; i--) {
  if(i == 10) {
  break;
  }
  console.log(i);
}




если же нужно пропустить определённую итерацию, можно воспользоваться директивой continue

Код

for (let i = 20; i > 0; i--) {
  if(i == 10) {
  continue;
  }
  console.log(i);
}




как видите, в консоли результата итерации с цифрой 10 нет, этот шаг пропущен.

Цикл for/in

Данный цикл используется для перебора свойств объекта и его общий синтаксис такой:

Код
for (x in y) { ... }


здесь под x - подразумевается каждое (поочерёдно) из свойств или методов, содержащихся в объекте
а вместо y ставится имя объекта, чьи свойства перебирает цикл.

Например, у нас есть объект persone:

Код

let persone = {
  name: "James",
  age: 25,
  height: 170,
  weight: 64,
  skills: {
  profession: 'artist',
  experience: 10,
  famous: true
  }
}


запишем для него:

Код
for (let key in persone) {
  console.log();
}


здесь мы видим переменную key, значение которой каждый раз меняется при переборе циклом свойств объекта (при каждой итерации в неё попадает новое имя свойства объекта - name, age, height и так далее)

в фигурных скобках, как и у любого цикла, мы пропишем код, который будет выполняться при каждой его итерации, допустим, выведем в консоль свойство (пару ключ - значение):

Код
for (let key in persone) {
  console.log('Свойство ' + key + ' имеет значение ' + persone[key]);
}


и в консоли увидим:



количество свойств в объекте, например, в том же объекте persone, можно узнать так:

Код
console.log( Object.keys(persone).length );


и получаем в консоли цифру 5, как раз число свойств в объекте persone (name, age, weight, height, skills):

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