譯：用於JavaScript中的循環和同時循環

英文原文：https://codetheweb.blog/2018/03/25/for-and-while-loops-javascript/

JavaScript中的循環是什麼？

循環只需屢次運行一段代碼。例如，看看下面的代碼：

alert('Hi!');

若是咱們想重複這五次，咱們能夠這樣作：

alert('Hi!');
alert('Hi!');
alert('Hi!');
alert('Hi!');
alert('Hi!');

然而，這是一個很是糟糕的編程，若是您須要重複大量的代碼數百次，這會變得很是笨拙。並且，它也不是頗有用。例如，若是但願它重複X次呢？這就是循環的用武之地。次數一般由變量決定，但也能夠由實際數字決定。循環對於對數組中的每一個元素（列表中的每一個項）都特別有用，但在許多狀況下都頗有用。

同時循環

等等，若是咱們先執行while循環，那麼標題爲何以「for」開頭？我真的不知道，只是這樣聽起來更好。

while循環會在特定的語句中一次又一次地重複代碼。true(即直到它是false)。下面是語法：

while ( /* something that's true or false */ ) {
    // Do some stuff
}

就這麼簡單！下面是一個例子，它不斷地從0-1直到一切結束0.2.

while(Math.random() > 0.2) {
    alert('hi');
}

但若是咱們想讓它報警呢？咱們不能寫alert(Math.random())由於那樣它就會發現新的隨機數警報。因此，咱們必須作一個變量，而後把它設爲每一個循環末尾的隨機數。而後它會比較這，這個數字，並將其存儲在一個變量中，這樣咱們能夠在之後通知它：

var randomNum = Math.random();

while(randomNum > 0.2) {
    alert(randomNum);
    randomNum = Math.random();
}

花點時間看看這段代碼。首先，咱們設置變量randomNum隨機數。而後咱們看看它是否大於0.2。若是是的話，咱們在花括號裏運行這些東西。這會提醒號碼，而後更改。randomNum換個新號碼。而後咱們檢查一下這，這個數大於0.2。若是是的話，咱們再次在花括號內運行這些內容，而後在…上繼續運行。

若是號碼是不大於0.2，括號中的內容沒有運行，程序繼續運行。它否則後繼續運行，直到數字大於0.2再來一次。

☢☢注意…避免無限循環！☢☢

無限循環是將永遠運行的循環。它們能夠在這兩個for循環中發生。和同時循環。如下是一個很是基本的例子-不要嘗試，除非你沒問題丟失你全部的標籤

while(true) {
    // some code
}

它將凍結頁面，甚至整個瀏覽器將取決於您的計算機。您一般沒法關閉選項卡，而且可能須要退出並從新打開整個瀏覽器！因此，老是要注意無限循環。它們可能並不老是像while(true)。可能會吧任何語句，該語句將始終計算爲true.

爲了幫助你們讓學習變得輕鬆、高效，給你們免費分享一大批資料，幫助你們在成爲全棧工程師，乃至架構師的路上披荊斬棘。在這裏給你們推薦一個前端全棧學習交流圈：866109386.歡迎你們進羣交流討論，學習交流，共同進步。

循環

假設你想提醒「嗨」五次。正如我前面所說，這是一種很是糟糕的作事方式：

alert('Hi!');
alert('Hi!');
alert('Hi!');
alert('Hi!');
alert('Hi!');

可是，咱們如何使用while循環來完成這個任務呢？咱們必須設置一個計數器變量，而後每次添加一個：

var counter = 1;

while(counter <= 5) {
    alert('Hi!');
    counter = counter + 1;
}

首先，讓咱們讓這段代碼遵循更好的編程約定。而不是使用counter變量，咱們應該給它命名i。這只是一個慣例，表明‘迭代’。你不用用i，但這樣作是個好主意。它將使您的代碼更容易與其餘開發人員的代碼集成，並使一切更加一致。

另外，咱們要啓動櫃檯1。在編程中，啓動計數器變量是一種慣例。0。好呀1？在大多數編程語言中，列陣(列表)是項目0，而不是項目1。考慮到循環一般與數組一塊兒使用，最好的編程約定是在0。雖然一開始它可能看起來很混亂，但隨着您學習JavaScript的進展，它將使您的代碼變得不那麼混亂。由於i如今少了一個，咱們會說counter < 5而不是counter <= 5.

最後，咱們增長了一條線i增長1。而不是說i = i + 1有更好的方法來作這件事！你能夠簡單地說i++;.

所以，如下是咱們的while循環在讓它遵循良好的編程約定(「最佳實踐」)以後的樣子：

var i = 0;

while(i < 5) {
    alert('Hi!');
    i++;
}

信不信由你，使用JavaScript有一種更快、更好、更容易作到這一點的方法！它是經過使用for循環來實現的：

for(var i = 0; i < 5; i++) {
    alert('Hi!');
}

讓咱們看看這段代碼。它很是相似於while循環，只不過全部不一樣的部分都被移動了。再一次，咱們用i做爲咱們的反變量。

因此首先，咱們要i到0。咱們沒有在循環以前這樣作，而是在for循環的括號內，就在開始時這樣作。

在分號以後，咱們有一個布爾型表達式(計算結果爲true或false)。這就像When循環中的部件，並以相同的方式操做！花括號中的內容將運行，而該語句等效於true(在這種狀況下，i < 5).

在第二個分號以後，括號中有最後一段代碼：i++。這只是咱們的最後一行在花括號內從When循環！簡而言之，第二個分號以後的代碼將在循環每次重複的末尾運行。

下面是for循環語法的總結，以便更容易理解：

for( /* Set your counter variable */ ; /* Repeat while this is true */ ; /* Run this at the end of each repetition */ ) {
    // Your code!
}

嘗試作一個for循環，提醒「Yay」三次。**不要用代碼重複五遍來幫助你！**看看你是否能夠僅僅使用語法代碼來幫助你

答案：

for(var i = 0; i < 3; i++) {
    alert('Yay');
}

另外，你也能夠用i 內你的代碼在花括號裏！雖然這對於迭代是很方便的陣列它能夠任意使用。例如，從0-4發出警報：

for(var i = 0; i < 5; i++) {
    alert(i);
}

注意，它是從0-4而不是1-5開始的，由於全部循環都應該從0開始！若是您想從1-5發出警報，我將執行如下操做：

for(var i = 0; i < 5; i++) {
    alert(i + 1);
}

結語

恭喜學習全部關於循環和同時循環！我知道，當我學習的時候，我發現for循環的概念特別使人困惑。記住括號裏的三個部分是至關困難的，而我最終獲得它的惟一方法就是經過練習。因此，嘗試使用for(和while)循環作一些不一樣的事情！這是最好的學習方法。