小白必看！JS中循環語句大集合

摘要：JavaScript中，一共給開發者提供了一下幾種循環語句，分別是while循環，do…while循環，for循環，for Each，for…in循環和for…of循環。javascript

本文分享自華爲雲社區《JS中循環語句大集合丨【WEB前端大做戰】》，原文做者：hwJw19 。前端

JavaScript中，一共給開發者提供了一下幾種循環語句，分別是while循環，do…while循環，for循環，for Each，for…in循環和for…of循環。java

下面咱們就經過本文來仔細分辨一下，各個循環的使用差別。數組

while循環

語法：數據結構

while (expr){

       statement

}

expr爲條件表達式，當expr爲真時，執行statement語句，執行結束後，再次進入下一輪循環，直到條件表達式爲假時，跳出循環。this

代碼示例：url

var n = 1;  //聲明並初始化循環變量
while(n <= 100){  //循環條件
    n++;  //遞增循環變量
    if (n % 2 == 0) document.write(n + "");   //執行循環操做
}

語法：spa

do{
	statement
} while(expr)

do…while循環與while循環很類似，區別在於，while循環是先判斷再執行，而do…while循環會先執行一次語句，而後再開始判斷循環。不論條件爲真或者是假，都會執行一次。.net

代碼示例：code

var text = "" var i = 0; 
do { 
text += "<br>數字爲 " + i; i++; 
} while (i < 5); 
document.getElementById("demo").innerHTML = text;

語法：

for (expr 1; expr 2; expr 3)
{
    statement 
}

for循環想必也是你們比較熟悉的一種循環方式了，for循環主要用戶循環執行必定次數的代碼塊，小括號中，是for循環的條件，花括號中，是循環條件爲true時所須要執行的語句。缺點是寫法比較麻煩。

示例代碼：

for (var i=0; i<5; i++) { 
x=x + "該數字爲 " + i + "<br>"; 
}

語法：

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 (var in object) {
statement 
}

for…in循環主要用於循環遍歷對象，能夠獲取對象的鍵名，可是for…in並不適合遍歷數組，主要有以下緣由：

代碼示例：

var person = {fname:"John", lname:"Doe", age:32}; 
 
var text = "";
var x;
for (x in person) {
    text += person[x] + " ";
}

語法：

for (variable of iterable) {
 //要執行的語句 
}

for...of循環，是能夠遍歷全部數據結構的統一的方法，它可使用的範圍包括數組、Set 和 Map 結構、某些相似數組的對象（好比arguments對象、DOM NodeList 對象）、後文的 Generator 對象，以及字符串。讀取的是遍歷對象的鍵值。for...of循環的優勢：

代碼示例：

const iterable = ['mini', 'mani', 'mo'];
 
for (const value of iterable) {
  console.log(value);
}

關於JS循環語法的相關內容，就簡單到這裏了，歡迎你們留言區溝通交流，批評指正。