第一节课的时候，我们学过：

var a=1; //声明变量
if(a%2==0){
console.log(a);
}
a=2;
if(a%2==0){
console.log(a);
}
a=3;
if(a%2==0){
console.log(a);
}
a=4;
if(a%2==0){
console.log(a);
}

。。
a=10
if(a%2==0){
console.log(a);
}

这是打印10以内的偶数。

在这个例子的下面，还有几行语句可以达到相同的效果，但是要精简很多。

for(var i=1;i<=10;i++)
{
if(i%2==0)
{
console.log(i);
}
}

这个for语句就是Javascript的循环语句。

for语句的语法是这样的：

for(初始化语句;条件语句;迭代操作)
{
//语句
}

在上面的例子中，就是：

var i=1 这是初始化语句，声明了一个i的变量，数值是1
i<=10 条件是i小于等于10
i++ 就是每次执行循环，i的值自动加1，进行迭代操作。


下面是例子1：

var count;

for(count=0;count<=10;count=count+1)
{
console.log("Count的值是"+count);
}

另外，还有几种循环语句，这里也一并介绍一下

1、while语句
他的语法是：

while(条件)
{
//执行语句
}

同样是执行打印1到10的值，while是这样的（例子2）：

var count=0;

while(count<=10)
{
console.log("Count的值是"+count);

count=count+1; //这个地方是必须的，否则count一直为0，就会进入死循环
}

2、do..while语句

它的语法是：

do {
//执行语句
}while(条件)

同样打印1到10的值（例子3）：

var count=0;

do {
console.log("Count的值是"+count);

count=count+1; //这个地方是必须的，否则count一直为0，就会进入死循环
}while(count<=10);

最后一个例子是综合第三节的if语句，来一个稍微复杂的应用。


我们来求一下所有的“水仙花”数。

在百度百科里面，水仙花数的定义是这样的：

水仙花数（Narcissistic number）也被称为超完全数字不变数（pluperfect digital invariant, PPDI）、自恋数、自幂数、阿姆斯壮数或阿姆斯特朗数（Armstrong number），
水仙花数是指一个 3 位数，它的每个位上的数字的 3次幂之和等于它本身（例如：1^3 + 5^3+ 3^3 = 153）。

下面是具体的例子（例子4）：

var i;
var j;
var k;

for(var i=1;i<=9;i++){
for(j=1;j<9;j++){
for(k=1;k<9;k++){
var real_number=i*100+j*10+k;
if(i*i*i+j*j*j+k*K*k==real_number){
console("发现水仙花数："+real_number);
}
}
}

}

今天就到这里。

录：

1. 什么是for循环
2. for循环的语法格式和使用
3. for循环的嵌套

一、什么是for循环

程序中进行有规律的重复性操作，需要用到循环语句。

先来看看生活中的一些场景：

（1）食堂阿姨打菜：接过顾客的餐盘→询问菜品→打菜→递回餐盘，重复以上过程，直到所有顾客的菜都打完了。

（2）快递员送快递：查看送件地址→赶往目的地→电话告知收件人→收件人签收→交快递件，重复以上过程，直到所有需要送的快递都处理完了。

（3）公交司机……

（4）作业流程……

以上场景都有一个共同的特点：有条件地重复地做一件事，每一次做的事情不同但类似。

程序是为了解决实际问题的，实际问题中存在着重复动作，那么程序中也应该有相应的描述，这就是循环。

二、for循环的语法格式和使用

1.格式

for(var i=0;i<len;i++){
 循环体
}

2.案例：计算1+2+3+……+10

/*方案一*/
var sum1 = 1+2+3+4+5+6+7+8+9+10;
/*方案二*/
var sum2 = 0;
sum2 += 1;
sum2 += 2;
sum2 += 3;
sum2 += 4;
sum2 += 5;
sum2 += 6;
sum2 += 7;
sum2 += 8;
sum2 += 9;
sum2 += 10;

但是这两种方案的描述方式都不太理想，如果是要加到10000呢？

注意观察方案二，它重复地做一件事（将一个数加到sum2中），每一次做的不同但类似。

我们希望能找到一种更好的描述方法

*方案三:改造方案二*/
var sum3 = 0;
var n = 1;
while(n <= 10){
 sum3 += n;
 n++;
}

三、for循环的嵌套

1.语法

for(var i=0;i<=9;i++) {
 for(var j=0;i<j;j++){
 循环体;
 }
 循环体;
}

2.案例：就如九九乘法表，双重for循环，要领是内存for循环从1开始，不得大于上层i的值

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

