TOC

Как построить для циклов в JavaScript

Вступление

Loops используются в программировании для автоматизации повторяющихся задач. Самыми основными типами циклов, используемых в JavaScript, являются операторыwhile иdo...while, которые вы можете просмотреть на странице «https://www.digitalocean.com/community/tutorials/using- while-and- do-while-loops-in-javascript [Как создать циклы While и Do ... While в JavaScript] ».

Поскольку операторыwhile иdo...while являютсяconditionally based, они выполняются, когда данный оператор возвращается как результат вычисленияtrue. Подобно тому, что они также основаны на условных обозначениях, операторыfor также включают дополнительные функции, такие какloop counter, позволяя вам заранее установить количество итераций цикла.

В этом руководстве мы узнаем об оператореfor, включая операторыfor...of иfor...in, которые являются важными элементами языка программирования JavaScript.

Для петли

Операторfor - это тип цикла, который будет использовать до трех необязательных выражений для реализации повторного выполнения блока кода.

Давайте посмотрим на пример того, что это значит. 

for (initialization; condition; final expression) {
    // code to be executed
}

В приведенном выше синтаксисе внутри оператораfor есть три выражения:initialization,condition иfinal expression, также известные как приращение.

Давайте используем базовый пример, чтобы продемонстрировать, что делает каждое из этих утверждений.

forExample.js

// Initialize a for statement with 5 iterations
for (let i = 0; i < 4; i++) {
    // Print each iteration to the console
    console.log(i);
}

Когда мы запустим приведенный выше код, мы получим следующий вывод: 

Output0
1
2
3

В приведенном выше примере мы инициализировали циклfor с помощьюlet i = 0, который начинает цикл с0. Мы устанавливаем условие какi < 4, что означает, что покаi оценивается как меньше, чем4, цикл будет продолжать выполняться. Наше последнее выражениеi++ увеличивает счетчик для каждой итерации цикла. console.log(i) распечатывает числа, начиная с0 и заканчиваясь, как толькоi оценивается как4.

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

noLoop.js

// Set initial variable to 0
let i = 0;

// Manually increment variable by 1 four times
console.log(i++);
console.log(i++);
console.log(i++);
console.log(i++);

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

Давайте рассмотрим каждое выражение в цикле, чтобы понять их полностью.

инициализация

Наше первое выражение -initialization. Вот как это выглядит. 

let i = 0;

Мы объявляем переменную с именемi с ключевым словомlet (можно также использовать ключевое словоvar) и присваиваем ей значение0. Хотя переменной можно присвоить любое имя, наиболее часто используетсяi. Переменнаяi обозначает стерациюi, согласована и сохраняет компактность кода.

Состояние

Как мы видели в циклахwhile иdo...while, циклыfor обычно содержатcondition. Вот наше заявление о состоянии. 

i < 4;

Мы уже установили, что наша итерационная переменнаяi представляет0 для начала. Теперь мы говорим, что условие равноtrue, покаi меньше4 в этом примере.

Окончательное выражение

final expression - это оператор, который выполняется в конце каждого цикла. Чаще всего он используется для увеличения или уменьшения значения, но может использоваться для любых целей. 

i++

В нашем примере мы увеличиваем переменную на единицу сi++. Это то же самое, что и запускi = i + 1.

В отличие от выражений инициализации и условий, конечное выражение не заканчивается точкой с запятой.

Положить его вместе

Теперь, когда мы рассмотрели наши три выражения, содержащиеся в циклеfor, мы можем снова взглянуть на весь цикл. 

// Initialize a for statement with 5 iterations
for (let i = 0; i < 4; i++) {
    console.log(i);
}

Сначала мы объявляемi и устанавливаем для него0. Затем мы устанавливаем условие для запуска цикла до тех пор, покаi не станет меньше4. Наконец, мы увеличиваемi на единицу на каждой итерации. Наш кодовый блок выводит значениеi на консоль, поэтому наш результат -0,1,2 и3 в качестве вывода.

Необязательные выражения

Все три выражения в циклеfor необязательны. Например, мы можем написать тот же операторfor без выражения инициализации, инициализировав переменную вне цикла. 

// Declare variable outside the loop
let i = 0;

// Initialize the loop
for (; i < 4; i++) {
    console.log(i);
}
Output0
1
2
3

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

Ниже мы также можем удалить условие из цикла. Мы будем использовать операторif в сочетании сbreak, чтобы сказать циклу прекратить работу, когдаi больше, чем3, что является обратным дляtrue состояние. 

// Declare variable outside the loop
let i = 0;

// Omit initialization and condition
for (; ; i++) {
    if (i > 3) {
        break;
    }
    console.log(i);
}
Output0
1
2
3

