Как изучить цикл for в JavaScript?

JS для синтаксиса цикла

JS for цикл подходит для использования, когда известно количество циклов. Формат синтаксиса следующий:

for(initialization; condition; increment) {
    // 要执行的代码
}

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

  • Инициализация. Для объявления выражения или переменной мы обычно называем этот шаг «инициализацией переменной счетчика», и он будет выполнен только один раз в цикле;
  • условие: это условное выражение, которое имеет ту же функцию, что и условное выражение в цикле while. Обычно оно используется для сравнения со значением счетчика, чтобы определить, следует ли выполнять цикл. Это выражение может установить количество циклов;
  • приращение: выражение, используемое для обновления (увеличения или уменьшения) значения счетчика после каждого цикла.

Пример кода выглядит следующим образом:

for (var i = 1; i <= 10; i++) {
    document.write(i + " ");
}

результат операции:

1 2 3 4 5 6 7 8 9 10

В приведенном выше коде он будет выполнен до начала цикла var i = 1;, а переменная i будет использоваться в качестве счетчика; затем будет оценено, i <= 10истинно ли это. Если это правда, { }выполняемый код будет выполнен. Если это так произойдет сбой, цикл for завершится; после завершения каждого цикла i++будет выполнена операция, то есть обновится значение счетчика.

[Пример] Используйте цикл for для обхода содержимого массива:

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
for(var i = 0; i < fruits.length; i++) {
    document.write(fruits[i] + "&emsp;");
}

результат операции:

Яблоко Банан Манго Апельсин Папайя

Три выражения в цикле JS for

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

// 省略第一个表达式
var i = 0;
for (; i < 5; i++) {
    // 要执行的代码
}
// 省略第二个表达式
for (var y = 0; ; y++) {
    if(y > 5){
        break;
    }
    // 要执行的代码
}
// 省略第一个和第三个表达式
var j = 0;
for (; j < 5;) {
    // 要执行的代码
    j++;
}
// 省略所有表达式
var z = 0;
for (;;) {
    if(z > 5){
        break;
    }
    // 要执行的代码
    z++;
}

JS для вложенности циклов

Независимо от типа цикла, его можно использовать в гнездах (то есть внутри цикла определяется один или несколько циклов). Давайте возьмем цикл for в качестве примера, чтобы продемонстрировать вложенное использование циклов:

for (var i = 1; i <= 9; i++) {
    for (var j = 1; j <= i; j++) {
        document.write(j + " x " + i + " = " + (i * j) + "&emsp;");
    }
    document.write("<br>");
}

результат операции:

1 x 1 = 1 
1 x 2 = 2 2 x 2 = 4 
1 x 3 = 3 2 x 3 = 6 3 x 3 = 9 
1 x 4 = 4 2 x 4 = 8 3 x 4 = 12 4 x 4 = 16 
1 x 5 = 5 2 x 5 = 10 3 x 5 = 15 4 x 5 = 20 5 x 5 = 25 
1 x 6 = 6 2 x 6 = 12 3 x 6 = 18 4 x 6 = 24 5 x 6 = 30 6 x 6 = 36 
1 x 7 = 7 2 x 7 = 14 3 x 7 = 21 4 x 7 = 28 5 x 7 = 35 6 x 7 = 42 7 x 7 = 49 
1 x 8 = 8 2 x 8 = 16 3 x 8 = 24 4 x 8 = 32 5 x 8 = 40 6 x 8 = 48 7 x 8 = 56 8 x 8 = 64 
1 x 9 = 9 2 x 9 = 18 3 x 9 = 27 4 x 9 = 36 5 x 9 = 45 6 x 9 = 54 7 x 9 = 63 8 x 9 = 72 9 x 9 = 81

для вариаций цикла

Для более удобного перемещения по объектам, массивам, строкам и т. д. JS также поддерживает два варианта цикла for, а именно for in и for of.

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

for (variable in object) {
    // 要执行的代码
}

Среди них переменная является переменной. Этой переменной будет присваиваться другое значение при каждом цикле. Мы можем{ }

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

JS для примера кода в цикле:

// 定义一个对象
var person = {"name": "Clark", "surname": "Kent", "age": "36"};
// 遍历对象中的所有属性
for(var prop in person) {
    document.write("<p>" + prop + " = " + person[prop] + "</p>");
}

результат операции:

name = Clark
surname = Kent
age = 36

Обратите внимание, что цикл JS for in создан для обхода объектов. Хотя он также может перемещаться по массивам, это не рекомендуется. Для перемещения по массивам вы можете использовать циклы for или for of.

Цикл for of в JS — это новый метод цикла, добавленный в ECMAScript6. Он похож на цикл for in, а также является вариантом обычного цикла for. Используйте цикл for для легкого обхода массивов или других проходимых объектов, таких как строки, объекты и т. д.

Синтаксический формат JS for цикла следующий:

for (variable of iterable) {
    // 要执行的代码
}

Среди них переменная является переменной. Этой переменной будет присваиваться другое значение при каждом цикле. Мы можем использовать ее позже.{ }

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

Пример кода выглядит следующим образом:

// 定义一个数组
var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
// 使用 for of 循环遍历数组中的每个元素
for (var value of arr) {
    document.write(value + ", ");
}
document.write("<br>");
// 定义一个字符串
var str = "Hello World!";
// 使用 for of 循环遍历字符串中的每个字符
for (var value of str) {
    document.write(value + ", ");
}
document.write("<br>");
// 定义一个对象
var obj = {"name": "Clark", "surname": "Kent", "age": "36"};
// 使用 for of 循环遍历对象中的所有属性
for(var value in obj) {
    document.write(value + ", ");
}

результат операции:

a, b, c, d, e, f,
H, e, l, l, o, , W, o, r, l, d, !,
name, surname, age,

Обратите внимание: хотя цикл for также может перемещаться по объектам, это не рекомендуется. Если вы хотите перемещаться по объектам, вы можете использовать цикл for in.

Полный набор видеоуроков от начала до освоения клиентского JavaScript для программистов Dark Horse, а также базовые знания и практические руководства по расширенному синтаксису ES6, API и js в ядре JavaScript.

Je suppose que tu aimes

Origine blog.csdn.net/Itmastergo/article/details/133342051
conseillé
Classement