Циклы for: как их использовать и убедиться, что они действительно работают

Для цикла…

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

Любите ли вы их, ненавидите или даже еще не понимаете их, нельзя отрицать, что они являются фундаментальной концепцией в JavaScript и программировании в целом. Они используются не только в JavaScript, но и в других языках программирования, таких как Python, C и Java.

Цель этой статьи — разобрать цикл for в JavaScript, обсудить несколько ситуаций, в которых он может пригодиться, и некоторые особые соображения, чтобы убедиться, что он действительно делает то, что вы пытаетесь с ним сделать. В JavaScript есть множество циклов, которые вы можете использовать, а также методы, позволяющие перебирать массивы. Для простоты они не будут рассматриваться в этой статье, и мы сосредоточимся на цикле for.

Давайте начнем с того, как выглядит базовый и каждый из компонентов, необходимых для его создания.

Цикл For

В общем, циклы — это универсальные инструменты в JavaScript, которые вы можете использовать, когда хотите выполнить определенный код несколько раз. Этот код может быть таким же простым, как печать сообщения в консоли, или, чаще, применением кода к каждому элементу в массиве для возврата определенного вывода.

for (let i = 0; i < value; i++) {
//Code to execute
};

Вот как выглядит базовая структура цикла for, состоящая из трех основных компонентов, определяющих, что будет делать цикл:

1. Инициализация — в этом примере пусть i = 0.

Здесь вы объявляете переменную, называемую итератором, которая определяет, где начинать цикл. Теоретически вы можете назвать это как угодно, но принято называть переменную «i», когда вы строите один цикл. Вы не должны обязаны начинать с 0 — все зависит от того, чего вы пытаетесь достичь, и от того, какое значение вы хотите, чтобы ваш цикл начал работать.

2. Условие остановки — в этом примере значение i ‹.

Условие остановки определяет, когда остановить цикл. Пока это условие true, цикл будет выполняться. Таким образом, если это условие false, выполнение цикла прекратится. В этом примере цикл будет работать до тех пор, пока i меньше, чем то, что мы выбрали для замены value.

3. оператор итерации — в этом примере i++.

Оператор итерации переназначает значение итератора каждый раз, когда выполняется цикл. В этом примере, после запуска цикла и выполнения кода внутри, i увеличится на 1.

Теперь, когда вы увидели, из чего состоит цикл for, давайте посмотрим на некоторые из них в действии!

for (let i = 0; i < 5; i++) {
   console.log(i);
};
//Output: 
0
1
2
3
4

Посмотрите внимательно на этот цикл и посмотрите, сможете ли вы понять, что он делает.

В цикле мы сначала объявляем итератору (i) значение 0. Затем мы устанавливаем условие остановки и задаем выполнение цикла до тех пор, пока i равно меньше 5. После выполнения цикла мы увеличиваем i на 1. Обратите внимание, что поскольку цикл настроен на выполнение до тех пор, пока i меньше 5, выходные данные включает не включает 5. Если бы мы хотели включить 5, мы бы написали это так:

for (let i = 0; i <= 5; i++) {
   console.log(i);
};
//Output: 
0
1
2
3
4
5

Это довольно простой пример. К счастью, циклы for обладают гораздо большей универсальностью, чем просто подсчет. Давайте рассмотрим одно из наиболее распространенных применений цикла for — перебор массива.

Для циклов: цикл через массив

for (let i = 0; i < arr.length; i++) {
//Code to execute
};

Чтобы перебрать весь массив от начала до конца:

1. Вы устанавливаете итератор в 0, что устанавливает начало цикла с первого элемента массива, элемента с индексом 0.

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

Как и в базовом цикле for, итератор будет увеличиваться на 1 каждый раз, когда цикл завершается. Хорошо, теперь вы можете сказать: «Для чего я на самом деле использую это?»

Пример цикла по массиву

Скажем, вам поручили вернуть каждый товар из списка покупок. Использование цикла for — довольно разумный способ выполнить эту задачу.

let groceryList = ['coffee', 'apples', 'water', 'eggs']
for (let i = 0; i < groceryList.length; i++) {
  console.log(groceryList[i]);
};
//Output:
coffee
apples
water
eggs

Выше показано, как вы будете перебирать заданный массив и регистрировать каждый из элементов в консоли. Обратите внимание, как мы устанавливаем условие остановки на длину массива с именем groceryList.

Теперь, в этом примере, мы зарегистрировали каждый из элементов в массиве, но предположим, что вы хотели пропустить первый элемент, «кофе»…

let groceryList = ['coffee', 'apples', 'water', 'eggs']
for (let i = 1; i < groceryList.length; i++) {
  console.log(groceryList[i]);
};
//Output:
apples
water
eggs

Вы просто меняете итератор так, чтобы он начинался с 1, и виола!

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

let targetList = ['wine', 'bathmat', 'purse', 'faux-plant']
function getListItems (list) {
  for (let i = 0; i < list.length; i++) {
   console.log(list[i]);
  };
};
getListItems(targetList));
//Output:
wine
bathmat
purse
faux-plant

Здесь у нас есть функция, которая принимает список в качестве аргумента, перебирает этот список и возвращает каждый элемент списка. Затем мы вызвали эту функцию с заданным списком, targetList, переданным в качестве аргумента, и вывели вывод на консоль.

Теперь было бы лучше вернуть значение каждого элемента списка, чтобы мы фактически передавали значение из функции, а не просто записывали выходные данные в консоль для нас, чтобы увидеть. Эта часть может стать немного сложной. Давайте займемся этим дальше.

Как и как не использовать «Return» в цикле for

Давайте отключим console.log для возврата в нашем примере, а затем console.log результаты вызова функции.

…Uh oh!

let targetList = ['wine', 'bathmat', 'purse', 'faux-plant']
function getListItems (list) {
  for (let i = 0; i < list.length; i++) {
   return list[i];
  };
};
console.log(getListItems(targetList));
//Ouput:
wine

Мы видим только первый элемент в списке, «вино», напечатанное на консоли! Если вам интересно, почему остальные элементы не печатались, то это потому, что когда мы используем ключевое слово return, цикл и функция перестают выполняться. В этом случае цикл запускается один раз, останавливается и больше никогда не запускается, чтобы просмотреть оставшиеся элементы в списке.

Непреднамеренное возвращение… Решено

let targetList = ['wine', 'bathmat', 'purse', 'faux-plant']
function getListItems (list) {
  let listItems = '';
    for (let i = 0; i < list.length; i++) {
      listItems += `${list[i]} `;
    };
  return listItems;
};
console.log(getListItems(targetList));
//Output:
wine bathmat purse faux-plant

Выше приведен один из способов вернуть все элементы из нашего списка. Объявляя переменную listItems и присваивая ей пустую строку, мы даем ей контейнер, в который мы в конечном итоге добавим каждый элемент из массива при его циклическом просмотре. Важно сделать это вне цикла for — если мы объявим это внутри цикла, мы не сможем получить к нему доступ позже.

Затем в цикле for мы используем оператор присваивания сложения, чтобы добавить значение каждого элемента списка, list[i], в переменную listItems при каждом запуске цикла. Затем мы возвращаем переменную listItemsвне цикла, чтобы она не останавливала выполнение цикла после первой итерации. Помните, мы хотим убедиться, что он проходит через всю длину массива и затем возвращается.