JS for循環的多方面詳解

JS for循環是JS語言中非常重要的循環語句之一。它允許我們對一個代碼塊進行多次不斷的執行。下面從多個方面對JS for循環進行詳細的闡述，以此加深讀者對該語言的理解和應用。

一、JS for循環案例

首先，我們來看一段JS for循環的經典案例：

for (let i = 0; i < 10; i++) {
  console.log(i);
}

上述代碼的意思是定義了一個從0開始，每次增加1，直到小於10的變量i。在循環過程中，我們可以通過console.log(i)語句來打印出i的值。這段代碼的執行結果如下：

可以看到，JS for循環可以非常方便地對多個代碼塊進行多次執行，極大地方便了開發。

二、JS中for循環

JS中的for循環包含三個重要的部分：循環起始語句，循環終止判斷語句和循環增量表達式。下面是一個完整的for循環語句：

for (循環起始語句; 循環終止判斷語句; 循環增量表達式) {
  循環代碼塊
}

其中，循環起始語句是在循環開始前僅執行一次的代碼，通常用來定義變量；循環終止判斷語句用來判斷循環是否應該繼續執行，如果為false，則循環語句終止。循環增量表達式則是在每次循環執行後被執行的代碼表達式。

三、JS for循環不停

在JS中，我們可以使用break語句來退出for循環語句，也可以使用continue語句來跳過循環的當前迭代。下面是一個用來控制for循環停止的案例：

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  }
  
  console.log(i);
}

在上述代碼中，我們使用if語句來判斷i的值是否等於5，如果等於5，則通過break語句來退出for循環。因此，當i等於5時，for循環不會繼續執行。

另外一個常用的語句是continue語句。使用continue語句可以讓我們跳過循環內的某一次迭代。下面是一個展示如何使用continue語句的例子：

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    continue;
  }
  
  console.log(i);
}

在上述代碼中，我們使用if語句來判斷i的值是否等於5，如果等於5，則通過continue語句來跳過這次的循環迭代。因此，當i等於5時，這次的for循環不會執行console.log(i)語句。

四、JS for循環語句

JS for循環語句可以被用來循環一個對象、一個數組中的每一個元素，同時還可以改變數組中的每一個元素、刪除數組中的某一個元素等。下面是一個JS for循環語句的例子：

let arr = [1, 2, 3, 4, 5];

for (let i = 0; i < arr.length; i++) {
  arr[i] = arr[i] + 1;
}

console.log(arr);

在上述代碼中，我們首先定義了一個數組arr，並且用for循環來循環數組中的每一個元素，並將其加1。最終，我們通過console.log(arr)語句來輸出數組arr的所有值。該代碼執行結果如下：

[2, 3, 4, 5, 6]

五、JS for循環輸出問題

如果我們在循環過程中使用了console.log()語句打印輸出，那麼我們很有可能發現輸出的值並不符合預期。例如，我們可以使用下面這個JS for循環來輸出數字1到5：

for (let i = 1; i <= 5; i++) {
  setTimeout(() => {
    console.log(i);
  }, 0);
}

然而，上面的代碼執行的結果並不是1到5，而是5個數字5。這是因為JS中的setTimeout是在一個新的執行棧中運行的，所以循環中的console.log(i)語句會在循環結束後才會執行，此時i已經變成了5。

為了解決這個問題，我們可以使用let關鍵字來聲明i變量。下面是一個改進後的版本：

for (let i = 1; i <= 5; i++) {
  setTimeout(() => {
    console.log(i);
  }, 0);
}

在這個代碼片段中，我們將let關鍵字用來聲明i變量，這樣每次循環時都會創建一個新的變量實例，從而解決了前面的問題。

六、JS for循環99乘法表代碼

JS for循環在處理數組、對象等方面非常實用，同時也可以用來輸出常見的乘法表。下面是一個JS for循環輸出99乘法表的完整代碼示例：

for (let i = 1; i <= 9; i++) {
  let row = "";
  for (let j = 1; j <= i; j++) {
    row += j + "x" + i + "=" + (i * j) + "";
  }
  console.log(row);
}

在這個代碼片段中，我們使用for循環語句來輸出99乘法表，首先遍歷1到9的每一個數字，然後在內部使用另一個for循環來輸出乘法表的每一行。最終，我們通過console.log(row)語句來輸出整個乘法表。運行上述代碼後，可以得到如下輸出結果：

1x1=1
1x2=22x2=4
1x3=32x3=63x3=9
1x4=42x4=83x4=124x4=16
1x5=52x5=103x5=154x5=205x5=25
1x6=62x6=123x6=184x6=245x6=306x6=36
1x7=72x7=143x7=214x7=285x7=356x7=427x7=49
1x8=82x8=163x8=244x8=325x8=406x8=487x8=568x8=64
1x9=92x9=183x9=274x9=365x9=456x9=547x9=638x9=729x9=81

七、JS forEach循環遍曆數組

除了使用for循環語句來循環數組外，我們還可以使用JS中的forEach方法來遍曆數組。下面是一個使用JS forEach循環遍曆數組的例子：

let arr = [1, 2, 3, 4, 5];

arr.forEach(num => {
  console.log(num);
});

在上述代碼中，我們首先定義了一個數組arr，然後在forEach方法內部傳遞了一個匿名函數。這個函數接受數組中的每個元素作為參數，並執行console.log(num)語句來輸出數組中的每個元素。最終，我們可以在控制台中看到數組中的每個元素被輸出：

八、總結

JS for循環是JS語言中最常用的循環語句之一，可以幫助我們對多個代碼塊進行多次循環執行，同時還可以處理數組、對象等。在使用JS for循環時，需要注意使用break、continue等語句來進行控制，以及使用let關鍵字來避免出現變量共享的問題。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/180011.html