JavaScript,Теорія

JavaScript. Поняття циклу. Оператори циклу for, while, do-while

Поняття циклу. Оператори циклу for, while, do-while. Приклади

Зміст

Пошук на інших ресурсах:

1. Поняття циклічного процесу. Цикл. Види операторів циклу в JavaScript

При написанні програм різної складності часто виникає потреба у багатократному виконанні однотипних операцій, які повторюються циклічно. Для забезпечення виконання часто повторюваних операцій у мові JavaScript використовуються оператори циклу.

Існують наступні різновиди операторів циклу:

  • for – цикл з параметром;
  • for-in – цикл руху по об’єктах;
  • while – цикл з передумовою;
  • do-while – цикл з постумовою.

Програміст вибирає який з циклів потрібно застосовувати в тому чи іншому випадку. Цикли for, while, do-while можуть замінювати один-одного.

  ⇑

2. Цикл for. Синтаксис використання. Робота циклу for

Реалізація циклу for у мові JavaScript дуже подібна до такого ж циклу мов C++, C#, Java. У загальному вигляді цикл for можна представити наступним чином:

for (init_expr; cond_expr; modification)
{
  // Тіло циклу
  // ...
}

тут

  • init_expr – вираз ініціалізації лічильника циклу. Виразів ініціалізації може бути декілька, у цьому випадку кожен вираз розділяється комою;
  • cond_expr – умовний вираз;
  • modification – один або декілька виразів модифікації лічильника циклу. Лічильник циклу може модифікувати своє значення як в спадному так і в зростаючому порядку.

Будь-яка з частин init_expr, cond_expr, modification може бути відсутня.

Цикл for працює за наступним алгоритмом.

  1. Спочатку виконується один або декілька виразів ініціалізації init_expr.
  2. Відбувається перевірка умовного виразу cond_expr. Якщо результат перевірки умовного виразу рівний true (cond_expr = true), то відбувається перехід на пункт 3. Якщо cond_expr=false, то відбувається вихід з циклу, тобто перехід на пункт 6.
  3. Виконання однієї ітерації тіла циклу.
  4. Після виконання однієї ітерації тіла циклу управління передається оператору modification. Тут змінюється значення лічильника циклу.
  5. Перехід на пункт 2 – перевірку condition.
  6. Кінець виконання циклу.

  ⇑

2.1. Приклад обчислення середнього арифметичного елементів масиву

У прикладі обчислюється середнє арифметичне елементів масиву чисел з плаваючою комою. Для отримання кількості елементів масиву використовується властивість length цього масиву.

 

// Цикл for

// Обчислити середнє значення елементів масиву
// 1. Задано масив
var A = [2.8, 3.5, 1.4, 3.2, 1.7];

// 2. Оголосити змінні
var avg = 0 // результат - середнє арифметичне

// 3. Цикл обчислення суми елементів масиву,
//   тут A.length - кількість елементів масиву
for (var i = 0; i < A.length; i++)
  avg += A[i]

// 4. Отримати середнє арифметичне
avg = avg / A.length

// 5. Вивести результат
console.log("avg = ", avg)

Результат

avg = 2.5199999999999996

  ⇑

2.2. Приклад формування ряду Фібоначчі для заданого максимального значення

 

// Цикл for

// Сформувати ряд Фібоначчі для заданого n
// 1. Задано n
var n = 50

// 2. Оголосити додаткові змінні
var t1, t2, t3
var s = "" // результуючий рядок сформований з чисел

// 3. Обчислення елементів ряду Фібоначчі.
//   Формується результуючий рядок
t1 = 1
t2 = 1
t3 = t1 + t2
s = s + t1 + " " + t2 + " "

for (t1 = 1, t2 = 1; t3 <= n;) {
  t3 = t1 + t2;
  s = s + t3 + " ";
  t1 = t2;
  t2 = t3;
}

// 4. Вивести результуючий рядок s
console.log(s)

