Пояснення циклів JavaScript: For Loop, While Loop, Do ... while Loop та багато іншого

Цикли використовуються в JavaScript для виконання повторних завдань на основі умови. Умови зазвичай повертаються trueабо falseпри аналізі. Цикл буде продовжуватися, поки не повернеться визначена умова false.

Три найпоширеніші типи петель

  • для
  • поки
  • робити поки

Ви можете ввести js for, js whileабо js do whileотримати більш детальну інформацію про будь-якому з них. Давайте розглянемо їх і деякі варіації більш докладно зараз.

для циклу

Синтаксис

for ([initialization]); [condition]; [final-expression]) { // statement }

Оператор javascript forскладається з трьох виразів і твердження:

Опис

  • ініціалізація - Запуск перед першим виконанням циклу. Цей вираз зазвичай використовується для створення лічильників. Створені тут змінні призначаються у цикл. Після завершення циклу його виконання вони знищуються.
  • умова - вираз, який перевіряється перед виконанням кожної ітерації. Якщо його не вказати, цей вираз має значення true. Якщо воно має значення true, виконується оператор циклу. Якщо значення обчислюється як false, цикл зупиняється.
  • final-expression - Вираз, який запускається після кожної ітерації. Зазвичай використовується для збільшення лічильника. Але його також можна використовувати для зменшення лічильника.
  • оператор - Код, що повторюється у циклі

будь-який із цих трьох виразів або твердження можна опустити. Бо цикли зазвичай використовуються для підрахунку певної кількості ітерацій для повторення висловлювання. Використовуйте breakоператор для виходу з циклу до того, як вираз умови оцінить як false.

Загальні підводні камені

Перевищення меж масиву

При багаторазовій індексації масиву легко перевищити межі масиву (наприклад, спробуйте посилатися на 4-й елемент масиву з 3 елементів).

 // This will cause an error. // The bounds of the array will be exceeded. var arr = [ 1, 2, 3 ]; for (var i = 0; i <= arr.length; i++) { console.log(arr[i]); } output: 1 2 3 undefined

Існує два способи виправити цей код. Встановіть умову або i < arr.lengthабоi <= arr.length - 1

Приклади

Ітерація через цілі числа від 0-8

for (var i = 0; i < 9; i++) { console.log(i); } output: 0 1 2 3 4 5 6 7 8

Вирватися з циклу, перш ніж вираз умови буде хибним

for (var elephant = 1; elephant < 10; elephant+=2) { if (elephant === 7) { break; } console.info('elephant is ' + elephant); } output: elephant is 1 elephant is 3 elephant is 5

для ... у циклі

Оператор for...inповторює перелічені властивості об'єкта у довільному порядку. Для кожної окремої властивості можна виконувати оператори.

for (variable in object) { ... }

Required / OptionalParameterDescriptionRequiredVariableІншій властивості властивості присвоюється змінна на кожній ітерації.OptionalObjectObject, численні властивості яких повторюються.

Приклади

// Initialize object. a = { "a": "Athens", "b": "Belgrade", "c": "Cairo" } // Iterate over the properties. var s = "" for (var key in a) { s += key + ": " + a[key]; s += "

"; } document.write (s); // Output: // a: Athens // b: Belgrade // c: Cairo // Initialize the array. var arr = new Array("zero", "one", "two"); // Add a few expando properties to the array. arr["orange"] = "fruit"; arr["carrot"] = "vegetable"; // Iterate over the properties and elements. var s = ""; for (var key in arr) { s += key + ": " + arr[key]; s += "

"; } document.write (s); // Output: // 0: zero // 1: one // 2: two // orange: fruit // carrot: vegetable // Efficient way of getting an object's keys using an expression within the for-in loop's conditions var myObj = {a: 1, b: 2, c:3}, myKeys = [], i=0; for (myKeys[i++] in myObj); document.write(myKeys); //Output: // a // b // c

для ... циклу

Оператор for...ofстворює цикл, що повторюється над ітерабельними об'єктами (включаючи масив, карту, набір, об'єкт "Аргументи" тощо), викликаючи спеціальний ітераційний гачок із операторами, які слід виконати для значення кожного окремого властивості.

 for (variable of object) { statement }

DescriptionvariableOn на кожній ітерації змінному.objectObject призначається значення іншої властивості, численні властивості яких повторюються.

Приклади

Масив

 let arr = [ "fred", "tom", "bob" ]; for (let i of arr) { console.log(i); } // Output: // fred // tom // bob

Карта

 var m = new Map(); m.set(1, "black"); m.set(2, "red"); for (var n of m) { console.log(n); } // Output: // 1,black // 2,red

Встановити

 var s = new Set(); s.add(1); s.add("red"); for (var n of s) { console.log(n); } // Output: // 1 // red

Аргументи об'єкта

 // your browser must support for..of loop // and let-scoped variables in for loops function displayArgumentsObject() { for (let n of arguments) { console.log(n); } } displayArgumentsObject(1, 'red'); // Output: // 1 // red

while циклу

Цикл while починається з оцінки стану. Якщо умова відповідає дійсності, оператори виконуються. Якщо умова хибна, оператор (и) виконується / не виконується. Після цього цикл while закінчується.

Here is the syntax for while loop:

Syntax:

while (condition) { statement(s); }

statement(s): A statement that is executed as long as the condition evaluates to true.

condition: Here, condition is a Boolean expression which is evaluated before each pass through the loop. If this condition evaluates to true, statement(s) is/are executed. When condition evaluates to false, execution continues with the statement after the while loop.

Example:

 var i = 1; while (i < 10) { console.log(i); i++; // i=i+1 same thing } Output: 1 2 3 4 5 6 7 8 9

How to Iterate with JavaScript While Loops

While loops will run as long as the condition inside the ( ) is true. Example:

while(condition){ code... }

Hint 1:

Use a iterator variable such as i in your condition

var i = 0; while(i <= 4){ }

Spoiler Alert Solution Ahead!

Solution:

// Setup var myArray = []; // Only change code below this line. var i = 0; while (i <= 4){ myArray.push(i); i++; }

Do...while loop

The do...while loop is closely related to while loop. In the do while loop, the condition is checked at the end of the loop.

Here is the syntax for do...while loop:

Syntax:

 do { *Statement(s);* } while (*condition*);

statement(s): A statement that is executed at least once before the condition or Boolean expression is evaluated and is re-executed each time the condition evaluates to true.

condition: Here, a condition is a Boolean expression. If Boolean expression evaluates to true, the statement is executed again. When Boolean expression evaluates to false, the loops ends.

Example:

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

How to Iterate with JavaScript Do…While Loops

  • Do...While loops makes sure that the code is executed at least once, and after the execution, if the condition inside the while() is true, it continues with the loop, otherwise it stop.

Solution:

var myArray = []; var i = 10; do { myArray.push(i); i++; } while(i <= 10);