JS中for循環的多種寫法

JS是一種字元型腳本語言，常見於網頁和node.js這類技術中。for循環是JS中最常用的循環語句之一，它可以讓程序代碼在滿足一定條件下重複執行某個代碼塊。本文將介紹for循環的多種寫法，和這些寫法的應用場景，希望能給讀者提供一些有幫助的知識。

一、基本寫法

1、for循環的語法

for循環的語法如下：

for (初始值; 終止條件; 每次循環執行的語句) {
  需要重複執行的代碼塊
}

其中，初始值是指起始條件，終止條件是指終止循環的條件，每次循環執行的語句是指在每次循環結束後需要執行的語句。需要執行的代碼塊則是需要重複執行的代碼。

2、代碼示例

代碼示例：

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

輸出結果為：

0
1
2
3
4
5
6
7
8
9

3、應用場景

基本寫法的for循環適用於大部分循環場景。在循環中可以通過初始值、終止條件和每次循環執行的語句完全控制循環的邏輯和重複執行的代碼。

二、倒序循環

1、倒序循環的語法

要實現倒序循環，需要將初始值設為比較大的數，終止條件設為比較小的數，每次循環執行的語句需要將計數器減 1。代碼示例如下：

for (let i = 10; i > 0; i--) {
  console.log(i);
}

輸出結果為：

10
9
8
7
6
5
4
3
2
1

2、代碼示例

代碼示例：

for (let i = 10; i > 0; i--) {
  console.log(i);
}

輸出結果為：

10
9
8
7
6
5
4
3
2
1

3、應用場景

倒序循環適用於需要從大到小循環遍歷的場景，比如尋找數組中的最大值，或者數組逆序遍歷等。

三、遍曆數組

1、遍曆數組的語法

JS中的數組可以通過for循環進行遍歷。數組的長度可以通過數組的length屬性獲取。

let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

輸出結果為：

1
2
3
4
5

2、代碼示例

代碼示例：

let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

輸出結果為：

1
2
3
4
5

3、應用場景

遍曆數組適用於遍曆數組的場景，比如統計數組中的元素個數、計算數組的總和、查找數組中的某個元素等。

四、遍歷對象

1、遍歷對象的語法

JS中的對象可以通過for-in循環進行遍歷。for-in循環會遍歷對象的所有屬性。

let obj = {name: 'John', age: 25};
for (let key in obj) {
  console.log(key + ': ' + obj[key]);
}

輸出結果為：

name: John
age: 25

2、代碼示例

代碼示例：

let obj = {name: 'John', age: 25};
for (let key in obj) {
  console.log(key + ': ' + obj[key]);
}

輸出結果為：

name: John
age: 25

3、應用場景

遍歷對象適用於遍歷對象的場景，比如統計對象中屬性的個數、篩選符合條件的屬性等。

五、嵌套循環

1、嵌套循環的語法

JS中的for循環可以嵌套使用，實現多重循環的效果。嵌套循環的語法如下：

for (let i = 0; i < 5; i++) {
  for (let j = 0; j < 3; j++) {
    console.log(i, j);
  }
}

輸出結果為：

0 0
0 1
0 2
1 0
1 1
1 2
2 0
2 1
2 2
3 0
3 1
3 2
4 0
4 1
4 2

2、代碼示例

代碼示例：

for (let i = 0; i < 5; i++) {
  for (let j = 0; j < 3; j++) {
    console.log(i, j);
  }
}

輸出結果為：

0 0
0 1
0 2
1 0
1 1
1 2
2 0
2 1
2 2
3 0
3 1
3 2
4 0
4 1
4 2

3、應用場景

嵌套循環適用於多維數據結構的遍歷場景，比如遍歷矩陣、地圖等。

六、for-of循環

1、for-of循環的語法

JS中的for-of循環是ES6中新增的循環結構。for-of循環可以遍曆數組和類數組對象（比如字元串、Set對象、Map對象等）。

let arr = [1, 2, 3, 4, 5];
for (let value of arr) {
  console.log(value);
}

輸出結果為：

1
2
3
4
5

2、代碼示例

代碼示例：

let arr = [1, 2, 3, 4, 5];
for (let value of arr) {
  console.log(value);
}

輸出結果為：

1
2
3
4
5

3、應用場景

for-of循環適用於遍曆數組和類數組對象的場景，比如遍歷字元串、遍歷Set對象等。

七、for-await循環

1、for-await循環的語法

JS中的for-await循環是ES8中新增的循環結構。for-await循環可以遍歷非同步迭代器。

async function asyncFunc() {
  let arr = [1, 2, 3, 4, 5];
  for await (let value of arr) {
    console.log(value);
  }
}

輸出結果為：

1
2
3
4
5

2、代碼示例

代碼示例：

async function asyncFunc() {
  let arr = [1, 2, 3, 4, 5];
  for await (let value of arr) {
    console.log(value);
  }
}

輸出結果為：

1
2
3
4
5

3、應用場景

for-await循環適用於遍歷非同步迭代器的場景，比如遍歷stream等非同步數據源。

八、總結

本文介紹了JS中for循環的多種寫法，並且對這些寫法的應用場景做了詳細的解釋。使用這些寫法可以更加靈活地處理各種不同的循環場景，提高程序的執行效率。