Объяснение циклов JavaScript: цикл For, цикл while, Do ... цикл и многое другое

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

Три наиболее распространенных типа петель:

  • за
  • пока
  • делать пока

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

для цикла

Синтаксис

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

Оператор javascript forсостоит из трех выражений и оператора:

Описание

  • инициализация - запускается перед первым выполнением цикла. Это выражение обычно используется для создания счетчиков. Созданные здесь переменные попадают в цикл. Как только цикл завершает выполнение, они уничтожаются.
  • condition - выражение, которое проверяется перед выполнением каждой итерации. Если опущено, это выражение истинно. Если оно истинно, оператор цикла выполняется. Если он оценивается как ложь, цикл останавливается.
  • final-expression - выражение, которое выполняется после каждой итерации. Обычно используется для увеличения счетчика. Но его также можно использовать для уменьшения счетчика.
  • оператор - Код, который будет повторяться в цикле

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

Общие ловушки

Превышение границ массива

При многократном индексировании массива легко выйти за границы массива (например, попытаться сослаться на 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Оператор создает итерацию цикла по итерации объектов (включая Array, Map, Set, аргументы объект и так далее), вызов пользовательской итерацию крюк с заявлениями , которые должны выполняться для значения каждого свойства.

 for (variable of object) { statement }

Описаниеvariable На каждой итерации переменной переменной.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 заканчивается.

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