JavaScript 的 for 循环应该如何学习？

JS for 循环语法

JS for 循环适合在已知循环次数时使用，语法格式如下：

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

for 循环中包含三个可选的表达式 initialization、condition 和 increment，其中：

• initialization：为一个表达式或者变量声明，我们通常将该步骤称为“初始化计数器变量”，在循环过程中只会执行一次；
• condition：为一个条件表达式，与 while 循环中的条件表达式功能相同，通常用来与计数器的值进行比较，以确定是否进行循环，通过该表达式可以设置循环的次数；
• increment：为一个表达式，用来在每次循环结束后更新（递增或递减）计数器的值。

示例代码如下：

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] + " ");
}

运行结果：

Apple Banana Mango Orange Papaya

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 循环为例，来演示一下循环的嵌套使用：

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

运行结果：

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

for 循环变体

为了更加方便地遍历对象、数组、字符串等内容，JS 还支持两种 for 循环变体，分别是 for in 循环和 for of 循环。

JS for in 循环是一种特殊类型的循环，也是普通for循环的变体，主要用来遍历对象，使用它可以将对象中的属性依次循环出来，其语法格式如下：

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

其中，variable 为一个变量，每次循环时这个变量都会被赋予不同的值，我们可以在{ }

中使用这个变量来进行一系列操作；object 为要遍历的对象，在每次循环中，会将 object 对象中的一个属性的键赋值给变量 variable，直到对象中的所有属性都遍历完。

JS for in 循环示例代码：

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

运行结果：

name = Clark
surname = Kent
age = 36

注意，JS for in 循环是为遍历对象而创建的，虽然也可以遍历数组，但是并不推荐，若要遍历数组，可以使用for循环或者for of循环。

JS for of 循环是 ECMAScript6 中新添加的一个循环方式，与 for in 循环类似，也是普通 for 循环的一种变体。使用 for of 循环可以轻松的遍历数组或者其它可遍历的对象，例如字符串、对象等。

JS for of 循环的语法格式如下：

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

其中，variable 为一个变量，每次循环时这个变量都会被赋予不同的值，我们可以在后面的{ }

中使用这个变量来进行一系列操作；iterable 为要遍历的内容，在每次循环中，会将 iterable 中的一个值赋值给变量 variable，直到 iterable 中的所有值都遍历完。

示例代码如下：

// 定义一个数组
var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
// 使用 for of 循环遍历数组中的每个元素
for (var value of arr) {
    document.write(value + ", ");
}
document.write("
");
// 定义一个字符串
var str = "Hello World!";
// 使用 for of 循环遍历字符串中的每个字符
for (var value of str) {
    document.write(value + ", ");
}
document.write("
");
// 定义一个对象
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 of 循环也可以遍历对象，但并不推荐，若要遍历对象可以使用for in循环。

黑马程序员前端JavaScript入门到精通全套视频教程，javascript核心进阶ES6语法、API、js高级等基础知识和实战教程