Почему циклы for-in?

Циклы for-in являются фундаментальной частью кода в vanilla JS, но как они работают? Независимо от того, являетесь ли вы новичком в JS или имеете средний уровень, разумно потратить свое время на понимание каждого фрагмента традиционного цикла for-in, чтобы укрепить свои основы.

Цикл for-in обычно используется для выполнения повторяющихся действий или итерации структур данных, таких как массивы, и может использоваться для других итераций, таких как объекты. Подумайте об этом так, когда вы читаете книгу, читая каждую строчку, вы выполняете в голове сразу несколько действий: читаете слова, осмысливаете слова, добавляете к сюжету, который сохранился в памяти, представляете текст, эмоционально или логически реагируя на сказанный текст. Цикл for-in работает аналогично в том смысле, что вы говорите компьютеру выполнить необходимые действия для достижения того, чего вы хотите, поскольку он читает тип данных.

Компоненты цикла for-in

Теперь давайте рассмотрим компоненты цикла for-in.

MDN, который является отличным ресурсом, если вы только начинаете работать с vanilla JS, определяет эти компоненты как:

for ([начальноевыражение]; [выражениеусловия]; [выражениеприращения])

утверждение

Синтаксис цикла for-in может выглядеть примерно так:

Исходное выражение

Исходное выражение or в этом примере: 'for(let i = 0'). Давайте разберем этот фрагмент еще подробнее, for в цикле for-in выражает простыми словами, что длякаких бы условий вы ни установили, программа сделает это. Выражение let является ключевым словом объявления переменной, при использовании let оно позволяет JS назначать и условно, но непрерывно переназначать переменную, i сокращение от итерации, и это действительно может быть любая переменная, но по соглашению используется эта буква. Этот первый фрагмент считается вашим начальным выражением, что означает, что ваша программа начнет свою работу с этого места. итерация, это может быть изменено в соответствии с вашими потребностями и опытом.Как правило, вы найдете примеры, начинающиеся с нулевого индекса.

Выражение условия

Второй фрагмент цикла — «i ‹ array.length;», или выражение условия. Цикл — это то, что по определению может быть бесконечным, если вы не зададите ему причину или условие для остановки. Цикл for-in обеспечивает эту меру, так что вы, как программист, можете сообщить своей программе, когда ваше условие выполнено, и что она может прекратить итерацию. Это финишная черта простыми словами.

Это может быть что угодно, но ради нашего примера выше я объясню, что это значит, когда i должно быть меньше длины массива. i — это переменная, которую мы объявили и присвоили в первом фрагменте нашего цикла, она должна продолжаться до тех пор, пока не будет выполнено условие. В этом примере условие заключается в том, что любое значение, которое содержит i, меньше, чем числовое значение, которое является длиной массива. Длина — это количество элементов, которые содержит массив. Например, если i имеет значение 5 после нескольких итераций, а длина массива равна 6, цикл завершается.

Инкрементное выражение

Третий и последний фрагмент цикла for-in — это выражение приращения, которое, говоря еще проще, означает, насколько вы увеличиваете значение i. Здесь происходит переназначение i, в первом фрагменте происходит объявление и присвоение, но в выражении приращения происходит переназначение. Достоинством этого является то, что цикл не остается на месте и продолжается до тех пор, пока не достигнет своей конечной точки, которая объявлена ​​в выражении условия. В JS, когда написано ++, это означает добавить на 1, поэтому i++ означает, что значение будет переназначено путем добавления единицы к существующему значению. В первой итерации i устанавливается равным 0, поэтому i = 0 + 1 и i теперь равно 1. Это приращение может быть i+= 2, даже i —. JavaScript позволяет свободно управлять этим циклом, чтобы установить его для той цели, которая вам может понадобиться.

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

Пример кода

Для лучшего понимания я записал ниже стек вызовов в предварительно написанном примере кода, чтобы вы могли видеть, что код делает в цикле for-in.

— — — — — — — — — — — — — — — — — — — — — — — —

Итерация | Операция | Вывод

0 | 0 + 10 = 10 | сумма = 10

1 | 10 + 20 = 30 | сумма = 30

2 | 30 + 30 = 60 | сумма = 60

3 | 60 + 40 = 100 | сумма = 100

4 | 100 + 50 = 150 | сумма = 150

— — — — — — — — — — — — — — — — — — — — — — — —

150/5 = 30, поэтому на выходе будет 30.

В итоге

Цикл начался с 0, потому что для i было установлено значение 0, а затем, поскольку длина массива меньше 5, он выполнил оператор блока. Сумма установлена ​​равной 0, поэтому она была добавлена ​​к элементу массива со значением i, которое в первой итерации равно 0; sum + array[0] – array[i] совпадает с array[0] в этом случае, который равен 10 – устанавливает сумму в 10. В памяти сумма теперь имеет значение 10, и цикл увеличивается i на 1, и поскольку условие не выполняется, операторы выполняются. Это продолжается до тех пор, пока i не достигнет значения 4, которое меньше 5, поэтому цикл завершается. Затем выполняется оператор return и выводит значение 30, и вот вам объяснение циклов for-in в vanilla JS!