摘要：JavaScript中，一共給開發者提供了一下幾種循環語句，分別是while循環，do…while循環，for循環，for Each，for…in循環和for…of循環。
本文分享自華為雲社區《JS中循環語句大集合丨【WEB前端大作戰】》，原文作者：hwJw19 。
JavaScript中，一共給開發者提供了一下幾種循環語句，分別是while循環，do…while循環，for循環，for Each，for…in循環和for…of循環。
下面我們就通過本文來仔細分辨一下，各個循環的使用差異。
while循環
語法：
while (expr){ statement }
expr為條件表達式，當expr為真時，執行statement語句，執行結束后，再次進入下一輪循環，直到條件表達式為假時，跳出循環。
代碼示例：
var n = 1; //聲明並初始化循環變量 while(n <= 100){ //循環條件 n++; //遞增循環變量 if (n % 2 == 0) document.write(n + ""); //執行循環操作 }
do…while循環
語法：
do{ statement } while(expr)
do…while循環與while循環很相似，區別在於，while循環是先判斷再執行，而do…while循環會先執行一次語句，然后再開始判斷循環。不論條件為真或者是假，都會執行一次。
代碼示例：
var text = "" var i = 0; do { text += "<br>數字為 " + i; i++; } while (i < 5); document.getElementById("demo").innerHTML = text;
for循環
語法：
for (expr 1; expr 2; expr 3) { statement }
for循環想必也是大家比較熟悉的一種循環方式了，for循環主要用戶循環執行一定次數的代碼塊，小括號中，是for循環的條件，花括號中，是循環條件為true時所需要執行的語句。缺點是寫法比較麻煩。
示例代碼：
for (var i=0; i<5; i++) { x=x + "該數字為 " + i + "<br>"; }
forEach循環
語法：
array.forEach(function(currentValue, index, arr), thisValue)
由於for循環的寫法比較繁瑣，因此數組提供了內置的forEach方法，語法中的參數currentValue是必填的，其他參數選填。forEach語句的問題在於，無法中途跳出forEach循環，break命令或return命令都不能奏效。
代碼示例：
var arr = [1, 2, 3, 4, 5]; arr.forEach(function (item) { console.log(item); });
for…in循環
語法：
for (var in object) { statement }
for…in循環主要用於循環遍歷對象，可以獲取對象的鍵名，但是for…in並不適合遍歷數組，主要有如下原因：
- 數組的鍵名是數字，但是..in循環是以字符串作為鍵名“0”、“1”、“2”等等。
- ..in循環不僅遍歷數字鍵名，還會遍歷手動添加的其他鍵，甚至包括原型鏈上的鍵。
- 某些情況下，..in循環會以任意順序遍歷鍵名。
代碼示例：
var person = {fname:"John", lname:"Doe", age:32}; var text = ""; var x; for (x in person) { text += person[x] + " "; }
for...of循環
語法：
for (variable of iterable) { //要執行的語句 }
for...of循環，是可以遍歷所有數據結構的統一的方法，它可以使用的范圍包括數組、Set 和 Map 結構、某些類似數組的對象（比如arguments對象、DOM NodeList 對象）、后文的 Generator 對象，以及字符串。讀取的是遍歷對象的鍵值。for...of循環的優點：
- 有着同for...in一樣的簡潔語法，但是沒有for...in那些缺點。
- 不同於forEach方法，它可以與break、continue和return配合使用。
- 提供了遍歷所有數據結構的統一操作接口。
代碼示例：
const iterable = ['mini', 'mani', 'mo']; for (const value of iterable) { console.log(value); }
關於JS循環語法的相關內容，就簡單到這里了，歡迎大家留言區溝通交流，批評指正。