TypeScript入门 (二)控制语句

引言

大家好，我是GISer Liu😁，一名热爱AI技术的GIS开发者。本系列文章是我跟随DataWhale 2024年9月学习赛的TypeScript学习总结文档。本文主要讲解TypeScript中控制语句的部分；希望通过我的知识点总结，能够帮助你更好地学习TypeScript。💕💕😊

---

一、介绍

在编程开发中，控制语句是实现程序逻辑的关键部分。TypeScript 提供了丰富的控制语句，包括条件语句、循环语句和函数。通过这些控制语句，用户可以编写更加复杂和功能强大的程序。接下来，作者将详细探讨这些控制语句的语法、使用方法以及代码案例。

---

二、条件语句

条件语句用于根据不同的条件执行不同的代码块。TypeScript 提供了多种条件语句，包括 if、else、else if 和 switch。

1. if 语句

if 语句用于在条件为 true 时执行代码块。

语法：

if (boolean_expression) {// 在布尔表达式 boolean_expression 为 true 时执行
}

思路分析：

• boolean_expression 是一个布尔表达式，如果其值为 true，则执行 if 语句块中的代码。
• 如果 boolean_expression 为 false，则跳过 if 语句块，继续执行后续代码。

代码案例：

var num: number = 5;
if (num > 0) {console.log("数字是正数");
}

这里的num > 0是逻辑运算符，这里结果为true；

2. else 语句

一个 if 语句后可跟一个可选的 else 语句，else 语句在布尔表达式为 false 时执行。

语法：

if (boolean_expression) {// 在布尔表达式 boolean_expression 为 true 时执行
} else {// 在布尔表达式 boolean_expression 为 false 时执行
}

代码案例：

var num: number = 12;
if (num % 2 == 0) {console.log("偶数");
} else {console.log("奇数");
}

3. else if 语句

if...else if....else 语句在执行多个判断条件的时候很有用。

语法：

if (boolean_expression_1) {// 在布尔表达式 boolean_expression_1 为 true 时执行
} else if (boolean_expression_2) {// 在布尔表达式 boolean_expression_2 为 true 时执行
} else if (boolean_expression_3) {// 在布尔表达式 boolean_expression_3 为 true 时执行
} else {// 布尔表达式的条件都为 false 时执行
}

代码案例：

var num: number = 2;
if (num > 0) {console.log(num + " 是正数");
} else if (num < 0) {console.log(num + " 是负数");
} else {console.log(num + " 不是正数也不是负数");
}

4. switch 语句

一个 switch 语句允许测试一个变量等于多个值时的情况。每个值称为一个 case，且被测试的变量会对每个 switch case 进行检查。

语法：

switch (expression) {case constant-expression:statement(s);break; // 可选的case constant-expression:statement(s);break; // 可选的// 您可以有任意数量的 case 语句default: // 可选的statement(s);
}

代码案例：

var grade: string = "A";
switch (grade) {case "A": {console.log("优");break;}case "B": {console.log("良");break;}case "C": {console.log("及格");break;}case "D": {console.log("不及格");break;}default: {console.log("非法输入");break;}
}

这里则会执行打印 “优”

---

三、循环语句

循环语句用于重复执行某段代码，直到满足特定条件为止。TypeScript 提供了多种循环语句，包括 for、while 和 do...while。

1. for 循环

for 循环用于重复执行一段代码，直到满足特定条件为止。

语法：

for (init; condition; increment) {statement(s);
}

代码案例：

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

这里等待i>=5时才会停止循环

2. for...in 循环

for…in 语句用于迭代对象的属性。它遍历对象的可枚举属性，包括从原型链继承的属性。

语法：

for (var key in object) {// 语句
}

代码案例：

var obj = {a: 1, b: 2, c: 3};for (var key in obj) {if (obj.hasOwnProperty(key)) {console.log(key + ": " + obj[key]);}
}

3. for...of 循环

