For, While и Do While LOOP в JavaСкрипт с примером

Что такое цикл в JavaСценарий?

Циклы полезны, когда вам приходится выполнять одни и те же строки кода несколько раз, определенное количество раз или до тех пор, пока выполняется определенное условие. Предположим, вы хотите 100 раз ввести сообщение «Привет» на своей веб-странице. Конечно, вам придется 100 раз копировать и вставлять одну и ту же строку. Вместо этого, если вы используете циклы, вы можете выполнить эту задачу всего за 3 или 4 строки.

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

Различные типы петель в JavaСценарий

В основном существует четыре типа петель. JavaСценарий.

1. для цикла
2. цикл for/in
3. в то время как цикл
4. делать… пока цикл

Современные JavaВ скрипт добавлен цикл for…of для прямой итерации значений, поэтому на практике доступно пять вариантов. В таблице ниже показано, какой из них следует использовать в той или иной ситуации.

для цикла

Синтаксис:

for(statement1; statement2; statment3)
{
lines of code to be executed
}

1. Оператор 1 выполняется первым, даже до выполнения цикла.ping Код. Таким образом, это выражение обычно используется для присвоения значений переменным, которые будут использоваться внутри цикла.
2. Оператор2 — это условие выполнения цикла.
3. Оператор3 выполняется каждый раз после циклаping Код выполняется.

Попробуйте сами:

<html>
<head>
	<script type="text/javascript">
		var students = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth");
		document.write("<b>Using for loops </b><br />");
		for (i=0;i<students.length;i++)
		{
		document.write(students[i] + "<br />");
		}
	</script>
</head>
<body>
</body>
</html>

Выход:

Using for loops
John
Ann
Aaron
Edwin
Elizabeth

Счетчик начинается с 0, потому что первый индекс массив равно нулю, и условие использует students.length, поэтому цикл автоматически адаптируется при добавлении или удалении имен.

в то время как цикл

Синтаксис:

while(condition)
{
lines of code to be executed
}

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

Попробуйте сами:

<html>
<head>
	<script type="text/javascript">
		document.write("<b>Using while loops </b><br />");
		var i = 0, j = 1, k;
		document.write("Fibonacci series less than 40<br />");
		while(i<40)
		{
			document.write(i + "<br />");
			k = i+j;
			i = j;
			j = k;
		}
	</script>
</head>
<body>
</body>
</html>

Выход:

Using while loops
Fibonacci series less than 40
0
1
1
2
3
5
8
13
21
34

делать… пока цикл

Синтаксис:

do
{
block of code to be executed
} while (condition)

Цикл do…while очень похож на цикл while. Единственное отличие заключается в том, что в цикле do…while блок кода выполняется один раз еще до проверки условия.

Попробуйте сами:

<html>
<head>
	<script type="text/javascript">
		document.write("<b>Using do...while loops </b><br />");
		var i = 2;
		document.write("Even numbers less than 20<br />");
		do
		{
			document.write(i + "<br />");
			i = i + 2;
		}while(i<20)
	</script>
</head>
<body>
</body>
</html>

Выход:

Using do...while loops
Even numbers less than 20
2
4
6
8
10
12
14
16
18

Разница становится очевидной, когда условие изначально ложно. Цикл while ничего не выводит, тогда как цикл do…while всё равно выводит одну строку перед остановкой.ping.

для…в цикле

Цикл for…in проходит по перечисляемым именам свойств объекта. На каждом проходе переменной цикла присваивается следующий ключ, а значение считывается в скобках.

const student = {
    name: "Ann",
    age: 21,
    course: "JavaScript"
};

for (const key in student) {
    console.log(key + " : " + student[key]);
}

Выход:

name : Ann
age : 21
course : JavaScript

цикл for…of и forEach

Цикл for…of считывает значения любого итерируемого объекта, включая массивы, строки, карты и множества. Метод forEach достигает того же результата с помощью функции обратного вызова и предоставляет доступ к индексу.

const students = ["John", "Ann", "Aaron"];

// for...of reads each value directly
for (const name of students) {
    console.log(name);
}

// forEach supplies the value and the index
students.forEach(function (name, index) {
    console.log(index + " - " + name);
});

// strings are iterable too
for (const letter of "Ann") {
    console.log(letter);
}

Выход:

John
Ann
Aaron
0 - John
1 - Ann
2 - Aaron
A
n
n

Важно одно практическое различие: прерывание и продолжение работы внутри циклов for…of, но их нельзя использовать внутри цикла forEach, поскольку каждый коллбэк — это отдельная функция.

прерывание и продолжение заявлений

Два ключевых слова изменяют обычный ход любого цикла. Оператор break полностью выходит из цикла, а оператор continue прерывает текущий проход и переходит к следующему.

const numbers = [4, 7, 10, 13, 16, 19];

// continue: skip odd numbers
for (const n of numbers) {
    if (n % 2 !== 0) {
        continue;
    }
    console.log("even: " + n);
}

// break: stop at the first value above 12
for (const n of numbers) {
    if (n > 12) {
        console.log("first value above 12: " + n);
        break;
    }
}

Выход:

even: 4
even: 10
even: 16
first value above 12: 13

Циклы встречаются почти в каждом скрипте, который вы будете писать. Продолжим с... практический JavaПримеры кода скрипта, пересмотреть JavaМетоды массивов скрипта для получения информации о вспомогательных функциях итерации, построенных на основе этих циклов, и прочтите внутренний и внешний JavaСценарий решить, где должен храниться готовый сценарий.

Часто задаваемые вопросы (FAQ)