Typescript学习教程，从入门到精通，TypeScript 流程控制语法知识点及案例代码（4）

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: Bconst 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); // 输出：用户未验证，拒绝访问

五、注意事项

1. switch 穿透问题：
   若 case 后未加 break，会继续执行后续 case，需特别注意。
2. 循环性能优化：
   避免在循环中频繁创建对象或执行复杂计算。
3. for...in 与 for...of 的区别：
   for...in 遍历键名（索引或对象属性），for...of 遍历值（数组元素或可迭代对象元素）。

总结

本文详细介绍了 TypeScript 中的流程控制机制，包括：

1. 分支语句：if...else、switch 和三元运算符，用于根据条件执行不同的代码块。
2. 循环语句：for、while、do...while、for...of 和 for...in，用于重复执行代码块。
3. 跳转语句：break、continue、return 和 throw，用于改变代码的执行流程。

通过这些语法结构和案例代码，您可以在 TypeScript 中有效地控制程序的执行流程，实现复杂的逻辑控制。