跳到主要内容

TypeScript 循环

在编程中,循环是一种重复执行代码块的结构。TypeScript 提供了多种循环结构,包括 forwhiledo-while 循环。这些循环结构可以帮助你简化代码,避免重复编写相同的逻辑。

1. for 循环

for 循环是最常用的循环结构之一。它允许你在已知循环次数的情况下重复执行代码块。

语法

typescript
for (初始化; 条件; 增量) {
// 循环体
}
  • 初始化:在循环开始前执行一次,通常用于初始化计数器。
  • 条件:每次循环开始前检查的条件。如果条件为 true,则执行循环体;否则,退出循环。
  • 增量:每次循环结束后执行,通常用于更新计数器。

示例

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

输出:

0
1
2
3
4

实际应用

假设你需要遍历一个数组并打印每个元素:

typescript
const fruits = ["Apple", "Banana", "Cherry"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}

输出:

Apple
Banana
Cherry

2. while 循环

while 循环在条件为 true 时重复执行代码块。与 for 循环不同,while 循环更适合在循环次数未知的情况下使用。

语法

typescript
while (条件) {
// 循环体
}

示例

typescript
let i = 0;
while (i < 5) {
console.log(i);
i++;
}

输出:

0
1
2
3
4

实际应用

假设你需要从用户输入中读取数据,直到用户输入 "exit"

typescript
let input = "";
while (input !== "exit") {
input = prompt("Enter something (type 'exit' to quit):") || "";
console.log(`You entered: ${input}`);
}
警告

在实际应用中,prompt 是浏览器环境中的方法,TypeScript 本身并不提供此功能。此示例仅用于演示 while 循环的使用场景。

3. do-while 循环

do-while 循环与 while 循环类似,但它的循环体至少会执行一次,即使条件一开始就为 false

语法

typescript
do {
// 循环体
} while (条件);

示例

typescript
let i = 0;
do {
console.log(i);
i++;
} while (i < 5);

输出:

0
1
2
3
4

实际应用

假设你需要确保至少执行一次某个操作,例如请求用户输入:

typescript
let input = "";
do {
input = prompt("Enter something (type 'exit' to quit):") || "";
console.log(`You entered: ${input}`);
} while (input !== "exit");

4. for...of 循环

for...of 循环用于遍历可迭代对象(如数组、字符串等)。它比传统的 for 循环更简洁。

语法

typescript
for (const 元素 of 可迭代对象) {
// 循环体
}

示例

typescript
const fruits = ["Apple", "Banana", "Cherry"];
for (const fruit of fruits) {
console.log(fruit);
}

输出:

Apple
Banana
Cherry

实际应用

假设你需要遍历一个字符串并打印每个字符:

typescript
const text = "Hello";
for (const char of text) {
console.log(char);
}

输出:

H
e
l
l
o

5. for...in 循环

for...in 循环用于遍历对象的属性。它通常用于遍历对象的键。

语法

typescript
for (constin 对象) {
// 循环体
}

示例

typescript
const person = { name: "Alice", age: 25 };
for (const key in person) {
console.log(`${key}: ${person[key]}`);
}

输出:

name: Alice
age: 25
警告

for...in 循环会遍历对象的所有可枚举属性,包括原型链上的属性。如果你只想遍历对象自身的属性,可以使用 Object.hasOwnProperty 进行检查。

6. 循环控制语句

TypeScript 提供了 breakcontinue 语句来控制循环的执行。

  • break:立即退出循环。
  • continue:跳过当前迭代,继续下一次迭代。

示例

typescript
for (let i = 0; i < 10; i++) {
if (i === 5) {
break; // 退出循环
}
if (i % 2 === 0) {
continue; // 跳过偶数
}
console.log(i);
}

输出:

1
3

7. 总结

TypeScript 提供了多种循环结构,包括 forwhiledo-whilefor...offor...in。每种循环结构都有其适用的场景:

  • for 循环:适合已知循环次数的场景。
  • while 循环:适合循环次数未知的场景。
  • do-while 循环:适合至少执行一次的场景。
  • for...of 循环:适合遍历可迭代对象。
  • for...in 循环:适合遍历对象的属性。

通过合理使用这些循环结构,你可以编写出更简洁、高效的代码。

8. 附加资源与练习

练习

  1. 使用 for 循环打印 1 到 100 之间的所有奇数。
  2. 使用 while 循环计算 1 到 100 的和。
  3. 使用 for...of 循环遍历一个字符串,并统计其中元音字母的数量。

附加资源

通过练习和阅读更多资源,你将更好地掌握 TypeScript 中的循环结构。