Что это такое и когда их использовать
Цикл сообщает вашей программе, что нужно многократно выполнять определенное действие. Количество раз, которое ваша программа должна выполнить это действие, зависит от установленных вами условий.
Говоря непрограммируемым языком, скажем, вы указываете другу, как добраться до вашего дома. Они звонят вам и говорят, что они на вашей улице, но не знают, какой дом ваш. Вы говорите им: «Продолжайте идти на север, пока не дойдете до желтого дома на углу». В этом утверждении «пока вы не дойдете до желтого дома на углу» - вот условие, которое вы поставили для своего друга. Они будут продолжать идти на север , пока не дойдут до этого дома, после чего они остановятся.
Что бы произошло, если бы вы не дали своему другу это заболевание? Другими словами, что произойдет, если вы просто скажете своему другу: «Иди на север»? Ваш друг никогда не узнает, когда остановиться. Они будут продолжать идти на север мимо вашего дома. Вы не можете обвинять друга в том, что он не нашел ваш дом, поскольку вы никогда не говорили ему, когда остановиться.
Этот пример, не связанный с программированием, иллюстрирует одну из наиболее распространенных проблем, с которыми люди сталкиваются при работе с циклами: бесконечный цикл. Если вы не укажете циклу, когда остановиться, цикл будет продолжаться вечно. Важно отметить, что если вы сообщаете своему циклу, когда остановиться, но эта точка остановки никогда не может быть достигнута, это также бесконечный цикл. Используя тот же пример, допустим, вы сказали своему другу: «Продолжайте идти на север, пока не дойдете до розового дома на углу». Ваш друг продолжает идти на север, но, как бы далеко он ни прошел, он никогда не находит розовый дом на углу. Даже если вы указали своему другу конечную точку, они никогда не смогут достичь этой конечной точки, поэтому они (теоретически) будут продолжать идти вечно.
При работе с циклами очень важно указать, когда цикл должен прекратиться и что конечная точка действительно может быть достигнута.
1. Пока петли
Один из самых популярных циклов - цикл while. Цикл while имеет следующую структуру:
while (condition) {
statement
}
Перед выполнением оператора проверяется condition. Если он оценивается как true, то инструкция выполняется. Пока condition равно true, инструкция продолжает выполняться. Когда condition становится false, инструкция прекращает выполнение.
Например, предположим, что у вас есть переменная с именем e, которая начинается с 0. Вы хотите, чтобы e продолжал увеличиваться (или увеличиваться на 1), пока e меньше 4.
let e = 0;
while (e < 4) {
e++;
}
Вот таблица, в которой показано, что происходит в приведенном выше цикле:
Пока e < 4 равно true, цикл выполняется. Когда он становится false, он не выполняется.
При работе с циклами while очень легко случайно написать бесконечный цикл. Например, если условие из приведенного выше примера было e >= 0, цикл будет выполняться бесконечно. e начинается с 0, что означает true, и продолжает увеличиваться, что означает, что условие всегда будет оцениваться как true:
//Infinite loop
let e = 0;
while (e >= 0) {
e++;
}
2. Для петель
Еще один широко используемый цикл - это цикл for. Цикл for имеет следующую структуру:
for (initialExpression; conditionExpression; incrementExpression) {
statement
}
initialExpression - это первое, что запускается. Любая переменная, созданная в этом выражении, привязана к циклу (это означает, что вы не можете ссылаться на эту переменную извне цикла). initialExpression обычно используется для инициализации счетчика.
Затем conditionExpression оценивается как true или false. Если это true, то инструкция выполняется. Если это false, оператор не выполняется, а цикл for завершается. Если conditionExpression не указан, автоматически устанавливается условие true.
incrementExpression запускается после выполнения оператора. Так же, как initialExpression обычно инициализирует счетчик в for цикле, incrementExpression обычно увеличивает этот счетчик. Однако выражение также может уменьшить счетчик (или уменьшить на 1). На этом этапе conditionExpression снова оценивается, и если он по-прежнему true, цикл for продолжает выполняться.
Например, давайте создадим for цикл, который записывает в консоль фразу «Я могу считать до X», где X - это число, начинающееся с 1 и идущее до 5. Начнем с инициализации переменной в initialExpression с помощью let i = 1. Затем мы устанавливаем conditionExpression на i <= 5. Это означает, что оператор будет продолжать выполняться, пока i меньше или равно 5. Наконец, мы хотим увеличивать i на 1 каждый раз при выполнении цикла, поэтому incrementExpression равно i++. Примечание. Важно, чтобы каждое выражение разделялось точкой с запятой, ;.
for (let i = 1; i <= 5; i++) {
console.log(“I can count to “ + i)
}
Вот таблица, в которой показано, что происходит в приведенном выше цикле:
Бесконечные циклы также случаются с for циклами. Одним из примеров бесконечного цикла может быть использование того же примера, приведенного выше, но изменение третьего выражения на i — -. i — - означает, что i продолжает уменьшаться, поэтому i начнется с 1, затем станет 0, затем -1 и так далее. Все это время i <=5 будет продолжать вычислять значение true, потому что i всегда будет меньше или равно 5.
//Infinite loop
for (let i = 1; i <= 5; i — ) {
console.log(“I can count to “ + i)
}
3. Выполните… циклы while.
Цикл do… while очень похож на цикл while. Цикл do...while имеет следующую структуру:
do {
statement
} while (condition);
Первое, что происходит в этом цикле, - это выполнение оператора. Как только это произойдет, проверяется condition. Если condition оценивается как true, оператор выполняется снова. Оператор будет выполняться до тех пор, пока condition не станет false. Основное различие между циклом do...while и циклом while заключается в том, что оператор всегда будет выполняться хотя бы один раз.
Например, давайте инициализируем переменную с именем booksRead равной 10. Мы хотим записать в консоль Я прочитал X книг в этом году, где X - это значение booksRead. Затем мы установим условие booksRead < 14. Примечание. в приведенном ниже примере я использую интерполяцию строк, когда консоль регистрирует количество книг, прочитанных в этом году. Строковая интерполяция выполняется с помощью шаблонных литералов в JavaScript.
let booksRead = 10;
do {
console.log(`I read ${booksRead} books this year`);
booksRead++;
} while (booksRead < 14);
Вот таблица, в которой показано, что происходит в приведенном выше цикле:
Один из способов создания бесконечного цикла при работе с do…while циклами - это не увеличивать переменную, которую вы проверяете в условии. Используя тот же пример, что и выше, если вы никогда не увеличиваете booksRead, тогда booksRead останется на 10 навсегда, что означает, что условие booksRead < 14 всегда будет true.
//Infinite loop
let booksRead = 10;
do {
console.log(`I read ${booksRead} books this year`);
} while (booksRead < 14);
4. For… in петли
Цикл for… in используется с объектом в JavaScript. Он имеет следующую структуру:
for (variable in object) {
statement
}
Цикл for…in выполняет итерацию переменной по каждому свойству (или ключу) объекта. Для каждого свойства выполняется инструкция. Цикл позволяет вам получить доступ к каждому свойству объекта, не зная имени свойства. Циклы `for… in` перебирают свойства объекта в произвольном порядке. Следовательно, согласно документации MDN, лучше не добавлять, не изменять и не удалять свойства объекта во время итерации, кроме свойства, которое в данный момент посещается. Вы также должны не использовать for… in в циклах с массивами.
Например, предположим, что у вас есть объект, в котором перечислены все приемы пищи, которые вы ели в тот день, и вы хотите, чтобы консоль регистрировала все, что вы ели. Объект называется foodIAte. Используя цикл for…in, вы можете перечислить название каждого приема пищи, а также то, что вы ели для этого приема пищи.
const foodIAte = {
breakfast: ‘eggs’,
lunch: ‘salad’,
dinner: ‘pizza’
};
for(const meal in foodIAte) {
console.log(`For ${meal}, I ate ${foodIAte[meal]}.`);
};
Вот таблица, в которой показано, что происходит в приведенном выше цикле:
5. Для… петель
Последний цикл - это цикл for… of. Цикл for…of можно использовать с итерируемыми объектами, которые включают массивы, карты, наборы, строки, и многое другое. Он имеет следующую структуру:
for (variable of iterableObject) {
statement
}
Цикл for…of повторяется по iterableObject, и оператор выполняется для значения каждого свойства в iterableObject. В то время как for…in циклы перебирают свойство name, for…of циклы перебирают свойство value.
Например, предположим, что у вас есть массив, и вы хотите, чтобы в консоль регистрировалось каждое значение массива:
const array = [5, 10, 15];
for (const value of array) {
console.log(value);
}
Вышеупомянутый цикл будет консольным журналом 5, 10, 15.
Допустим, у вас есть строка, и вы хотите, чтобы в консоль регистрировалось каждое значение строки:
const string = “cat”;
for (const value of string) {
console.log(value);
}
Вышеупомянутый цикл будет консольным журналом c, a, t.
Вот видео от Sunil Sandhu, которое также охватывает каждую из этих 5 петель с примерами:
Пожалуйста, дайте мне знать в комментариях, если у вас есть какие-либо вопросы или другие мысли о циклах в JavaScript.
Ресурсы
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration
- https: // developer. mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/ Ссылка / Заявления / для ... в
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols
- https: // www.w3schools.com/js/js_loop_for.asp
- https://www.freecodecamp.org/news/javascript-loops-explained-for-loop-for/
- https : //www.javascripttutorial.net/javascript-for-in/
