在講循環的之前，先知道一下循環結構的執行步驟
1、聲明循環變量；
2、判斷循環條件;
3、執行循環體操作；
4、更新循環變量；
5、然后循環執行2-4，直到條件不成立，跳出循環。
1、while循環
var num = 1;//1、聲明循環變量
while (num<=10){//2、判斷循環條件;
document.write(num+"<br />");//3、執行循環體操作；
num++;//4、更新循環變量；
}
while循環()中的表達式，運算結果可以是各種類型，但是最終都會轉為真假，轉換規則如下。
①Boolean：true為真，false為假；
②String：空字符串為假，所有非空字符串為真；
③Number：0為假，一切非0數字為真；
④null/Undefined/NaN:全為假；
⑤Object：全為真。
2、do-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
3、for循環
for循環
1、for有三個表達式：①聲明循環變量；②判斷循環條件；③更新循環變量；
三個表達式之間，用;分割，for循環三個表達式都可以省略，但是兩個“;”缺一不可。
2、for循環的執行特點：先判斷再執行，與while相同
3、for循環三個表達式都可以有多部分組成，第二部分多個判斷條件用&& ||連接，第一三部分用逗號分割；
for (var num =1; num<=10; num++) {
document.write(num+" <br />"); //1 2 3 4 5 6 7 8 9 10
}
4、for-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])
}
5、for-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、循環控制語句
1、break：跳出本層循環，繼續執行循環后面的語句。
如果循環有多層，則break只能跳出一層。
2、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