TypeScript 流程控制语法知识点及案例代码
本文将详细介绍 TypeScript 中的流程控制机制，包括分支语句、循环语句和跳转语句。
一、分支语句
分支语句用于根据不同的条件执行不同的代码块。TypeScript 提供了 if...else、switch 和三元运算符来实现分支控制。
1. if...else 语句
语法：
if (条件1) {
// 条件1为真时执行的代码
} else if (条件2) {
// 条件1为假且条件2为真时执行的代码
} else {
// 所有条件都为假时执行的代码
}
案例代码：
// 示例：根据分数判断等级
function getGrade(score: number): string {
if (score >= 90) {
return 'A';
} else if (score >= 80) {
return 'B';
} else if (score >= 70) {
return 'C';
} else if (score >= 60) {
return 'D';
} else {
return 'F';
}
}
// 测试
const score1 = 85;
console.log(`Score: ${score1}, Grade: ${getGrade(score1)}`); // 输出: Score: 85, Grade: B
const score2 = 72;
console.log(`Score: ${score2}, Grade: ${getGrade(score2)}`); // 输出: Score: 72, Grade: C
2. switch 语句
switch 语句用于基于不同的值执行不同的代码块，适用于多个离散值的比较。
语法：
switch (表达式) {
case 值1:
// 当表达式 === 值1 时执行的代码
break;
case 值2:
// 当表达式 === 值2 时执行的代码
break;
default:
// 当表达式不匹配任何 case 时执行的代码
}
案例代码：
// 示例：根据星期几输出相应的活动
function getActivity(day: string): string {
switch (day.toLowerCase()) {
case 'monday':
return 'Start of the work week';
case 'wednesday':
return 'Midweek meeting';
case 'friday':
return 'End of the work week';
case 'saturday':
case 'sunday':
return 'Weekend!';
default:
return 'Invalid day';
}
}
// 测试
console.log(getActivity('Monday')); // 输出: Start of the work week
console.log(getActivity('wednesday')); // 输出: Midweek meeting
console.log(getActivity('Sunday')); // 输出: Weekend!
console.log(getActivity('Funday')); // 输出: Invalid day
3. 三元运算符
三元运算符是 if...else 语句的简洁写法，适用于简单的条件判断。
语法：
条件 ? 表达式1 : 表达式2
案例代码：
// 示例：判断一个数是奇数还是偶数
function checkOddOrEven(num: number): string {
return num % 2 === 0 ? 'Even' : 'Odd';
}
// 测试
console.log(checkOddOrEven(4)); // 输出: Even
console.log(checkOddOrEven(7)); // 输出: Odd
二、循环语句
循环语句用于重复执行代码块，直到满足特定条件。TypeScript 提供了 for、while、do...while 和 for...of 等循环结构。
1. for 循环
语法：
for (初始化; 条件; 更新) {
// 循环体
}
案例代码：
// 示例：计算 1 到 10 的和
let sum: number = 0;
for (let i: number = 1; i <= 10; i++) {
sum += i;
}
console.log(`Sum of 1 to 10 is ${sum}`); // 输出: Sum of 1 to 10 is 55
2. while 循环
while 循环在每次迭代前检查条件。
语法：
while (条件) {
// 循环体
}
案例代码：
// 示例：打印 1 到 5 的数字
let count: number = 1;
while (count <= 5) {
console.log(count);
count++;
}
// 输出:
// 1
// 2
// 3
// 4
// 5
3. do...while 循环
do...while 循环至少执行一次循环体，然后检查条件。
语法：
do {
// 循环体
} while (条件);
案例代码：
// 示例：至少打印一次 "Hello"
let i: number = 0;
do {
console.log('Hello');
i++;
} while (i < 0);
// 输出:
// Hello
4. for...of 循环
for...of 循环用于遍历可迭代对象，如数组、字符串等。
语法：
for (变量 of 可迭代对象) {
// 循环体
}
案例代码：
// 示例：遍历数组并打印每个元素
const fruits: string[] = ['Apple', 'Banana', 'Cherry'];
for (const fruit of fruits) {
console.log(fruit);
}
// 输出:
// Apple
// Banana
// Cherry
// 遍历字符串
const message: string = 'Hello';
for (const char of message) {
console.log(char);
}
// 输出:
// H
// e
// l
// l
// o
5. for...in 循环
for...in 循环用于遍历对象的可枚举属性。
语法：
for (属性 in 对象) {
// 循环体
}
案例代码：
// 示例：遍历对象属性
const person = {
name: 'Alice',
age: 25,
city: 'New York'
};
for (const key in person) {
if (person.hasOwnProperty(key)) {
console.log(`${key}: ${person[key]}`);
}
}
// 输出:
// name: Alice
// age: 25
// city: New York
三、跳转语句
跳转语句用于改变代码的执行流程。TypeScript 提供了 break、continue、return 和 throw 等跳转语句。
1. break 语句
break 语句用于终止最近的循环或 switch 语句。
案例代码：
// 示例：在循环中遇到特定条件时退出循环
for (let i: number = 1; i <= 10; i++) {
if (i === 5) {
break; // 当 i 等于 5 时退出循环
}
console.log(i);
}
// 输出:
// 1
// 2
// 3
// 4
2. continue 语句
continue 语句用于跳过当前迭代，继续下一次循环。
案例代码：
// 示例：跳过特定条件的迭代
for (let i: number = 1; i <= 5; i++) {
if (i === 3) {
continue; // 跳过 i 等于 3 的迭代
}
console.log(i);
}
// 输出:
// 1
// 2
// 4
// 5
3. return 语句
return 语句用于从函数中返回值，并终止函数的执行。
案例代码：
// 示例：函数返回特定值
function add(a: number, b: number): number {
return a + b; // 返回两数之和并终止函数
}
const result: number = add(3, 4);
console.log(`Result: ${result}`); // 输出: Result: 7
4. throw 语句
throw 语句用于抛出一个异常，终止当前执行流程。
案例代码：
// 示例：抛出异常并捕获
function divide(a: number, b: number): number {
if (b === 0) {
throw new Error('Division by zero');
}
return a / b;
}
try {
const result: number = divide(10, 0);
console.log(`Result: ${result}`);
} catch (error) {
console.error(error.message); // 输出: Division by zero
}
四、综合案例：用户权限校验
// 定义用户角色和权限
type Role = "admin" | "editor" | "guest";
function checkAccess(role: Role, isVerified: boolean): void {
// 条件分支判断
if (!isVerified) {
console.log("用户未验证，拒绝访问");
return; // 提前退出函数
}
// 根据角色分配权限
switch (role) {
case "admin":
console.log("欢迎管理员，您拥有全部权限");
break;
case "editor":
console.log("欢迎编辑，您可修改内容");
break;
case "guest":
console.log("欢迎访客，您仅可查看内容");
break;
default:
console.log("未知角色");
}
}
// 测试用例
checkAccess("admin", true); // 输出：欢迎管理员，您拥有全部权限
checkAccess("guest", false); // 输出：用户未验证，拒绝访问
五、注意事项
switch穿透问题：
若case后未加break，会继续执行后续case，需特别注意。- 循环性能优化：
避免在循环中频繁创建对象或执行复杂计算。 for...in与for...of的区别：
for...in遍历键名（索引或对象属性），for...of遍历值（数组元素或可迭代对象元素）。
总结
本文详细介绍了 TypeScript 中的流程控制机制，包括：
- 分支语句：
if...else、switch和三元运算符，用于根据条件执行不同的代码块。 - 循环语句：
for、while、do...while、for...of和for...in，用于重复执行代码块。 - 跳转语句：
break、continue、return和throw，用于改变代码的执行流程。
通过这些语法结构和案例代码，您可以在 TypeScript 中有效地控制程序的执行流程，实现复杂的逻辑控制。