for…of 语句创建一个循环来迭代可迭代的对象，如数组、字符串、映射、集合等。它遍历对象的值，而不是属性。

语法：

for (let val of iterable) {// 语句
}

代码案例：

let someArray = [1, "string", false];for (let entry of someArray) {console.log(entry); // 1, "string", false
}

4. forEach、every 和 some 循环

forEach、every 和 some 是 JavaScript 的循环语法，TypeScript 作为 JavaScript 的语法超集，当然默认也是支持的。

代码案例：

let list = [4, 5, 6];
list.forEach((val, idx, array) => {console.log(`元素: ${val}, 索引: ${idx}, 数组: ${array}`);
});let allPositive = list.every((val, idx, array) => {return val > 0;
});
console.log(allPositive); // 输出: truelet hasEven = list.some((val) => {return val % 2 === 0;
});
console.log(hasEven); // 输出: true

• every是当列表中的所有元素都满足某个条件时返回every，否则返回false;
• some是只要列表中存在一个元素满足条件，即可返回true；

5. while 循环

while 语句在给定条件为 true 时，重复执行语句或语句组。

语法：

while (condition) {statement(s);
}

代码案例：

var num: number = 5;
var factorial: number = 1;while (num >= 1) {factorial = factorial * num;num--;
}
console.log("5 的阶乘为：" + factorial);

只有判断条件为false或者使用break关键字时能跳出循环；

6. do...while 循环

do...while 循环是在循环的尾部检查它的条件。

语法：

do {statement(s);
} while (condition);

代码案例：

var n: number = 10;
do {console.log(n);n--;
} while (n >= 0);

7. break 语句

break 语句用于终止循环或 switch 语句。

代码案例：

var i: number = 1;
while (i <= 10) {if (i % 5 == 0) {console.log("在 1~10 之间第一个被 5 整除的数为 : " + i);break; // 找到一个后退出循环}i++;
}

8. continue 语句

continue 语句用于跳过当前循环中的代码，强迫开始下一次循环。

代码案例：

var num: number = 0;
var count: number = 0;for (num = 0; num <= 20; num++) {if (num % 2 == 0) {continue;}count++;
}
console.log("0 ~20 之间的奇数个数为: " + count); // 输出10个奇数

---

四、函数

函数是一组一起执行一个任务的语句。TypeScript 中的函数可以有参数和返回值，并且支持函数重载和箭头函数。

1. 函数声明

函数声明定义了一个函数及其参数和返回类型。

语法：

function function_name(param1: type, param2: type): return_type {// 函数体return value;
}

代码案例：

function greet(): string { // 返回一个字符串return "Hello World";
}function caller() {var msg = greet(); // 调用 greet() 函数console.log(msg);
}caller(); // 输出: Hello World

2. 函数返回值

函数可以通过 return 语句返回值。

语法：

function function_name(): return_type {// 语句return value;
}

代码案例：

function add(a: number, b: number): number {return a + b;
}console.log(add(1, 2)); // 输出: 3

如果语句是return 后面不带有返回值，说明是暂停当前函数下一步执行；

3. 带参数函数

函数可以接受参数，并在函数体内使用这些参数。

语法：

function func_name(param1: datatype, param2: datatype) {// 函数体
}

代码案例：

function add(x: number, y: number): number {return x + y;
}console.log(add(1, 2)); // 输出: 3

4. 可选参数

在 TypeScript 函数里，我们可以将参数设置为可选，可选参数使用问号标识 ?。

语法：

function func_name(param1: type, param2?: type) {// 函数体
}

代码案例：

function buildName(firstName: string, lastName?: string) {if (lastName)return firstName + " " + lastName;elsereturn firstName;
}let result1 = buildName("Bob"); // 正确
let result2 = buildName("Bob", "Adams"); // 正确

5. 默认参数

我们可以设置参数的默认值，这样在调用函数的时候，如果不传入该参数的值，则使用默认参数。

语法：

function func_name(param1: type, param2: type = default_value) {// 函数体
}

这里可以看作是变量定义和有参函数的结合

代码案例：

function calculate_discount(price: number, rate: number = 0.50) {var discount = price * rate;console.log("计算结果: ", discount);
}calculate_discount(1000); // 计算结果: 500
calculate_discount(1000, 0.30); // 计算结果: 300

6. 剩余参数

剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入。

语法：

function func_name(param1: type, ...restOfName: type[]) {// 函数体
}

代码案例：

function addNumbers(...nums: number[]) {var i;var sum: number = 0;for (i = 0; i < nums.length; i++) {sum = sum + nums[i];}console.log("和为：", sum);
}addNumbers(1, 2, 3); // 和为： 6
addNumbers(10, 10, 10, 10, 10); // 和为： 50

这里的… 表示展开符号，其会将这个列表中所有的元素都展开；

7. 匿名函数

匿名函数是一个没有函数名的函数。匿名函数在程序运行时动态声明，除了没有函数名外，其他的与标准函数一样。

语法：

var res = function([arguments]) {// 函数体
};

代码案例：

var msg = function() {return "hello world";
};
console.log(msg()); // hello worldvar res = function(a: number, b: number) {return a * b;
};
console.log(res(12, 2)); // 24

