重温基础封面

Author 王平安
E-mail pingan8787@qq.com
博 客 www.pingan8787.com
微 信 pingan8787
每日文章推荐 https://github.com/pingan8787/Leo_Reading/issues

本章节复习的是JS中的循环语句，让我们能更快速且简单的完成一些需求。

首先我们要知道：循环实际上就是把一个事情重复n次执行，也有可能是0次，JS中有以下几种循环语句类型：

  • for语句
  • do...while语句
  • while语句
  • labeled语句
  • break语句
  • continue语句
  • for...in语句
  • for...of语句

1.for语句

重复执行for的条件语句，直到循环条件为false退出循环： 

1
2
3
4
var a = 1;
for ( a < 3){
    a ++;
}

这个语句大概执行了以下操作：

  • 1.定义并初始化一个变量a的值为1；
  • 2.执行循环语句，条件为当a < 3的时候，a每次递增1；
  • 3.返回第2步继续循环；
  • 4.当a在等于4的时候，不满足循环条件a < 3，然后退出循环；
    其他例子： 
    1
    2
    3
    4
    5
    6
    7
    // 求数组中所有值的和
    var a = [ 1, 3, 4, 6];
    var sum = 0;
    for (var i = 0; i < a.length; i++){
        sum += a[i];
    }
    sum; // 14

2.do...while语句

重复执行do的条件，直到不符合while的条件，退出循环： 

1
2
3
4
do {
  a += 1;
  console.log(a);
} while (a < 5);

3.while语句

重复执行while的条件，直到while的条件为false，退出循环： 

1
2
3
4
5
6
7
var a = 0;
var b = 0;
while (a < 5){
    a ++;
    b += a;
}
// a => 5; b => 15

4.labeled语句

用来标识一个程序位置的标识符，如标识一个循环，并在break或continue中指出中国标识符，来停止这个循环。 

1
2
3
4
5
6
7
8
9
10
11
var a = [1, 2, 3, 4, 5];
labelName:
for(var i = 0 ;i< a.length; i++){
    console.log(i);
    if(i > 1){
        break labelName;
    }
}
// 0
// 1
// 2

5.break语句

用于终止一个循环，还可以在switch中终止，通常这么使用：

  • 终止一个循环： 
    1
    2
    3
    4
    5
    for(var i = 0 ;i< a.length; i++){
        if(a[i] == 1){
            break;
        }
    }
  • 终止一个label
    1
    2
    3
    4
    5
    6
    7
    8
    leo:
    for(var i = 0 ;i< a.length; i++){
        for(var j = 0 ;j< a.length; j++){
            if(a[i] == a[j]){
                break leo;
            }
        }
    }

6.continue语句

用来跳过当前循环，进入下个循环，可以使用在while、do...while、for或者label语句：

  • 有使用continue 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var a = 0;
    var b = 0;
    while (a < 5 ){
        a ++;
        if(a == 2){
            continue;
        }
        b += a;
        console.log(b);
    }
    // 1 4 8 13
  • 没有使用continue 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var a = 0;
    var b = 0;
    while (a < 5 ){
        a ++;
        if(a == 2){
            // continue;
        }
        b += a;
        console.log(b);
    }
    // 1,3,6,10,15

7.for...in语句

通常用于遍历一个对象的所有可枚举的属性，执行指定方法： 

1
2
3
4
5
6
7
8
9
var a = [
    {name : 'leo'},
    {name : 'pingan'},
    {name : '平安'},
]
for(var k in a){
    // a为循环对象 k为当前指针位置
    console.log(a[k]);
}

8.for...of语句

通常用于遍历一个可迭代对象（包括Array,Map,Set和参数对象arguments等），执行指定方法： 

1
2
3
4
5
6
7
var a = [1, 2, 5];
for(var k in a){
    console.log(k);   // k 为当前元素的下标
}
for(var m of a){
    console.log(m);   // m 为当前元素的值
}

参考资料

1.MDN 循环和迭代

本部分内容到这结束

Author 王平安
E-mail pingan8787@qq.com
博 客 www.pingan8787.com
微 信 pingan8787
每日文章推荐 https://github.com/pingan8787/Leo_Reading/issues
JS小册 js.pingan8787.com