【重温基础】3.循环和迭代

梁晨大约 3 分钟

【重温基础】3.循环和迭代

本文是 重温基础 系列文章的第三篇，今天想起鬼脚七的一句话：人不一定自由，但思想一定是自由的。思想没有对和错，也没有高和低，只有不同。了解一个人可以去了解他的思想。
。

系列目录：

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

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

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

1. `for` 语句

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

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

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

1.定义并初始化一个变量 a 的值为 1 ；
2.执行循环语句，条件为当 a < 3 的时候， a 每次递增 1 ；
3.返回第2步继续循环；
4.当 a 在等于4的时候，不满足循环条件 a < 3 ，然后退出循环；

其他例子：

// 求数组中所有值的和
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 的条件，退出循环：

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

3. `while` 语句

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

var a = 0;
var b = 0;
while (a < 5){
    a ++;
    b += a;
}
// a => 5; b => 15

4. `labeled` 语句

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

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 中终止，通常这么使用：

终止一个循环：
for(var i = 0 ;i< a.length; i++){ if(a[i] == 1){ break; } }
终止一个label
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
var a = 0; var b = 0; while (a < 5 ){ a ++; if(a == 2){ continue; } b += a; console.log(b); } // 1 4 8 13
没有使用 continue
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` 语句

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

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 等），执行指定方法：

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...
JS小册	js.pingan8787.com

欢迎关注微信公众号【前端自习课】每天早晨，与您一起学习一篇优秀的前端技术博文 .