8. 匿名函数自调用

匿名函数自调用在函数后使用 () 即可。

代码案例：

(function() {var x = "Hello!!";console.log(x);
})(); // Hello!!

9. 构造函数

TypeScript 也支持使用 JavaScript 内置的构造函数 Function() 来定义函数。

语法：

var res = new Function([arg1[, arg2[, ...argN]],] functionBody);

代码案例：

var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);
console.log(x); // 12

10. 递归函数

递归函数即在函数内调用函数本身。递归函数在处理需要重复执行相同操作的问题时非常有用，例如计算阶乘、斐波那契数列等。

代码案例：

function factorial(number: number): number {if (number <= 0) {         // 停止执行return 1;} else {return (number * factorial(number - 1));     // 调用自身}
}
console.log(factorial(6));      // 输出 720

11. Lambda 函数

Lambda 函数也称之为箭头函数。箭头函数表达式的语法比函数表达式更短。

语法：

( [param1, param2,…param n] )=>statement;

代码案例：

var foo = (x: number) => 10 + x;
console.log(foo(100));      // 输出结果为 110

箭头函数也可以是一个语句块：

语法：

( [param1, param2,…param n] )=> {// 代码块
}

代码案例：

var foo = (x: number) => {x = 10 + x;console.log(x);
};
foo(100); // 输出 110

在vue等前端框架中，箭头函数很常用！

12. 函数重载

函数重载允许函数根据不同的参数类型和数量执行不同的操作。TypeScript 中的函数重载通过定义多个同名函数来实现，每个函数的参数类型和返回类型可以不同。

语法：

function function_name(param1: type1): return_type1;
function function_name(param2: type2): return_type2;
function function_name(param: type1 | type2): return_type1 | return_type2 {// 函数体
}

代码案例：

function disp(s1: string): void;
function disp(n1: number, s1: string): void;function disp(x: any, y?: any): void {console.log(x);console.log(y);
}disp("abc"); // 输出: abc, undefined
disp(1, "xyz"); // 输出: 1, xyz

---

总结

在本文中，我们深入学习了 TypeScript 的控制语句基本知识，包括条件语句、循环语句和函数。这些知识点是编程的基础，尤其是条件语句和循环语句，需要通过不断的练习来牢记。函数部分则可以根据实际应用场景来逐步完善和加深记忆。

在下一篇文章中，我们将继续探讨 TypeScript 的高级特性，包括类、接口、泛型等，敬请期待！🚀

---

相关链接

• 项目地址：TypeScript-CookBook
• 相关文档：专栏地址
• 作者主页：GISer Liu-CSDN博客

如果觉得我的文章对您有帮助，三连+关注便是对我创作的最大鼓励！或者一个star🌟也可以😂.