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

　　1、聲明循環變量；
　　2、判斷循環條件;
　　3、執行循環體操作；
　　4、更新循環變量；
　　5、然後循環執行2-4，直到條件不成立，跳出循環。

while循環

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

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

　　①Boolean：true為真，false為假；

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

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

for循環

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

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

for-in循環

//聲明一個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])
}

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

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

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配合使用。
　　提供了遍歷所有數據結構的統一操作接口。

循環控制語句

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
    }

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

轉載自：https://www.cnblogs.com/baiyunke/p/7821299.html

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