第一節課的時候，我們學過：

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 循環語法的相關內容，就簡單到這里了，歡迎大家溝通交流，批評指正。

點擊關注，第一時間了解華為云新鮮技術~