在講循環(huán)的之前，先知道一下循環(huán)結(jié)構(gòu)的執(zhí)行步驟　
1、聲明循環(huán)變量；
2、判斷循環(huán)條件;
3、執(zhí)行循環(huán)體操作；
4、更新循環(huán)變量；
5、然后循環(huán)執(zhí)行2-4，直到條件不成立，跳出循環(huán)。

1.while循環(huán)

var num = 1;//1、聲明循環(huán)變量
while (num<=10){//2、判斷循環(huán)條件;
    document.write(num+"<br />");//3、執(zhí)行循環(huán)體操作；
    num++;//4、更新循環(huán)變量；
}

while循環(huán)()中的表達(dá)式，運(yùn)算結(jié)果可以是各種類(lèi)型，但是最終都會(huì)轉(zhuǎn)為真假，轉(zhuǎn)換規(guī)則如下。
　　①Boolean：true為真，false為假；
　?、赟tring：空字符串為假，所有非空字符串為真；
　?、跱umber：0為假，一切非0數(shù)字為真；
　?、躰ull/Undefined/NaN:全為假；
　?、軴bject：全為真。

2.do-while循環(huán)

while循環(huán)特點(diǎn)：先判斷后執(zhí)行；
do-while循環(huán)特點(diǎn)：先執(zhí)行再判斷，即使初始條件不成立，do-while循環(huán)至少執(zhí)行一次；

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

3.for循環(huán)

for循環(huán)
1、for有三個(gè)表達(dá)式：①聲明循環(huán)變量；②判斷循環(huán)條件；③更新循環(huán)變量；
三個(gè)表達(dá)式之間，用;分割，for循環(huán)三個(gè)表達(dá)式都可以省略，但是兩個(gè)“;”缺一不可。
2、for循環(huán)的執(zhí)行特點(diǎn)：先判斷再執(zhí)行，與while相同
3、for循環(huán)三個(gè)表達(dá)式都可以有多部分組成，第二部分多個(gè)判斷條件用&& ||連接，第一三部分用逗號(hào)分割；

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

4.for-in循環(huán)

for-in 循環(huán)主要用于遍歷對(duì)象
for()中的格式：for(keys in zhangsan){}
keys表示obj對(duì)象的每一個(gè)鍵值對(duì)的鍵！！所有循環(huán)中，需要使用obj[keys]來(lái)取到每一個(gè)值?。?！
for-in 循環(huán)，遍歷時(shí)不僅能讀取對(duì)象自身上面的成員屬性，也能延續(xù)原型鏈遍歷出對(duì)象的原型屬性
所以，可以使用hasOwnProperty判斷一個(gè)屬性是不是對(duì)象自身上的屬性。
obj.hasOwnProperty(keys)==true 表示這個(gè)屬性是對(duì)象的成員屬性，而不是原先屬性

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

5.for-of循環(huán)

ES6 借鑒 C++、Java、C# 和 Python 語(yǔ)言，引入了for...of循環(huán)，作為遍歷所有數(shù)據(jù)結(jié)構(gòu)的統(tǒng)一的方法。
一個(gè)數(shù)據(jù)結(jié)構(gòu)只要部署了Symbol.iterator屬性，就被視為具有iterator接口，就可以用for...of循環(huán)遍歷它的成員。也就是說(shuō)，for...of循環(huán)內(nèi)部調(diào)用的是數(shù)據(jù)結(jié)構(gòu)的Symbol.iterator方法。
for...of循環(huán)可以使用的范圍包括數(shù)組、Set 和 Map 結(jié)構(gòu)、某些類(lèi)似數(shù)組的對(duì)象（比如arguments對(duì)象、DOM NodeList 對(duì)象）、后文的 Generator 對(duì)象，以及字符串。

①數(shù)組

JavaScript 原有的for...in循環(huán)，只能獲得對(duì)象的鍵名，不能直接獲取鍵值。ES6 提供for...of循環(huán)，允許遍歷獲得鍵值。

   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循環(huán)讀取鍵名，for...of循環(huán)讀取鍵值。如果要通過(guò)for...of循環(huán)，獲取數(shù)組的索引，可以借助數(shù)組實(shí)例的entries方法和keys方法

②Set 和 Map 結(jié)構(gòu)

 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 結(jié)構(gòu)和 Map 結(jié)構(gòu)。值得注意的地方有兩個(gè)，首先，遍歷的順序是按照各個(gè)成員被添加進(jìn)數(shù)據(jù)結(jié)構(gòu)的順序。其次，Set 結(jié)構(gòu)遍歷時(shí)，返回的是一個(gè)值，而 Map 結(jié)構(gòu)遍歷時(shí)，返回的是一個(gè)數(shù)組，該數(shù)組的兩個(gè)成員分別為當(dāng)前 Map 成員的鍵名和鍵值。

③類(lèi)似數(shù)組的對(duì)象

類(lèi)似數(shù)組的對(duì)象包括好幾類(lèi)。下面是for...of循環(huán)用于字符串、DOM NodeList 對(duì)象、arguments對(duì)象的例子。

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

與其他遍歷語(yǔ)法的比較
for...in循環(huán)有幾個(gè)缺點(diǎn)
①數(shù)組的鍵名是數(shù)字，但是for...in循環(huán)是以字符串作為鍵名“0”、“1”、“2”等等。
②for...in循環(huán)不僅遍歷數(shù)字鍵名，還會(huì)遍歷手動(dòng)添加的其他鍵，甚至包括原型鏈上的鍵。
③某些情況下，for...in循環(huán)會(huì)以任意順序遍歷鍵名。
for...in循環(huán)主要是為遍歷對(duì)象而設(shè)計(jì)的，不適用于遍歷數(shù)組。
for...of循環(huán)
有著同for...in一樣的簡(jiǎn)潔語(yǔ)法，但是沒(méi)有for...in那些缺點(diǎn)。
不同于forEach方法，它可以與break、continue和return配合使用。
提供了遍歷所有數(shù)據(jù)結(jié)構(gòu)的統(tǒng)一操作接口。

6.循環(huán)控制語(yǔ)句

1、break：跳出本層循環(huán)，繼續(xù)執(zhí)行循環(huán)后面的語(yǔ)句。
如果循環(huán)有多層，則break只能跳出一層。
2、continue：跳過(guò)本次循環(huán)剩余的代碼，繼續(xù)執(zhí)行下一次循環(huán)。
①對(duì)與for循環(huán)，continue之后執(zhí)行的語(yǔ)句，是循環(huán)變量更新語(yǔ)句i++；
②對(duì)于while、do-while循環(huán)，continue之后執(zhí)行的語(yǔ)句，是循環(huán)條件判斷；
因此，使用這兩個(gè)循環(huán)時(shí)，必須將continue放到i++之后使用，否則，continue將跳過(guò)i++進(jìn)入死循環(huán)。

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
    }