JavaScript的流程控制之for循環語句和while循環語句（二）

JavaScript的流程控制（二）

上一篇博客說到了JavaScript流程控制的if條件語句和switch選擇語句，現在我們來說一下JavaScript流程控制中的循環語句。JavaScript中循環語句主要包含for循環和while循環兩類。

for循環

for循環又分爲for循環，for…in循環，for…of循環,其中for…of循環是es6中新增的，咱們後面講es6時再講，這次主要講for循環和for…in循環。

1.for循環

循環可以將代碼塊執行指定的次數。

    // 語法：
    // for(語句1;語句2;語句3){
    //    語句4;
    // }
    // 語句1:初始化一個值， 
    // 語句2:判斷條件
    // 語句3:自增(++)或自減(--)
    // 語句4:要訓話執行的代碼
    
    
    // 如果我們想一遍又一遍地運行相同的代碼，並且每次的值都不同。如下：
    document.write(1 + "<br/>");
    document.write(2 + "<br/>");
    document.write(3 + "<br/>");
    document.write(4 + "<br/>");
    document.write(5 + "<br/>");
    document.write(6 + "<br/>");
    document.write(7 + "<br/>");
    
    // 這時我們就可以考慮使用循環了，比如：
    for(var n=1;n<8;n++){
        document.write(n+"<br/>")
    }
    // 使用for循環只需要三行代碼就可以實現上面啓航代碼可以實現的效果

注意：for循環中中代碼執行的順序爲：先語句1,然後語句2,語句4,最後語句3。 同時要知道，for循環的語句1和語句2主要是用來判斷循環執行的次數。

補充一個逗號表達式,用在判斷條件中。簡單來說，在判斷條件中，有多判斷條件時，只有最後一個條件起作用。

    for(var a=0,b=0;a<10,b<20;a++,b++){
        console.log(a+b);// 38 
    }
    
    if(10>5,10<5){
        console.log(true);
    }else{
        console.log(false);
    }
    // 打印false

2.for…in循環

JavaScript中for…in循環語句，用來遍歷對象(數組)的屬性。

    var obj={
        name:"尹傑",
        age:35,
        sex:"和諸葛成同類"
    }
    console.log(obj.name);//尹傑
    console.log(obj["name"]);//尹傑


    for(k in obj){
        console.log(k);//鍵  key
        //name age sex
        
        console.log(k+":"+obj[k]);
        //name:尹傑 age:35 sex:和諸葛成同類
    }
    
    var arr=[1,2,3,4,5,6,7];
    for(j in arr){
        console.log(arr[j]);//1 2 3 4 5 6 7
    }

while循環

while循環語句和for循環語句執行的功能類似。都是包含判斷的條件以及條件成立時執行的代碼塊。

1.while循環

    // 語法：
    // while循環
    // 聲明初始值
    // while (條件) {
    //     // 執行代碼  類似於for循環的語句4;
    //     // 類似於for循環的語句3;
    // }
    
    var i=0;
    while (i<10) {
        console.log(i);
        i++;
    }
    // 在瀏覽器控制檯打印0 1 2 3 4 5 6 7 8 9

2.do…while循環

    // do while循環  
    // 語法：
    // do{
    //     // 執行代碼
    // }while(條件)
    var j=0;
    do{
        console.log(j);
        j++;
    }while(j<10)
    // 在瀏覽器控制檯打印0 1 2 3 4 5 6 7 8 9

while循環和do…while循環區別在於while循環是先判斷後執行，而do…while循環是先執行後判斷。

for循環個while循環的區別

當循環的次數確定時，使用for循環和while循環差別不大，但是當循環次數不確定時，while方法使用起來更加方便，更加好理解。

關注我，學習前端不迷路！！！

視頻講解鏈接：https://www.bilibili.com/video/BV12z4y1R7eZ/