JS中的循環---最全的循環總結

　在講循環的以前，先知道一下循環結構的執行步驟　

　　一、聲明循環變量；
　　二、判斷循環條件;
　　三、執行循環體操做；
　　四、更新循環變量；
　　五、而後循環執行2-4，直到條件不成立，跳出循環。

 

 

1while循環

var num = 1;//一、聲明循環變量 while (num<=10){//二、判斷循環條件;
    document.write(num+"<br />");//三、執行循環體操做；
    num++;//四、更新循環變量；
}

  while循環()中的表達式，運算結果能夠是各類類型，可是最終都會轉爲真假，轉換規則以下。

　　①Boolean：true爲真，false爲假；
　　②String：空字符串爲假，全部非空字符串爲真；
　　③Number：0爲假，一切非0數字爲真；
　　④null/Undefined/NaN:全爲假；
　　⑤Object：全爲真。

 

2do-while循環

　　while循環特色：先判斷後執行；
　　do-while循環特色：先執行再判斷，即便初始條件不成立，do-while循環至少執行一次；

 

var num = 10;
            
do{
    document.write(num+"<br />");//10 9 8 7 6 5 4 3 2 1 0
    num--;
    }while(num>=0);
            
document.write(num);//-1

 

3for循環　

　for循環
　　一、for有三個表達式：①聲明循環變量；②判斷循環條件；③更新循環變量；
　　　　三個表達式之間，用;分割，for循環三個表達式均可以省略，可是兩個「;」缺一不可。
　　二、for循環的執行特色：先判斷再執行，與while相同
　　三、for循環三個表達式均可以有多部分組成，第二部分多個判斷條件用&& ||鏈接，第一三部分用逗號分割；

for (var num =1; num<=10; num++) {
    document.write(num+" <br />"); //1 2 3 4 5 6 7 8 9 10 
}

 

4for-in循環　

　for-in 循環主要用於遍歷對象
　　for()中的格式：for(keys in zhangsan){}
　　keys表示obj對象的每個鍵值對的鍵！！全部循環中，須要使用obj[keys]來取到每個值！！！

　　for-in 循環，遍歷時不只能讀取對象自身上面的成員屬性，也能延續原型鏈遍歷出對象的原型屬性
　　因此，可使用hasOwnProperty判斷一個屬性是否是對象自身上的屬性。
　　obj.hasOwnProperty(keys)==true 表示這個屬性是對象的成員屬性，而不是原先屬性

//聲明一個Peson類
function Person(){
    this.name = "張三";
    this.age = 14;
    this.func1 = function(){
        
    }
}
//實例化這個類
var zhangsan = new Person();
//使用for-in遍歷這個對象
for(keys in zhangsan){
    console.log(zhangsan[keys])
}

 

 

 

5for-of循環　

　　ES6 借鑑 C++、Java、C# 和 Python 語言，引入了for...of循環，做爲遍歷全部數據結構的統一的方法。

　　一個數據結構只要部署了Symbol.iterator屬性，就被視爲具備iterator接口，就能夠用for...of循環遍歷它的成員。也就是說，for...of循環內部調用的是數據結構的Symbol.iterator方法。
　　for...of循環可使用的範圍包括數組、Set 和 Map 結構、某些相似數組的對象（好比arguments對象、DOM NodeList 對象）、後文的 Generator 對象，以及字符串。

 

 下面是一些數據結構的遍歷

①數組

 JavaScript 原有的for...in循環，只能得到對象的鍵名，不能直接獲取鍵值。ES6 提供for...of循環，容許遍歷得到鍵值。

 

        var arr = ['a', 'b', 'c', 'd'];

        for (let a in arr) {
          console.log(a); // 0 1 2 3
        }
        
        for (let a of arr) {
          console.log(a); // a b c d
        }

 

 上面代碼代表，for...in循環讀取鍵名，for...of循環讀取鍵值。若是要經過for...of循環，獲取數組的索引，能夠藉助數組實例的entries方法和keys方法

 

②Set 和 Map 結構

        var engines = new Set(["Gecko", "Trident", "Webkit", "Webkit"]);
        for (var e of engines) {
          console.log(e);
        }
        // Gecko  Trident    Webkit
        
        var es6 = new Map();
        es6.set("edition", 6);
        es6.set("committee", "TC39");
        es6.set("standard", "ECMA-262");
        for (var [name, value] of es6) {
          console.log(name + ": " + value);
        }
        // edition: 6
        // committee: TC39
        // standard: ECMA-262

 

 上面代碼演示瞭如何遍歷 Set 結構和 Map 結構。值得注意的地方有兩個，首先，遍歷的順序是按照各個成員被添加進數據結構的順序。其次，Set 結構遍歷時，返回的是一個值，而 Map 結構遍歷時，返回的是一個數組，該數組的兩個成員分別爲當前 Map 成員的鍵名和鍵值。

 

③相似數組的對象

 相似數組的對象包括好幾類。下面是for...of循環用於字符串、DOM NodeList 對象、arguments對象的例子。

        // 字符串
        var str = "hello";
        
        for (let s of str) {
          console.log(s); // h e l l o
        }
        
        // DOM NodeList對象
        let paras = document.querySelectorAll("p");
        
        for (let p of paras) {
          p.classList.add("test");
        }
        
        // arguments對象
        function printArgs() {
          for (let x of arguments) {
            console.log(x);
          }
        }
        printArgs('a', 'b');// 'a' 'b'

 

　　與其餘遍歷語法的比較
for...in循環有幾個缺點
　　①數組的鍵名是數字，可是for...in循環是以字符串做爲鍵名「0」、「1」、「2」等等。
　　②for...in循環不只遍歷數字鍵名，還會遍歷手動添加的其餘鍵，甚至包括原型鏈上的鍵。
　　③某些狀況下，for...in循環會以任意順序遍歷鍵名。
　　for...in循環主要是爲遍歷對象而設計的，不適用於遍歷數組。

for...of循環
　　有着同for...in同樣的簡潔語法，可是沒有for...in那些缺點。
　　不一樣於forEach方法，它能夠與break、continue和return配合使用。
　　提供了遍歷全部數據結構的統一操做接口。

 

6循環控制語句

　　一、break：跳出本層循環，繼續執行循環後面的語句。
　　　　若是循環有多層，則break只能跳出一層。
　　二、continue：跳過本次循環剩餘的代碼，繼續執行下一次循環。
　　　　①對與for循環，continue以後執行的語句，是循環變量更新語句i++；
　　　　②對於while、do-while循環，continue以後執行的語句，是循環條件判斷；
　　　　所以，使用這兩個循環時，必須將continue放到i++以後使用，不然，continue將跳過i++進入死循環。

 

for(var i = 1; i < 10; i++){
　　　　　
        if(i == 4){
            continue;
        }
        console.log(n);//1 2 3 5 6 7 8 9
    }

 for(var i = 1; i < 10; i++){
        if(i == 4){
            break;
        }
         console.log(i);//1 2 3
    }