Результат

1 1 2 3 5 8 13 21 34 55

  ⇑

2.3. Приклад табулювання функції y = sin(x)

У прикладі демонструється застосування циклу for для створення даних, які базуються на результатах табулювання функції sin(x).

// Табулювання функції y = sin(x)
// на діапазоні [a; b] з кроком h.

// 1. Задано a, b - діапазон та крок h = 0.1
var a = 0, b = 2, h = 0.1;
var x, y;

// 2. Циклічний процес табулювання з виведенням на екран результату
for (var t = a; t <= b; t += h) {
  // Округлити результат до 2-х знаків після коми
  x = Number.parseFloat(t).toFixed(2);
  y = Number.parseFloat(Math.sin(t)).toFixed(2);

  // Вивести результат на екран
  console.log("x = ", x, "   y = ", y);
}

Результат

x = 0.00   y = 0.00
x = 0.10   y = 0.10
x = 0.20   y = 0.20
x = 0.30   y = 0.30
x = 0.40   y = 0.39
x = 0.50   y = 0.48
x = 0.60   y = 0.56
x = 0.70   y = 0.64
x = 0.80   y = 0.72
x = 0.90   y = 0.78
x = 1.00   y = 0.84
x = 1.10   y = 0.89
x = 1.20   y = 0.93
x = 1.30   y = 0.96
x = 1.40   y = 0.99
x = 1.50   y = 1.00
x = 1.60 y = 1.00
x = 1.70   y = 0.99
x = 1.80   y = 0.97
x = 1.90   y = 0.95

  ⇑

3. Цикл while

Цикл while називається циклом з передумовою. Це означає, що для виконання першої та кожної наступної ітерації циклу спочатку перевіряється умова виконання циклу.

Загальна форма оператора циклу while така сама як в мовах C++, C#, Java:

while (condition) {
  // Тіло циклу
  // ...
}

тут

  • condition – деякий умовний вираз. Тіло циклу виконується ітерація за ітерацією якщо condition = true. Якщо при перевірці умови condition стає рівним false відбувається вихід з циклу.

  ⇑

3.1. Приклад визначення максимального значення в масиві

 

// Цикл while

// Пошук максимуму в масиві
// 1. Задано масив
var A = [2, 3, 8, -4, 9, 6, 7]

// 2. Встановити максимум на перший елемент масиву
var max = A[0]

// 3. Цикл пошуку
var i = 1

while (i < A.length) {
  if (max < A[i]) max = A[i];
  i++;
}

// 4. Вивести результат
console.log("max = ", max)

Результат

max = 9

  ⇑

3.2. Пошук числа згідно з умовою

Умова задачі. Задано число a для якого справджується умова

1 < a ≤ 1.5

Серед чисел

1+1/2, 1+1/3, 1+1/4, ...

знайти перше, яке менше за число a.

Розв’язок.

// Цикл while

// Пошук першого числа, яке менше за число a
// у ряді чисел: 1+1/2, 1+1/3, 1+1/4,...

// 1. Задано число a
var a = 1.05;

// Оголосити додаткові змінні
var res, t

t = 2;
res = 1 + 1 / t;

while (res >= a) {
  t = t + 1;
  res = 1 + 1 / t;
}

console.log("t = ", t);
console.log("res = ", res);

Результат

t = 21
res = 1.0476190476190477

  ⇑

3.3. Обробка рядків в циклі while. Приклад

Умова задачі. Задано текст. Визначити позицію першого входження символу ‘+’ у цьому тексті.

Розв’язок.

// Обробка тексту в циклі while.

// Визначити позицію першого входження символу '+' в тексті
// 1. Ввести текст
var str = prompt("Input text:")

// 2. Цикл визначення позиції
var pos; // шукана позиція

pos = 0

while (str[pos]!='+')
  pos++;

// 3. Вивести результат
alert("Position = " + pos)

  ⇑

