В статьях о массивах и объектах, мы рассмотрели их с точки зрения того, как они хранят информацию и что с ними можно сделать с помощью собтвенных методов. Пришло время рассмотреть способы обработки данных в них при помощи циклов.
Цикл - конструкция в языках программирования, предназначенная для организации многократного исполнения набора кода.
Применительно к JS, существует несколько вариантов этих конструкций.
1. Цикл for
Конструкция будет работать исключительно для массивов. Да, это будет работать и для объектов, у которых найдутся свойства типа numeric, но это как правило не встречается.
Конструкция работает следующим образом:
for (i = 'стартовое значение'; i < 'максимальное значение'; i++) {
'программный код'
}
Программный код будет выполняться до тех пор, пока соблюдается условие, что значение в переменной i меньше максимального значения. Третья часть выражения
i++
говорит о том, что по факту завершения "тела цикла" - программного кода внутри фигурных скобок - нужно увеличить значение i на 1.
i++ это краткая запись выражения i = i + 1;
i-- это краткая запись выражения i = i - 1;
Как видно из правой части скрина, я вывел построчно:
индекс записи: значение записи
2. Конструкция forEach
Так же, как и предыдущий вариант, данный способ перебора подходит только для массивов. Этот метод у объектов отсутствует.
Обратите внимание, что forEach является методом, аргументом для которго является функция, принимающая два параметра: значение и индекс элемента.
3. Цикл for in
Данный вариант цикла в равной степени будет работать и для массивов и для объектов.
Конструкция работает следующим образом:
for (i in 'объект или массив') {
if ('объект или массив'.hasOwnProperty(i)) {
'программный код'
}
}
Происходит проход по всем известным свойствам объекта или массива. Стоит обратить внимание на .hasOwnProperty(i) - метод используется для определения того, содержит ли объект указанное свойство в качестве собственного свойства объекта. Просто в качестве рекомендации: использовать его при организации циклов for/in.
Как видно на скрине, происходит перебор всех значений в массиве с выводом в консоль значений аналогично обычному циклу. А также вывод всех определенных нам и свойств в объекте myObject.
4. Конструкция while
Конструкция подойдет скорее для выполнения кода вообще, нежели для обработки содержимого массива или объекта.
Как видно, мне пришлось явным образом указать, что i равно 0 и i++ я поместил в конце испольняемого кода, в противном случае код просто зависнет: i всегда останется равным 0.
While будет выполнять содержимое внутри фигурных скобок до тех пор, пока будет работать условие, что i меньше количества элементов в массиве.
Не смотря на то, что (как сказал чуть выше), данная конструкция не очень удобна для обработки массивов и крайне не логична для обработки объектов, тем не менее, о ней тоже стоит помнить.
О чем еще стоит знать.
Есть два оператора, позволяющих пропустить шаг в выполнение цикла и прервать выполнение цикла.
1. Оператор continue
Оператор заставляет цикл пропустить выполнение кода и перейти к следующему шагу. Обратите внимание: спарва я написал условие, что если i будет равно 7, то перейти к следующей итерации, а справа в консоли у меня оказался пропущен элемент с интексом 7.
2. Оператор break
В данном примере я сказал, что если i будет равно 7, то нужно прервать выполнение цикла. Справа видим вывод только до 6 индекса включительно.
А что делать, если циклы "вложенные"? То есть один цикл внутри содержит еще один?
Для этого существует возможность указывать метки:
Перед циклом указывается произвольное слово (в рамках кода такая метка должны быть уникальна) и ставится двоеточие.
В приведенном примере, я использовал пример создания двумерного массива из одной из предыдущих статей и назначил центральной ячейке на поле 3*3 значение 1. Для перебора всех элементов, организовал два цикла - один в другом. Первый цикл образно говоря перебирает ряды, а вложенный - ячейки в них.
Далее указал метку myCycle для конструкции цикла, перебирающей ряды ("внешний" for). А далее предельно просто: если в ряду i, значение ячейки y будет равно 1, то выполняю следующую команду:
break <моя произвольная метка>
Результат работы скрипта с прерыванием - на скрине справа.
Все статьи попадают в "Оглавление канала". Не пропускаем новости!