Введение
Javascript — очень полезный язык, возможно, самый полезный. Он используется на 95,2% всех веб-сайтов в Интернете. Тем не менее, это немного похоже на Дикий Запад, вы можете закодировать решение проблемы множеством способов! Может быть трудно понять некоторые аспекты этого. Аспект, который я рассмотрю сегодня, это зацикливание и множество способов, которыми вы можете зацикливаться и должны зацикливаться. Мы рассмотрим «для», «для/в», «для /of», циклы «while» и «do/while» .
Что такое петля?
Цикл используется для итерации по блоку кода, что означает многократное повторение кода снова и снова. Это ускоряет работу, когда вы хотите каждый раз запускать один и тот же код с разными значениями.
Цикл For
«Цикл for» проходит через блок кода несколько раз. В его синтаксисе три оператора. Оператор 1 — это инициализирующее выражение, которое инициализирует счетчики цикла. «0» обычно является числом, основанным на индексе большую часть времени, вы поймете, что я имею в виду, когда я перейду к примеру. Оператор 2 является выражением условия. Обычно для него устанавливается значение, и пока это значение истинно, код будет продолжать работать, но когда это значение возвращает false, код перестает работать, что вам и нужно, потому что вы не хотите застрять в бесконечном цикле. (это очень хреново). Оператор 3 является выражением приращения, и каждый раз, когда второе выражение возвращает true, выражение приращения также выполняется либо с увеличением, либо с уменьшением. Теперь, когда мы рассмотрели три разных оператора цикла for, давайте рассмотрим пример.
for (statement 1; statement 2; statement 3) {
// code block to be executed
}
//Above is the syntax of a for loop
for (let i = 0; i < 6; i++) {
text += "The number is " + i + "<br>";
}
//Above is a for loop in action
Утверждение 1: «пусть i = 0;» это говорит компьютеру, где начать в массиве с 0. Утверждение 2 условие « i ‹ 6;» который говорит: «Пока число меньше 6, продолжайте увеличиваться». Утверждение 3 — это «i++», что означает, что вы хотите увеличивать каждый раз, когда запускается блок кода, что означает, что каждый раз, когда запускается код, «i» будет увеличиваться по сравнению с его начальным значением. Итак, что в конечном итоге будет отображаться на вашей странице:
The number is 0 The number is 1 The number is 2 The number is 3 The number is 4 The number is 5
Недавно мне пришлось использовать for в моем проекте, вот посмотрите:
Здесь я просматриваю весь свой массив учеников, и если идентификатор любого из моих учеников равен идентификатору учеников, которых я пытаюсь удалить, то удаляю их из массива. Цикл for очень полезен!
Цикл For/In
Цикл for/in перебирает указанную переменную по перечисляемым свойствам объекта. Вы хотите использовать это только на объектах, а НЕ НА МАССИВЕ ОБЪЕКТОВ!!! Если вы попытаетесь использовать этот цикл для массива объектов, вы получите сообщение об ошибке, говорящее, что он не является итерируемым. Так что обратите внимание на синтаксис, потому что он сбивает вас с толку! Теперь давайте посмотрим на синтаксис и пример:
for (key in object) {
// code block to be executed
}
//Above is the syntax for a "for/in loop"
//Example below
const person = {fname:"Cool", lname:"Guy", age:23};
let text = "";
for (let x in person) {
text += person[x];
}
//What the example returns below
Cool Guy 23
Цикл for/in перебирает объект человека и с каждой итерацией возвращает значение ключа (x), которое представляет («fname», «lname», «age»). Чтобы получить доступ к значениям этих ключей, мы передаем «person[x]», который дает значения («Крутой», «Парень», «23»).
Цикл For/Of
Цикл for/of перебирает значения итерируемого объекта. В синтаксисе есть переменная и итерируемая. После каждой итерации переменной присваивается значение другого свойства. Итерируемый объект — это просто объект, свойства которого могут быть итерированы. Я знаю, что это звучит как полная чепуха, но пример должен прояснить это как день. В этом примере мы собираемся показать вам синтаксис, а затем выполнить итерацию по массиву объектов.
for (variable of iterable) { //code to be executed } //Above is the syntax of the "for/of loop"//Below is the example of the "for/of loop"let users = [ { id:1, name:"Him" }, { id:2, name:"Her" }, { id:3, name:"Them" } ]for(let u of users){ console.log(u.id, u.name) } //Below is the result of the loop //first iteration: 1,"Him" //second iteration: 2, "Her" //Third iteration: 3, "Them"
Цикл for/of, вероятно, мой любимый из всех циклов, потому что я использую его чаще всего, я имею в виду, что у него так много преимуществ. Он лаконичен, принимает все виды итераций и позволяет деструктурировать их!
Циклы While и Do/While
Циклы while и do/while продолжают выполнять блок кода до тех пор, пока выполняется определенное условие, как только это условие возвращает false, код перестает выполняться, но между ними и тем, как они выполняются, есть разница. Мы рассмотрим несколько примеров того и другого и объясним небольшую разницу между ними.
do {
// code block to be executed
}
while (condition);
//Above is the "do/while loop" syntax
//Below is an example of the "do/while loop"
do {
text += "The number is " + i;
i++;
}
while (i < 8);
//This returns
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
В цикле «do/while» блок кода всегда будет выполняться как минимум один раз, даже если условие ложно, потому что оно запускается до проверки условия. Теперь давайте посмотрим на «цикл while».
while (condition) {
// code block to be executed
}
//Above is the syntax for the "while loop"
//Below is an example of the "while loop"
while (i < 6) {
text += "The number is " + i;
i++;
}
//This returns
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
«Цикл while» будет выполняться через блок кода ТОЛЬКО в том случае, если условие возвращает истину, в отличие от «цикла do/while», который будет выполняться один раз, даже если условие изначально ложно. Также убедитесь, что вы увеличиваете переменную, увеличивая ее с помощью «i++», потому что в противном случае вы застрянете в цикле, который никогда не закончится, и приведет к сбою вашего браузера.
Вывод
Надеюсь, это убережет вас от слишком большого поиска в Интернете о циклах в javascript, но всегда обращайтесь к документации, на которую я дал ссылку в этом блоге, потому что в ней гораздо больше подробностей по этим темам. Спасибо за чтение!
