TypeScript - 循环：高效编程的入门

你好啊，未来的编程巨星！今天，我们将踏上一段激动人心的旅程，探索TypeScript中的循环世界。作为你友好邻里的计算机老师，我将用大量的示例、解释，甚至可能是一两个笑话，来引导你完成这次冒险。所以，系好安全带，让我们跳进去吧！

TypeScript - Loops

理解循环：基础

在我们深入细节之前，让我们从一个简单的问题开始：什么是循环？想象你被分配了一个任务，在黑板上写100遍"I love TypeScript"。听起来很乏味，对吧？这就是循环派上用场的地方！它们允许我们重复执行一组指令多次，而无需一遍又一遍地编写相同的代码。

在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