avaScript 循環

編寫程序是為了讓我們更高效的處理問題，但在生活中我們常常遇到一些重復性的動作，也就是當我們希望一遍又一遍的執行多次代碼，但是每一次執行代碼的值有不同的時候我們就可以使用循環語句來解決問題。

不同類型的循環

JavaScript支持不同類型的循環:

• for —— 循環代碼塊—定的次數
• forlin —— 循環遍歷對象的屬性
• while —— 當指定的條件為true 時循環指定的代碼塊
• do…while —— 同樣當指定的條件為true 時循環指定的代碼塊

循環：具備的四個條件

1. 初始值條件
2. 循環條件
3. 迭代條件
4. 循環體

While循環

do...while語句可以在某個條件表達式為真的前提下，循環執行指定的一段代碼，直到那個表達式不為真時結束循環。
語法:

while(條件){
    需要執行的代碼
}  


    

        1
    

    

        2
    

    

        3
    

比如:

//打印0~3
let n = 0;

while (n < 3) {
  n++;
}  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

do…While循環

do...while語句創建一個執行指定語句的循環，直到condition值為 false。在執行statement 后檢測condition，所以指定的statement至少執行一次，理論上,所有的while循環都可以使用doWhile

語法:

//初始化條件
var index = 0;
do{
    //遞歸條件
    index++;
    //循環體;
}while(條件);//同樣的這個條件是一個Boolean  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

比如:

//列出1~10之間的所有奇數
var index = 0;
do{
    index++;
    if(index % 2 == 1){
        console.log(index);
    }
}while(index<10);  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

• dowhile與while的區別:
  • while循環先是判斷條件,再執行循環體
  • dowhile循 1 環先循環一次 2 再判斷條件 3 再執行循環體 4.重復2,3

比如:

var a = 10;
//while循環
while(a<4){
    console.log("執行while循環");
}
//dowhile循環
do{
    console.log("這是doWhile循環");
}while(a<4)  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

for循環

for 語句用于創建一個循環，它包含了三個可選的表達式，這三個表達式被包圍在圓括號之中，使用分號分隔，后跟一個用于在循環中執行的語句（通常是一個塊語句）。

語法:

for(初始條件;循環條件;迭代條件){
    //循環體
}  


    

        1
    

    

        2
    

    

        3
    

比如:

for(var i = 0 ; i < 10 ; i++){
    console.log("輸出第"+i+"次循環");
}  


    

        1
    

    

        2
    

    

        3
    

上面的執行順序如下：

1. 先執行出初始化的條件i= 0;
2. 執行循環條件i< 10
3. 執行循環體
4. 走自增i++
5. 執行繼續判斷第2步,依此類推

for/in循環

for...in語句以任意順序迭代一個對象的除Symbol以外的可枚舉屬性，包括繼承的可枚舉屬性。
語法:

var 對象名 = {}
for(屬性名 in 對象名){
    //循環體
}  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

比如:

var info={name:"xiaoming",sex:"man",age:18}; 
for (x in info){
    txt=txt + person[x];
}  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

for/of循環

for...of語句在可迭代對象（包括 Array，Map，Set，String，TypedArray，arguments對象等等）上創建一個迭代循環，調用自定義迭代鉤子，并為每個不同屬性的值執行語句
語法:

 for (屬性名 of 對象名) {
    //statements
}  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

比如:

var arr = ['nick','freddy','mike','james'];
for(var item of arr){   
    console.log(item);
}  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

拓展

• 拓展1 數組的長度 數組的名字.length
• 拓展2 數組的元素當中 可以是不同的數據類型

來源：csdn

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司