4. Цикл do-while

Цикл do-while ще називається циклом з постумовою. Це означає, що спочатку слідує тіло циклу, потім перевіряється умова. Таким чином тіло циклу виконується мінімум один раз. Якщо розглянути цикли for та while, то можуть бути ситуації, коли тіло цих циклів не виконається жодного разу. Це є основною відмінністю циклу do-while від циклів for, while.

Загальна форма оголошення циклу do-while у мові JavaScript така сама як в мовах C++, C#, Java:

do
{
  // Тіло циклу
  // ...
} while (condition);

тут

  • condition – деяка умова. Тіло циклу виконується, якщо condition = true. Як тільки значення condition стане рівне false, то відбувається вихід з циклу і перехід до наступного оператору.

У деяких випадках особливість циклу do-while призводить до більш наочного та скороченого коду. Прикладом такого випадку може бути отримання даних з клавіатури та їх обробка в залежності від ситуації. Якщо тут використовувати оператори for чи while, то не обійтись без повторного виклику рядка вводу або введення додаткових прапорців, що визначають перший крок ітерації в циклі. Застосування ж циклу do-while не викличе зайвих рядків коду для коректного розв’язку задачі (дивіться приклад 4.1).

  ⇑

4.1. Обробка даних під час вводу. Приклад обчислення суми для послідовності введених чисел

З допомогою циклу do-while організовується ввід чисел з клавіатури шляхом виклику діалогового вікна функцією prompt(). Кінець вводу – число 0. Як результат обчислюється сума введених чисел.

// Цикл do-while
// Обробка даних під час вводу.
// Дана послідовність чисел, яка завершується нулем.
// Обчислити суму введених чисел.

// 1. Оголосити змінні
var num   // число, яке буде вводитись з клавіатури
var sum = 0.0 // обчислювана сума

// 2. Цикл обчислення
do {
  // Вивести вікно вводу числа     
  num = prompt("Enter number: ", '0');
  sum += parseFloat(num);
} while (num!=0);

// 3. Вивести результат
document.write("sum = " + sum)

  ⇑

4.2. Обчислення максимальної цифри числа

Умова задачі. Дано натуральне число. Обчислити максимальну цифру цього числа.

Розв’язок. 

// Цикл do-while
// Обчислити максимальну цифру числа, введеного з клавіатури
// 1. Оголосити змінні
var num // задане число
var max // максимальна цифра числа

// 2. Ввід даних
num = parseInt(prompt("Enter number: "))

// 3. Обчислення максимальної цифри числа - цикл do-while
max = num % 10 // взяти останню цифру

do {
  if (max<num%10)
    max = num%10
  num = parseInt(num/10)
} while (num>0)

// 4. Вивести результат
alert("max = " + max)

  ⇑

4.3. Обробка рядків. Заміна символів у тексті

Умова задачі. У заданому тексті замінити всі символи ‘+’ на символи ‘-‘. Для розв’язку використати цикл do-while.

Розв’язок.

При розв’язку даної задачі слід врахувати, що рядки є незмінюваними послідовностями. Тому безпосередньо замінити символ в тексті-оригіналі не вийде. У даній задачі формується новий (інший) текст, який потім замінює вихідний текст.

// Обробка тексту в циклі do-while.
// У заданому тексті замінити всі символи '+' на символи '-'.
// 1. Ввести текст
var text = prompt("Input text:")

// 2. Цикл заміни
var i = 0 // індекс оброблюваного символу в тексті
var text2 = "" // додатковий текст

do {
  // Обробка символу text[i]
  if (text[i] == '+')
    text2 = text2 + "-"
  else
    text2 = text2 + text[i]

  // Збільшити лічильник
  i++
} while (i < text.length)

// 3. Замінити вихідний текст
text = text2

// 4. Вивести результат
document.write("text = " + text)

  ⇑

Споріднені теми

  ⇑