[.note] #Warning: Операторbreakmust будет включен, если условие опущено, в противном случае цикл будет выполняться вечно какinfinite loop и потенциально приведет к сбою браузера.
#

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

// Declare variable outside the loop
let i = 0;

// Omit all statements
for (; ;) {
    if (i > 3) {
        break;
    }
    console.log(i);
    i++;
}
Output0
1
2
3

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

Модификация массива

Мы можем использовать циклыfor для измененияarray.

В следующем примере мы создадим пустой массив и заполним его переменной счетчика цикла.

modifyArray.js

// Initialize empty array
let arrayExample = [];

// Initialize loop to run 3 times
for (let i = 0; i < 3; i++) {
    // Update array with variable value
    arrayExample.push(i);
    console.log(arrayExample);
}

Выполнение приведенного выше кода JavaScript приведет к следующему выводу. 

Output[ 0 ]
[ 0, 1 ]
[ 0, 1, 2 ]

Мы устанавливаем цикл, который выполняется до тех пор, покаi < 3 не перестанет бытьtrue, и мы говорим консоли выводить массивarrayExample на консоль в конце каждой итерации. С помощью этого метода мы можем видеть, как массив обновляется с новыми значениями.

Длина массива

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

loopThroughArray.js

// Declare array with 3 items
let fish = [ "flounder", "salmon", "pike" ];

// Initalize for loop to run for the total length of an array
for (let i = 0; i < fish.length; i++) {
    // Print each item to the console
    console.log(fish[i]);
}

Мы получим следующий вывод. 

Outputflounder
salmon
pike

В этом примере мы увеличиваем каждый индекс массива с помощьюfish[i] (например, цикл будет увеличиваться доfish[0],fish[1] и т. д.). Это приводит к динамическому обновлению индекса с каждой итерацией.

Подробнее оfor statement is available on the Mozilla Developer Network.

Для ... в петле

Операторfor...in выполняет итерацию по свойствам объекта. Для демонстрации мы создадим простой объектshark с несколькими парамиname:value.

shark.js

const shark = {
    species: "great white",
    color: "white",
    numberOfTeeth: Infinity
}

Используя циклfor...in, мы можем легко получить доступ к каждому из имен свойств. 

// Print property names of object
for (attribute in shark) {
    console.log(attribute);
}
Outputspecies
color
numberOfTeeth

Мы также можем получить доступ к значениям каждого свойства, используя имя свойства в качестве значения индекса объекта. 

// Print property values of object
for (attribute in shark) {
    console.log(shark[attribute]);
}
Outputgreat white
white
Infinity

Собрав их вместе, мы можем получить доступ ко всем именам и значениям объекта. 

// Print names and values of object properties
for (attribute in shark) {
    console.log(`${attribute}`.toUpperCase() + `: ${shark[attribute]}`);
}
OutputSPECIES: great white
COLOR: white
NUMBEROFTEETH: Infinity

Мы использовали методtoUpperCase() для изменения имени свойства, а затем значение свойства. for...in - чрезвычайно полезный способ перебора свойств объекта.

Просмотритеfor...in on the Mozilla Developer Network для получения более подробной информации.

Для ... петли

Операторfor...in полезен для итерации по свойствам объекта, но для итерации по итеративным объектам, таким какarrays иstrings, мы можем использовать операторfor...of. Операторfor...of является новой функцией, начиная сECMAScript 6. ECMAScript (или ES) - это спецификация языка сценариев, созданная для стандартизации JavaScript.

В этом примере циклаfor...of мы создадим массив и выведем каждый элемент массива на консоль.

sharks.js

// Initialize array of shark species
let sharks = [ "great white", "tiger", "hammerhead" ];

// Print out each type of shark
for (let shark of sharks) {
    console.log(shark);
}

На выходе из оператораfor...of мы получим следующее. 

Outputgreat white
tiger
hammerhead

Также можно распечатать индекс, связанный с элементами индекса, используя методentries().

sharks.js

...
// Loop through both index and element
for (let [index, shark] of sharks.entries()) {
    console.log(index, shark);
}
Output0 'great white'
1 'tiger'
2 'hammerhead'

Строка может быть повторена так же, как массив.

sharkString.js

// Assign string to a variable
let sharkString = "sharks";

// Iterate through each index in the string
for (let shark of sharkString) {
    console.log(shark);
}
Outputs
h
a
r
k
s

В этом случае мы перебрали все символы в строке, распечатав их в последовательном порядке.

Для более подробного описания различий междуfor...in иfor...of, прочтите оfor...of loops on the Mozilla Developer Network.

Заключение

В этом руководстве мы узнали, как создавать циклыfor в JavaScript, состоящие из операторовfor,for...of иfor...in.

Циклы являются неотъемлемой частью программирования на JavaScript и используются для автоматизации повторяющихся задач и делают код более кратким и эффективным.

Related