1*1=1

2*1=2 2*2=4

3*1=3 3*2=6 3*3=9

4*1=4 4*2=8 4*3=12 4*4=16

5*1=5 5*2=10 5*3=15 5*4=20 5*5=25

6*1=6 6*2=12 6*3=18 6*4=24 6*5=30 6*6=36

7*1=7 7*2=14 7*3=21 7*4=28 7*5=35 7*6=42 7*7=49

8*1=8 8*2=16 8*3=24 8*4=32 8*5=40 8*6=48 8*7=56 8*8=64

9*1=9 9*2=18 9*3=27 9*4=36 9*5=45 9*6=54 9*7=63 9*8=72 9*9=81

下节预告：while和do...while

​​此账号为华为云开发者社区官方运营账号，提供全面深入的云计算前景分析、丰富的技术干货、程序样例，分享华为云前沿资讯动态

本文分享自华为云社区《JS中循环语句大集合丨【WEB前端大作战】》，原文作者：hwJw19 。

JavaScript 中，一共给开发者提供了一下几种循环语句，分别是 while 循环，do…while 循环，for 循环，for Each，for…in 循环和 for…of 循环。

下面我们就通过本文来仔细分辨一下，各个循环的使用差异。

while 循环

语法：

while (expr){
	statement
}

expr 为条件表达式，当 expr 为真时，执行 statement 语句，执行结束后，再次进入下一轮循环，直到条件表达式为假时，跳出循环。

代码示例：

var n = 1;  //声明并初始化循环变量
while(n <= 100){  //循环条件
    n++;  //递增循环变量
    if (n % 2 == 0) document.write(n + "");   //执行循环操作
}

do…while 循环

语法：

do{
	statement
} while(expr)

do…while 循环与 while 循环很相似，区别在于，while 循环是先判断再执行，而 do…while 循环会先执行一次语句，然后再开始判断循环。不论条件为真或者是假，都会执行一次。

代码示例：

var text = "" var i = 0; 
do { 
text += "<br>数字为 " + i; i++; 
} while (i < 5); 
document.getElementById("demo").innerHTML = text;

for 循环

语法：

for (expr 1; expr 2; expr 3)
{
    statement 
}

​for 循环想必也是大家比较熟悉的一种循环方式了，for 循环主要用户循环执行一定次数的代码块，小括号中，是 for 循环的条件，花括号中，是循环条件为 true 时所需要执行的语句。缺点是写法比较麻烦。

示例代码：

for (var i=0; i<5; i++) { 
x=x + "该数字为 " + i + "<br>"; 
}

forEach 循环

语法：

array.forEach(function(currentValue, index, arr), thisValue)

由于 for 循环的写法比较繁琐，因此数组提供了内置的 forEach 方法，语法中的参数 currentValue 是必填的，其他参数选填。forEach 语句的问题在于，无法中途跳出 forEach 循环，break 命令或 return 命令都不能奏效。

代码示例：

var arr = [1, 2, 3, 4, 5];
arr.forEach(function (item) {
    console.log(item);
});

for…in 循环

语法：

for (var in object) {
statement 
} 

​for…in 循环主要用于循环遍历对象，可以获取对象的键名，但是 for…in 并不适合遍历数组，主要有如下原因：

1. 数组的键名是数字，但是..in 循环是以字符串作为键名“0”、“1”、“2”等等。

2. ..in 循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。

3. 某些情况下，..in 循环会以任意顺序遍历键名。

代码示例：

var person = {fname:"John", lname:"Doe", age:32}; 
 
var text = "";
var x;
for (x in person) {
    text += person[x] + " ";
}

for...of 循环

语法：

for (variable of iterable) {
 //要执行的语句 
}

for...of 循环，是可以遍历所有数据结构的统一的方法，它可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如 arguments 对象、DOM NodeList 对象）、后文的 Generator 对象，以及字符串。读取的是遍历对象的键值。for...of 循环的优点：

1. 有着同 for...in 一样的简洁语法，但是没有 for...in 那些缺点。

2. 不同于 forEach 方法，它可以与 break、continue 和 return 配合使用。

3. 提供了遍历所有数据结构的统一操作接口。

代码示例：

const iterable = ['mini', 'mani', 'mo'];
 
for (const value of iterable) {
  console.log(value);
}

关于 JS 循环语法的相关内容，就简单到这里了，欢迎大家沟通交流，批评指正。

点击关注，第一时间了解华为云新鲜技术~