Одна из самых сложных вещей, с которыми вы когда-либо сталкивались при изучении javascript, — это циклы. Некоторые могут сказать, что циклы — это просто, но у меня было много проблем при изучении циклов в JavaScript, и я знаю, что у многих из вас они все еще могут быть.
Итак, я собираюсь научить вас циклам в JavaScript, чтобы дать вам все, что в моих силах. Я бы попытался написать эту статью, предполагая, что вы ничего не знаете о циклах.
для циклов
Цикл for — один из основных циклов, с которыми вы столкнетесь. Чего вы еще долго не будете знать, так это того, что в JavaScript существует три типа циклов for. Я собираюсь показать вам все это.
const num = 5
for(let i = 0 ; i < num ; i++) {
console.log(i)
}
// 0 1 2 3 4
Это основной формат цикла for. Теперь позвольте мне дать вам более простой способ понять это:
for( initialization, condition, increment/decrement )
Я думаю, что приведенный выше фрагмент кода облегчает понимание. Во-первых, у нас есть ‘let i = 0’, это наша часть инициализации, проще говоря, откуда начнется цикл. тогда у нас есть «i ‹ num», которое является нашим условием завершения цикла. Пока это условие выполняется, циклы будут продолжаться. Затем у нас есть третья и последняя часть цикла, которая является увеличением или уменьшением.
Видите ли, циклы используются, чтобы делать что-то снова и снова, пока не будет выполнено определенное условие. например, вы можете распечатать таблицу из 4. Давайте напишем для этого кусок кода.
const num = 4
for( let i = 1; i <= 10; i++) {
console.log(`${num} x ${i} = ${num * i}`)
}
/**
4 x 1 = 4
4 x 2 = 8
4 x 3 = 12
4 x 4 = 16
4 x 5 = 20
4 x 6 = 24
4 x 7 = 28
4 x 8 = 32
4 x 9 = 36
4 x 10 = 40
**/
Теперь в этом фрагменте кода я использую простой цикл for для печати таблицы из 4. Для написания таблицы вам нужно всего лишь выполнить одну и ту же задачу 10 раз. предполагая, что вы начинаете с 1, а не с 0. Таким образом, условия инициализации и завершения изменены по сравнению с предыдущим фрагментом кода.
Теперь эта петля хороша и все. Вы можете использовать его в массивах и объектах и еще много чего. Предполагая, что вы знаете, как я перейду к следующему циклу. Что такое цикл for-in.
цикл for-in
При программировании вы не обязательно используете циклы до числа, вы в основном используете их для циклического перебора всего массива или объекта. В JavaScript у нас есть нечто, называемое циклом for-in. Посмотрим, как это работает.
const arr = [ 2, 3, 5, 7, 11, 13, 17, 19]
for(let index in arr) {
console.log(index)
}
// 0 1 2 3 4 5 6 7
Здесь у нас есть цикл for-in, используемый для массива простых чисел меньше 20. Вы можете видеть, что цикл for-in учитывает все, что вы объявляете индексом в случае массивов. Те из вас, кто немного знает Python, возможно, уже использовали циклы for-in. там он в основном используется с функцией диапазона. давайте теперь посмотрим, что мы получим в случае Объектов.
let obj = {
Name: 'Gaurav',
Religion: 'Hindu',
Nationality: 'Indian',
Age: '24',
proffession: 'Software engineer',
Hobby: ['Blogging', 'Reading', 'Technology']
}
for(let index in obj) {
console.log(index)
}
/**
Name
Religion
Nationality
Age
proffession
Hobby
**/
/**
You can get values of an object by using obj[index]
**/
В случае с объектами мы получаем ключи вместо индексов. Обычно говорят, что если вы имеете дело с объектами, используйте цикл for-in, в случае массивов используйте цикл for-of, который является следующим.
цикл for-of
как и циклы for-in, у нас также есть циклы for-of в JavaScript. Но, в отличие от циклов for-in, их нельзя использовать в случае объектов. если вы попытаетесь использовать их на объектах, они выдадут вам сообщение об ошибке, говорящее, что «объекты не являются итерируемыми». Но они отлично работают в случаях с массивом. Посмотрим, как это пойдет.
const arr = [ 2, 3, 5, 7, 11, 13, 17, 19]
for(let element of arr) {
console.log(element)
}
// 2 3 5 7 11 13 17 19
Как вы можете видеть результат из предыдущего примера при использовании вместо полностью изменений. В этом случае то, что мы получаем, эквивалентно «arr[index]», мы называем его элементом массива или можем сказать, что:
результат цикла for-of == array[независимо от результата цикла for-in]
хотя это было бы немного сложно, я надеюсь, что это поможет вам понять, почему цикл for-in предпочтительнее в объекте. Однако, если вам нужен индекс массива, то лучше использовать простой цикл for. Если вы хотите иметь дело с элементом массива, вам может подойти for-of.
Примечание. Вы можете объявить циклы for-in и for-of с константой, но вы не можете сделать это в простом цикле for.
Пока циклы
Хотя циклы — это то, что можно назвать адом для программистов. хотя концепция почти такая же, как и для цикла. Они просто немного сложны. Хотите верьте, хотите нет, но программисты делают много ошибок при работе с циклами while.
//your initialization goes here
while ( you terminating condition goes here ) {
// whatever you want to do goes here;
//you increment or decrement goes here
}
Теперь давайте напишем таблицу из 18 с циклом while.
let i = 1, num = 18
while( i <= 10) {
console.log(`${num} x ${i} = ${num * i}`)
i++
}
/**
18 x 1 = 18
18 x 2 = 36
18 x 3 = 54
18 x 4 = 72
18 x 5 = 90
18 x 6 = 108
18 x 7 = 126
18 x 8 = 144
18 x 9 = 162
18 x 10 = 180
**/
Теперь давайте попробуем сделать несколько ошибок в циклах while и посмотрим, что получится. давайте переместим инкрементную часть перед консолью.
let i = 1, num = 18
while( i <= 10) {
i++;
console.log(`${num} x ${i} = ${num * i}`);
}
/**
18 x 2 = 36
18 x 3 = 54
18 x 4 = 72
18 x 5 = 90
18 x 6 = 108
18 x 7 = 126
18 x 8 = 144
18 x 9 = 162
18 x 10 = 180
18 x 11 = 198
**/
Есть много ошибок, которые вы можете сделать с циклами while, и лучший способ узнать, какие результаты они дают, - это попробовать их самостоятельно. Много раз вы будете получать ошибки, говорящие о том, что стек переполнился или что-то в этом роде, и цикл будет продолжать печатать, пока вы полностью не закроете эту вкладку браузера.
Это происходит, когда ваше условие и инкремент/декремент реализованы неправильно.
рассмотрим сценарий:
let num = 10;
while( num > 8 ) {
console.log("Keep printing this to console")
num++;
}
Как видите, число всегда будет больше 8 в этом состоянии, и мы всегда будем увеличивать число. так что шансов на то, что он когда-либо станет меньше 8, не существует. следовательно, цикл будет продолжать работать вечно, если вы его не закроете.
лучший способ избежать таких сценариев — помнить, что если ваша объявленная переменная в условии должна быть больше чего-то, то вы уменьшите эту переменную внутри блока цикла while. если он должен быть меньше, чем что-то, вы увеличите его.
Примечание. Я могу только сказать, что используйте циклы while с осторожностью.
Выполнить цикл
Цикл do-while используется редко, но он есть. Давайте попробуем увидеть, чем он отличается от простого цикла while.
let num = 5
do {
num++
} while ( num <= 10)
console.log(num)
// 11
Как видите, цикл do-while сначала сделает все, что от него требуется, а после выполнения этой задачи проверит, было ли выполнено условие или нет. чтобы справиться с этим, вы должны написать условия таким образом, чтобы они выполняли вашу работу должным образом. проще говоря, это больше работы для разработчика.
Примечание. Я никогда не использовал цикл do-while.
