TypeScript 循环技巧：for、for in、for of 等详解（五）
- 编程语言
- 5天前
- 8热度
- 0评论
在编程中，循环是一种非常重要的控制结构，它允许我们多次执行同一段代码。TypeScript 作为 JavaScript 的超集，不仅支持传统的 for 和 while 循环，还引入了一些新的循环机制，如 for...in、for...of、forEach、every 和 some。本文将详细介绍这些循环的用法和应用场景，帮助你在实际开发中更加高效地使用它们。
1. for 循环
1.1 语法
for 循环是最常用的循环结构之一，它允许我们在满足某个条件的情况下多次执行一段代码。基本语法如下：
for (初始化; 条件; 更新) {
// 循环体
}- 初始化：通常用于声明和初始化循环变量。
- 条件：在每次循环开始前都会检查的布尔表达式。
- 更新：在每次循环体执行完毕后更新循环变量。
1.2 示例
下面是一个计算阶乘的示例，展示了 for 循环的基本用法：
let num: number = 5;
let factorial: number = 1;
for (let i = num; i >= 1; i--) {
factorial *= i;
}
console.log(factorial); // 输出 120在这个例子中，我们使用 for 循环从 5 递减到 1，每次迭代将当前值乘以 factorial，最终计算出 5 的阶乘。
2. for...in 循环
2.1 语法
for...in 循环用于遍历对象的可枚举属性。基本语法如下：
for (let key in object) {
// 循环体
}2.2 示例
下面是一个使用 for...in 循环遍历字符串的示例：
let str: string = "abc";
for (let key in str) {
console.log(str[key]);
}
// 输出：
// a
// b
// c在这个例子中，for...in 循环遍历字符串 str 的每个字符，并将其打印出来。
3. for...of 循环
3.1 语法
for...of 循环用于遍历可迭代对象（如数组、字符串、Map、Set 等）。基本语法如下：
for (let value of iterable) {
// 循环体
}3.2 示例
下面是一个使用 for...of 循环遍历数组的示例：
let arr: (number | string | boolean)[] = [1, "string", false];
for (let value of arr) {
console.log(value);
}
// 输出：
// 1
// string
// false在这个例子中，for...of 循环遍历数组 arr 的每个元素，并将其打印出来。
4. forEach、every 和 some 循环
4.1 forEach
forEach 方法用于遍历数组的每个元素，并对每个元素执行一个回调函数。基本语法如下：
array.forEach(callback(currentValue, index, array), thisArg);- currentValue：当前元素的值。
- index：当前元素的索引。
- array：正在遍历的数组。
- thisArg：可选参数，用于指定回调函数的 this 值。
4.2 示例
下面是一个使用 forEach 遍历数组的示例：
let list: number[] = [4, 5, 6];
list.forEach((value, index, array) => {
console.log(`值: ${value}, 索引: ${index}, 数组: ${array}`);
});
// 输出：
// 值: 4, 索引: 0, 数组: 4,5,6
// 值: 5, 索引: 1, 数组: 4,5,6
// 值: 6, 索引: 2, 数组: 4,5,64.3 every
every 方法用于检测数组的所有元素是否都满足某个条件。基本语法如下：
array.every(callback(currentValue, index, array), thisArg);- callback：返回布尔值的函数。
- thisArg：可选参数，用于指定回调函数的 this 值。
4.4 示例
下面是一个使用 every 检测数组所有元素是否都大于 3 的示例：
let list: number[] = [4, 5, 6];
let result = list.every((value, index, array) => {
return value > 3;
});
console.log(result); // 输出 true4.5 some
some 方法用于检测数组中是否有至少一个元素满足某个条件。基本语法如下：
array.some(callback(currentValue, index, array), thisArg);- callback：返回布尔值的函数。
- thisArg：可选参数，用于指定回调函数的 this 值。
4.6 示例
下面是一个使用 some 检测数组中是否有元素小于 5 的示例：
let list: number[] = [4, 5, 6];
let result = list.some((value, index, array) => {
return value < 5;
});
console.log(result); // 输出 true5. while 循环
5.1 语法
while 循环在给定条件为 true 时，重复执行一段代码。基本语法如下：
while (条件) {
// 循环体
}5.2 示例
下面是一个使用 while 循环计算阶乘的示例：
let num: number = 5;
let factorial: number = 1;
while (num >= 1) {
factorial *= num;
num--;
}
console.log(factorial); // 输出 120在这个例子中，while 循环在 num 大于等于 1 时继续执行，每次迭代将 num 乘以 factorial，并递减 num。
6. do...while 循环
6.1 语法
do...while 循环类似于 while 循环，但它的条件检查在循环体执行之后进行。基本语法如下：
do {
// 循环体
} while (条件);6.2 示例
下面是一个使用 do...while 循环打印数字的示例：
let n: number = 10;
do {
console.log(n);
n--;
} while (n >= 0);
// 输出：
// 10
// 9
// 8
// 7
// 6
// 5
// 4
// 3
// 2
// 1
// 0在这个例子中，do...while 循环至少执行一次，然后在每次迭代后检查条件 n >= 0。
7. break 和 continue 语句
7.1 break 语句
break 语句用于立即终止循环，跳转到循环体外的下一条语句。基本语法如下：
break;7.2 示例
下面是一个使用 break 语句的示例：
let i: number = 1;
while (i <= 10) {
if (i % 5 == 0) {
console.log(`在 1~10 之间第一个被 5 整除的数为: ${i}`);
break; // 找到一个后退出循环
}
i++;
}
// 输出 5 然后程序执行结束7.3 continue 语句
continue 语句用于跳过当前循环的剩余部分，直接进入下一次迭代。基本语法如下：
continue;7.4 示例
下面是一个使用 continue 语句的示例：
let num: number = 0;
let count: number = 0;
for (num = 0; num <= 20; num++) {
if (num % 2 == 0) {
continue; // 跳过偶数
}
count++;
}
console.log(`0 ~ 20 之间的奇数个数为: ${count}`); // 输出 10在这个例子中，continue 语句跳过了偶数的计数，只统计了奇数的数量。
8. 无限循环
无限循环是指没有明确终止条件的循环，通常用于需要持续运行的场景。for 和 while 循环都可以创建无限循环。
8.1 使用 for 创建无限循环
for (;;) {
console.log("这段代码会不停地执行");
}8.2 使用 while 创建无限循环
while (true) {
console.log("这段代码会不停地执行");
}9. 总结
本文详细介绍了 TypeScript 中的各种循环结构，包括 for、for...in、for...of、forEach、every、some、while 和 do...while 循环。每种循环都有其适用的场景和特点，合理选择和使用这些循环结构可以让你的代码更加简洁和高效。希望本文能帮助你在实际开发中更好地掌握这些循环技巧。