TypeScript - 迴圈：高效編程的入門

你好啊，未來的編程超級巨星！今天，我們將踏上一段令人興奮的旅程，探索TypeScript中的迴圈世界。作為你鄰居的友好電腦老師，我將帶領你穿梭這個冒險旅程，並提供大量的範例、解釋，甚至可能還有一兩個笑話。所以，請繫好安全帶，我們一起跳水吧！

TypeScript - Loops

了解迴圈：基礎知識

在我們深入細節之前，讓我們從一個簡單的問題開始：什麼是迴圈？想像一下，你被要求在黑板上寫下「我愛TypeScript」100次。聽起來很無聊，對吧？這就是迴圈派上用場的地方！它們讓我們能夠重複執行一組指令多次，而不需要重複寫入同樣的代碼。

在TypeScript中，我們有幾種類型的迴圈，但今天我們將聚焦於最常見的三種：for、while和do-while迴圈。

for 迴圈就像瑞士軍刀一樣 - 多功能且強大。這是它基本的結構：

for (初始化; 條件; 增加或減少) {
// 要執行的代碼
}

讓我們用一個範例來分解它：

for (let i = 0; i < 5; i++) {
console.log("迭代號碼： " + i);
}

在這段代碼中：

輸出將會是：

迭代號碼： 0
迭代號碼： 1
迭代號碼： 2
迭代號碼： 3
迭代號碼： 4

while 迴圈就像俱樂部的保鏢 - 它不斷檢查你是否滿足進入的條件。這是它的樣子：

while (條件) {
// 要執行的代碼
}

讓我們看看它是如何運作的：

let count = 0;
while (count < 5) {
console.log("計數是： " + count);
count++;
}

這將輸出：

計數是： 0
計數是： 1
計數是： 2
計數是： 3
計數是： 4

do-while 迴圈就像while 迴圈的樂觀表親。它在檢查條件之前至少執行一次代碼塊。這是它的結構：

do {
// 要執行的代碼
} while (條件);

讓我們看一個範例：

let num = 0;
do {
console.log("數字是： " + num);
num++;
} while (num < 5);

這將輸出：

數字是： 0
數字是： 1
數字是： 2
數字是： 3
數字是： 4

現在，想像你在一個自助餐。break 語句就像你大腦告訴你：「好了，夠了！」它讓我們在滿足特定條件時提前退出迴圈。

這是一個範例：

for (let i = 0; i < 10; i++) {
if (i === 5) {
break;
}
console.log("當前數字： " + i);
}

這將輸出：

當前數字： 0
當前數字： 1
當前數字： 2
當前數字： 3
當前數字： 4

當i變為5時，迴圈停止，即使它最初被設置為運行直到i小於10。

continue 語句就像在播放清單中跳過一首歌。它讓我們能夠跳過當前迭代中的剩餘代碼並移動到下一個迭代。

讓我們看看它是如何運作的：

for (let i = 0; i < 5; i++) {
if (i === 2) {
continue;
}
console.log("數字： " + i);
}

這將輸出：

數字： 0
數字： 1
數字： 3
數字： 4

注意2是如何被省略的？那是因為當i為2時，continue 語句跳過了那個迭代的剩餘部分。

無窮迴圈就像一首歌曲卡在重複播放 - 它永遠持續（或者直到你的電腦耗盡記憶體）。雖然通常是不自覺的，但有些情況下無窮迴圈可能會有用。

這是一個無窮迴圈的範例：

while (true) {
console.log("這是一首永遠不會結束的歌...");
}

警告：除非你想讓你的電腦永遠歌唱，否則不要運行這段代碼！

在實際應用中，無窮迴圈通常用於遊戲開發或需要持續活躍的連續運行進程。

在我們結束對迴圈的探險之時，讓我們看看一些方便的方法，這些方法可以讓你在使用迴圈時生活更輕鬆：

方法	描述	範例
`forEach()`	對數組中的每個元素執行一次提供的函數	`array.forEach((item) => console.log(item));`
`map()`	創建一個新數組，其中包含對原數組中每個元素調用提供的函數的結果	`const newArray = array.map((item) => item * 2);`
`filter()`	創建一個新數組，包含所有通過提供的函數測試的元素	`const filteredArray = array.filter((item) => item > 5);`
`reduce()`	對數組中的每個元素執行減少器函數，結果為單個輸出值	`const sum = array.reduce((acc, curr) => acc + curr, 0);`

這些方法通常可以替換傳統的迴圈，並使你的代碼更易於閱讀和理解。

好了，各位！你剛剛完成了TypeScript中迴圈的速成課程。記住，熟練使人完美，所以不要害怕嘗試這些概念。快樂編程，願迴圈永遠在你這一邊！

Credits: Image by storyset