当前位置： 首页 > article >正文

TypeScript入门 (二)控制语句

article 2024/11/13 13:54:40

head-bar

引言

大家好，我是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); // 输出: true

let 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;
    else
        return 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 world

var 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博客

thank_watch

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


http://www.kler.cn/a/310573.html

相关文章：

  • 招聘app开发，人才招聘、求职首要方式
  • Android 开发指南：初学者入门
  • YOLOV8应用|排球垫球计数|附带全部数据集与源码（见文末百度云盘链接）
  • 金属箔电阻
  • 闯关leetcode——3206. Alternating Groups I
  • springboot集成swagger
  • C++伟大发明--模版
  • 使用大语言模型（LLM）修正小段乱码（Mojibake）为正常文本
  • expected_conditions(EC) 判断元素的操作
  • OpenCVSharp直方图和傅里叶变换介绍
  • 2024.9.15 Python模式识别新国大EE5907，总结PCA，LDA，Clustering，GMMboosting，SVM
  • istio中serviceentry结合egressgateway的使用
  • 求和（2）
  • C# 禁止程序重复启动
  • 科技创新驱动未来发展
  • Qt 内嵌 Python 解释器动态调试
  • canvas和svg的区别是什么？它们的应用场景是什么？
  • github域名与IP变更导致无法推送分支问题的解决
  • QT信号槽原理是什么，如何去使用它？
  • POSIX信号量以及利用POSIX信号量实现基于循环队列的高效生产者消费者模型
  • 【iOS】dismiss多级的方法
  • 《A++ 敏捷开发》- 26 根与翼
  • 如何使用自动化测试工具来提高API测试的效率？
  • html详细知识
  • Android中的单例模式
  • 怎么给儿童掏耳朵比较安全？安全儿童可视挖耳勺推荐