Вступление
Предположим, вам дали задание написать программу, которая отображает числа 1–100. Один из способов сделать это — написать 100 операторов console.log. Но я уверен, что вы этого не сделаете, потому что вы бы сыт по горло 9-й или 10-й линии.
Единственная часть, которая изменяется в каждом утверждении, это число, поэтому должен быть способ написать только одно утверждение. И есть с петлями. Циклы позволяют нам выполнять множество шагов в блоке кода повторно.
содержание
- Пока петли
- Циклы Do-while
- Для петель
- Массивы
- Петли
- Для петель
- Рассмотрение
- Ресурсы
Пока петли
Циклы while будут выполнять множество операторов несколько раз, пока выполняется некоторое условие. Когда условие ложно, программа выйдет из цикла. Этот вид цикла проверяет условие перед выполнением итерации. Итерация — это выполнение тела цикла. В следующем примере ничего не отобразится, потому что наше условие ложно.
|
1
2
3
4
5
|
let hungry = false;
while (hungry) {
console.log(«eat»);
}
|
Это общая форма цикла while:
|
1
2
3
4
5
|
while (condition) {
statement;
statement;
etc.
}
|
При использовании циклов while нужно быть осторожным, создавая циклы, которые никогда не заканчиваются. Это происходит потому, что условие никогда не становится ложным. Если это случится с вами, ваша программа потерпит крах. Пример:
|
1
2
3
4
5
|
let hungry = true;
while (hungry) {
console.log(«eat»);
}
|
задача
Сколько раз будет выполнено тело этого цикла:
|
1
2
3
4
5
6
|
let i = 0;
while (i < 10) {
console.log(«Hello, World»);
i += 1;
}
|
Циклы Do-While
Цикл do-while сначала выполнит тело операторов, а затем проверит условие. Этот вид цикла полезен, когда вы знаете, что хотите запустить код хотя бы один раз. Следующий пример покажет «есть» один раз, даже если условие ложно.
|
1
2
3
4
5
|
let hungry = false;
do {
console.log(«eat»);
} while (hungry);
|
Это общая форма для цикла do while:
|
1
2
3
4
5
|
do {
statement;
statement;
etc.
} while (condition);
|
задача
Напишите цикл выполнения, который будет отображать числа 1–10.
Для петель
Цикл for будет повторять выполнение блока кода определенное количество раз. В следующем примере отображаются цифры 1–10:
|
1
2
3
|
for (let i = 1; i <= 10; i++) {
console.log(i);
}
|
Это общая форма цикла for:
|
1
2
3
4
5
|
for (initial; condition; step) {
statement;
statement;
etc.
}
|
Initial — это выражение, которое устанавливает значение нашей переменной. Условие — это выражение, которое должно быть истинным для выполнения операторов. И шаг — это выражение, которое увеличивает значение нашей переменной.
Один из паттернов программирования — использовать цикл for для обновления значения переменной самим собой и нового значения. Этот пример суммирует числа 1–10:
|
1
2
3
4
5
6
7
|
let x = 0;
for (let i = 1; i <= 10; i++) {
x += i;
}
console.log(x) //55
|
+= Является оператором присваивания, который добавляет значение обратно в переменную. Это список всех операторов присваивания:
| оператор | пример | эквивалент |
|---|---|---|
| + = | х + = 2 | х = х + 2 |
| знак равно | х — = 2 | х = х — 2 |
| знак равно | х * = 2 | х = х * 2 |
| знак равно | х / = 2 | х = х / 2 |
| знак равно | х% = 2 | х = х% 2 |
задача
Напишите цикл for, который вычисляет факториал числа. Коэффициент числа n является произведением всех целых чисел от 1 до n . Например, 4! (4 факториал) равен 1 x 2 x 3 x 4, что равно 24.
Массивы
Массив — это объект, который содержит список элементов, называемых элементами, доступ к которым осуществляется по их индексу. Индекс — это позиция элемента в массиве. Первый элемент имеет индекс 0. Ниже приведены некоторые общие операции с массивами.
Создайте пустой массив:
|
1
|
let arr = [ ];
|
Инициализируйте массив со значениями:
|
1
|
let arr = [1, 2, «Hello», «World»];
|
Получить элемент из массива:
|
1
2
3
|
let arr = [1, 2, «Hello», «World»];
arr[0] //1
arr[2] //»Hello»
|
Обновите элемент в массиве:
|
1
2
|
let arr = [1, 2, «Hello», «World»];
arr[2] = 3;
|
Цикл над массивом:
|
1
2
3
4
5
|
let arr = [1, 2, «Hello», «World»];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
|
Двумерный массив — это массив, элементы которого являются массивами. Пример:
|
1
2
3
4
5
6
|
let arr = [
[1, 2],
[«Hello», «World»]
];
console.log(arr[ 0 ][ 1 ]);
|
Вот как вы можете перебрать массив и отобразить каждый элемент:
|
1
2
3
4
5
|
for (let i = 0; i < arr.length; i++) {
for (let j = 0; j < arr[i].length; j++) {
console.log(arr[ i ][ j ]);
}
}
|
задача
Какой элемент отображается при i = 1 и j = 0 в приведенном выше цикле for?
Петля
Этот вид цикла позволяет нам проходить через ключи в объекте. Объект — это структура данных, ключи которой сопоставлены со значениями. Вот некоторые общие операции, которые можно выполнить над объектом.
Создайте пустой объект:
|
1
|
let obj = { };
|
Инициализируйте объект со значениями:
|
1
2
3
4
|
let obj = {
foo: «Hello»,
bar: «World»
};
|
Получить свойство от объекта:
|
1
2
3
4
5
6
7
|
let obj = {
foo: «Hello»,
bar: «World»
};
obj.foo;
obj[«foo»];
|
Обновите свойство в объекте:
|
1
2
3
4
5
6
7
|
let obj = {
foo: «Hello»,
bar: «World»
};
obj.foo = «hi»
obj[«foo»] = «hi»
|
Цикл по клавишам объекта:
|
1
2
3
|
for (let key in obj) {
console.log(key);
}
|
задача
Что говорит вышеприведенное для отображения цикла obj = {foo: «Hello», bar: «World»}?
For-Of Loop
Этот вид цикла позволяет нам зацикливать значения итерируемых объектов. Примерами итерируемых объектов являются массивы и строки.
Цикл над массивом:
|
1
2
3
4
5
6
7
|
let arr = [«foo», «bar», «baz»];
for (let elem of arr) {
console.log(elem);
}
// foo bar baz
|
Зациклить строку:
|
1
2
3
4
5
6
7
|
let str = «Hello»;
for (let char of str) {
console.log(char);
}
//’H’ ‘e’ ‘l’ ‘l’ ‘o’
|
задача
Используя любой из циклов, напишите программу, которая будет отображать этот шаблон лестницы:
|
1
2
3
4
5
|
#
#
#
#
#
|
Рассмотрение
Циклы позволяют уменьшить дублирование в нашем коде. Циклы while повторяют действие до тех пор, пока условие не станет ложным. Цикл do-while будет выполнен хотя бы один раз. Для циклов давайте повторим действие, пока не достигнем конца счета. Цикл for-in разработан таким образом, чтобы мы могли получить доступ к ключам в объекте. Цикл for-of разработан таким образом, чтобы мы могли получить значение повторяемого объекта.
Далее в части 4 мы узнаем о функциях.