JavaScript中的重複處理
在本文中，我們將解釋JavaScript中的重複處理。
YouTube Video
JavaScript中的for語句
基本語法
1for (initialization; condition; update) {
2 // Code to repeat
3}for語句是JavaScript中用於進行迭代的語法。只要特定條件滿足，它就會重複執行指定的程式碼區塊。使用for語句可以高效地多次執行相同的過程。
- 初始化（
initialization）：在開始迴圈之前只執行一次的部分。初始化變數，例如迴圈計數器。 - 條件（
condition）：決定是否繼續迴圈的條件。若為true，迴圈繼續；若為false，迴圈結束。 - 更新（
update）：在每次迴圈結束時執行，用於更新迴圈計數器。
範例
1for (let i = 0; i < 5; i++) {
2 console.log(i);
3}在此情況下，i從0開始，只要i < 5為true，迴圈將繼續運行。i++ 在每次回圈迭代時將 i 增加 1。因此，會顯示出從0到4的數字。
迴圈計數器的範圍
在for語句的初始化部分聲明或初始化變數。在此聲明的變數僅在迴圈內有效。
1for (let i = 0; i < 3; i++) {
2 console.log(i); // Outputs 0, 1, 2
3}
4console.log(i); // ReferenceError
- 如本例所示，在
for語句之外引用變數將導致錯誤。
無限迴圈
設定一個不會結束迴圈的條件將導致無限迴圈。這可能會對瀏覽器或系統造成負擔，因此需要加以注意。
1for (;;) {
2 console.log("Infinite loop");
3 break; // Exits the infinite loop with break
4}陣列與for語句
常見的是將for語句與陣列結合使用。方便處理數組的每個元素。
範例
1let fruits = ["apple", "banana", "cherry"];
2
3for (let i = 0; i < fruits.length; i++) {
4 console.log(fruits[i]);
5}
6// Outputs "apple", "banana", "cherry"
這樣，您可以使用索引來處理數組的每個元素。
其他迴圈結構
for...of 語句
for...of 語句用於可迭代的對象，例如數組和字符串。
1let fruits = ["apple", "banana", "cherry"];
2
3for (let fruit of fruits) {
4 console.log(fruit);
5}
6// Outputs "apple", "banana", "cherry"
這樣您可以不使用索引來處理每個元素。
for...in 語句
for...in 語句用於迭代對象的屬性。
1let person = { name: "John", age: 30, city: "Tokyo" };
2
3for (let key in person) {
4 console.log(key + ": " + person[key]);
5}
6// Outputs "name: John", "age: 30", "city: Tokyo"
通過這種方式，您可以使用鍵對每個元素執行操作。
總結
for語句是一種包含三部分的迴圈結構：初始化、條件和更新。- 您可以使用
break或continue來控制迴圈的行為。 - 結合數組或對象時，元素或屬性可以被高效處理。
JavaScript 中的 while 語句
基本語法
1while (condition) {
2 // Code that repeats while the condition is true
3}JavaScript 中的 while 語句是一種迴圈結構，只要指定條件為 true 就會執行重複操作。與 for 語句類似，while 語句僅指定條件。
- 條件：編寫決定是否繼續迴圈的條件表達式。當條件為
true時，迴圈繼續；當條件變為false時，迴圈結束。
範例
1let i = 0;
2
3while (i < 5) {
4 console.log(i);
5 i++;
6}
7console.log(i); // 5
在這個示例中，迴圈從變量 i 為 0 開始，只要 i < 5 為 true，迴圈就會執行。在每次迴圈中，i 增加 1，當 i 變為 5 時，條件變為 false，迴圈結束。因此，while 語句會顯示從 0 到 4 的結果。
與 for 語句不同，在 while 語句中，變量的初始化和更新是作為單獨的語句撰寫的。在 while 語句結束後，您還可以引用該變量。在這種情況下，while 語句結束後會顯示 5。
無限迴圈
如果條件始終為 true，則會產生無限迴圈，且不會結束。應避免無限迴圈，但在有意使用時，可以用 break 語句終止迴圈。
範例
1while (true) {
2 console.log("Infinite loop");
3 break; // Ends the loop with `break`
4}使用 while 迴圈處理陣列
也可以使用 while 語句來處理陣列。
範例
1let fruits = ["apple", "banana", "cherry"];
2let i = 0;
3
4while (i < fruits.length) {
5 console.log(fruits[i]);
6 i++;
7}
8// Outputs "apple", "banana", "cherry"
do...while 語句
基本語法
1do {
2 // Code that is executed at least once
3} while (condition);do...while 語句是 while 語句的變體，在至少執行一次迴圈之後才檢查條件。與 while 語句先檢查條件不同，do...while 語句會先執行一次過程再檢查條件。
範例
1let i = 0;
2
3do {
4 console.log(i);
5 i++;
6} while (i < 5);在此範例中，i 從 0 顯示到 4。do...while 語句與 while 語句的不同之處在於，即使條件為 false，也會執行一次。
總結
while語句用於在條件為true時重複執行程式碼。- 需注意避免無限迴圈，但可以使用
break和continue來控制迴圈流程。 - 當您希望至少執行一次迴圈時，
do...while語句會很有用。
break 和 continue
您可以在迴圈內使用 break 和 continue。
break用於提前終止迴圈。continue跳過當前的迴圈執行並直接進入下一次迴圈。
break 的範例
1for (let i = 0; i < 10; i++) {
2 if (i === 5) {
3 break; // Exits the loop when i is 5
4 }
5 console.log(i);
6}
7// Outputs 0, 1, 2, 3, 4
8
9let i = 0;
10
11while (i < 10) {
12 if (i === 5) {
13 break; // Ends the loop when i is 5
14 }
15 console.log(i++);
16}
17// Outputs 0, 1, 2, 3, 4
在此情況下，當 i 等於 5 時執行 break。因此，會顯示出從0到4的數字。
continue 的範例
1for (let i = 0; i < 5; i++) {
2 if (i === 2) {
3 continue; // Skips when i is 2
4 }
5 console.log(i);
6}
7// Outputs 0, 1, 3, 4
8
9let i = 0;
10while (i < 5) {
11 if (i === 2) {
12 i++;
13 continue; // Skips when i is 2
14 }
15 console.log(i);
16 i++;
17}
18// Outputs 0, 1, 3, 4
在此情況下，當 i 等於 2 時執行 continue。因此，會顯示除了 2 以外的數字。
JavaScript 中的巢狀迴圈
在 JavaScript 程式設計中，巢狀迴圈 是指一個迴圈存在於另一個迴圈內的結構。當某些特定的演算法或流程涉及多維度或多層時，這種迴圈非常有效。例如，處理包含多重陣列的多維陣列是一個典型的案例。
在此，我們將解釋巢狀迴圈的基本結構、使用範例、注意事項以及優化考量。
巢狀迴圈的基本結構
巢狀迴圈的基本結構是將一個或多個迴圈包含在另一個迴圈中的形式。每當外層迴圈執行一次，內層迴圈就會執行相應的次數。
以下是兩個巢狀迴圈的基本範例。
1for (let i = 0; i < 3; i++) {
2 console.log(`Outer loop iteration: ${i}`);
3
4 for (let j = 0; j < 2; j++) {
5 console.log(` Inner loop iteration: ${j}`);
6 }
7}
8// Output:
9// Outer loop iteration: 0
10// Inner loop iteration: 0
11// Inner loop iteration: 1
12// Outer loop iteration: 1
13// Inner loop iteration: 0
14// Inner loop iteration: 1
15// Outer loop iteration: 2
16// Inner loop iteration: 0
17// Inner loop iteration: 1
在上述程式碼中，i 在外層迴圈中計數，j 在內層迴圈中計數。每當外層迴圈執行一次，內層迴圈會執行兩次。
巢狀迴圈的實用範例
巢狀迴圈在處理 多維陣列 時特別有用。例如，處理二維陣列時，需要處理行（外層迴圈）和列（內層迴圈）。
在以下範例中，我們處理了一個二維陣列並列印其每個元素。
1const matrix = [
2 [1, 2, 3],
3 [4, 5, 6],
4 [7, 8, 9]
5];
6
7for (let row = 0; row < matrix.length; row++) {
8 for (let col = 0; col < matrix[row].length; col++) {
9 console.log(`Element at [${row}][${col}] is: ${matrix[row][col]}`);
10 }
11}
12// Output:
13// Element at [0][0] is: 1
14// Element at [0][1] is: 2
15// Element at [0][2] is: 3
16// Element at [1][0] is: 4
17// Element at [1][1] is: 5
18// Element at [1][2] is: 6
19// Element at [2][0] is: 7
20// Element at [2][1] is: 8
21// Element at [2][2] is: 9
通過這種方式，使用巢狀迴圈可以存取二維陣列的每一個元素。
注意事項
使用巢狀迴圈時有一些需要注意的事項。
-
效能問題
隨著巢狀迴圈的層數加深，執行時間會急劇增加。例如，如果外層迴圈執行100次，內層迴圈也執行100次，則總共執行了10,000次操作。因此，如果迴圈迭代次數很多，應考慮通過迴圈最佳化來提高效率。
-
複雜演算法的應用
巢狀迴圈非常強大，但隨著處理過程變得複雜，程式碼可能會變得難以理解。因此，為了維持程式碼的可讀性，使用適當的註解和函式來組織處理流程非常重要。
最佳化考量
在使用巢狀迴圈時，可以考慮以下最佳化方法。
-
提前結束迴圈
如果在迴圈內條件滿足，可使用
break語句退出迴圈。這可以避免不必要的迴圈並提高效能。
1for (let i = 0; i < 5; i++) {
2 for (let j = 0; j < 5; j++) {
3 if (i + j > 5) {
4 break;
5 }
6 console.log(`i: ${i}, j: ${j}`);
7 }
8}-
將計算移到迴圈外
與其每次在迴圈內執行相同的計算，不如在迴圈外執行一次計算並使用結果來提高處理效率。
1let array = [1, 2, 3, 4, 5];
2
3// Inefficient example (calculating every time)
4for (let i = 0; i < array.length; i++) {
5 for (let j = 0; j < array.length; j++) {
6 let sum = array[i] + array[j];
7 console.log(sum);
8 }
9}
10
11// Efficient example (calculating outside)
12let arrayLength = array.length;
13for (let i = 0; i < arrayLength; i++) {
14 for (let j = 0; j < arrayLength; j++) {
15 let sum = array[i] + array[j];
16 console.log(sum);
17 }
18}總結
巢狀迴圈在處理 JavaScript 中的複雜數據結構和算法時非常有用。但是，如果使用不當，可能會導致性能下降和代碼可讀性降低。為了有效使用巢狀迴圈，重要的是要努力進行迴圈優化和代碼組織，並根據情況採取適當的方法。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。