TypeScript入门 (二)控制语句

于 2024-09-18 22:54:02 发布
阅读量619 收藏 15
点赞数 13
分类专栏： TypeScript 前端 文章标签： typescript ubuntu javascript 前端 人工智能 vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45590504/article/details/142343014
版权

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 的高级特性，包括类、接口、泛型等，敬请期待！🚀

相关链接

thank_watch

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

GISer Liu
关注
专栏目录
TypeScript入门笔记（二）
丑小鸭变黑天鹅的博客
06-14 1691
typescript学习笔记记录
最全TypeScript 入门基础教程，看完就会
qq_43623970的博客
07-01 1546
想学习 TypeScript 的小伙伴看过来，本文将带你一步步学习 TypeScript 入门相关的十四个知识点，详细的内容大纲请看下图： 一、TypeScript 是什么 TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。 TypeScript 提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，比如异步功能和 De
【TypeScript入门】TypeScript入门篇——循环语句
看世界，也找自己
12-22 3070
有的时候，我们可能需要多次执行同一块代码。一般情况下，语句是按顺序执行的：函数中的第一个语句先执行，接着是第二个语句，依此类推。
【TypeScript入门】TypeScript入门篇——条件语句
看世界，也找自己
11-18 1273
条件语句是一种根据条件执行不同代码的语句，如果条件满足则执行一段代码，否则执行其他代码。可将条件语句认为是有点像起因和结果。
TypeScript入门基础
Better_Xing的博客
11-02 2121
TypeScript入门基础
TypeScript入门教程——pdf文档
03-16
**TypeScript 入门教程** TypeScript 是一种由微软开发的强类型、静态类型的超集语言，它在 JavaScript 的基础上增加了许多新特性，如...阅读提供的 "TypeScript入门教程——pdf文档"，将能更全面地掌握这些知识点。
详解Vue3.0 前的 TypeScript 最佳入门实践
10-16
在`shims-vue.d.ts`中，声明了`VueConstructor<Vue>`类型，这样TypeScript就能识别通过`import`语句导入的.vue文件了。 接下来，TypeScript的极速入门部分介绍了TypeScript中的一些基本类型和扩展类型。TypeScript...
TypeScript 入门
weixin_45397318的博客
10-01 512
文章目录TypeScript 介绍TypeScript 包含的数据类型：一些注意的点函数数组TypeScript Map 对象TypeScript 联合类型接口类对象命名空间模块声明文件 TypeScript 介绍 TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译 安装 TypeScript，会提供一个 tsc 工具执行相应命令 tsc -h 查看这个工具有哪些命令 之后新建一个 ts 文件，执行 tsc ts文件名 命令将 Type
vue3+el-tale封装（编辑、删除、查看详情按钮一起封装）
CallMe_CrabXie的博客
08-27 1952
对应的tableData和tableDataHeader文件（实际开发中，应该从后端拿tableData，tableHeader根据情况自定义）
Ubuntu 20.04 Linux无法访问GitHub问题
cdzg_zzk的博客
09-13 382
Ubuntu无法访问GitHub
一款rust语言AI神器cursor在ubuntu环境下的安装启动教程
梦一样的博客，神话般的感觉
09-11 515
虽然cursor目前只支持英文但是它强大的代码联想能力以及问答能力，可以高效的提高编码效率。如下步骤所有的前提是你的ubuntu上面已经安装了rust以及其必须的extensions。
Ubuntu Juju 与 Ansible的区别
xidianjiapei001的博客
09-11 786
Juju and Ansible are both powerful tools used for managing and orchestrating IT infrastructure and applications, but they have different approaches and use cases.
升级Ubuntu内核的几种方法
wacpguo的专栏
09-11 1173
Ubuntu主线内核由 Ubuntu 内核团队提供，用于测试和调试目的。它们不受支持且不适合生产使用。仅当它们可以解决当前内核遇到的关键问题时，才应该安装它们。
Ubuntu Juju介绍
xidianjiapei001的博客
09-11 906
Ubuntu Juju is an open-source, application and service orchestration tool developed by Canonical (the company behind Ubuntu). It is designed to simplify the deployment, management, and scaling of cloud services, applications
使用Ubuntu耳机输出正弦波信号
Nautiluss的博客
09-14 356
最近有一个项目想使用喇叭发出一个标准的正弦波测试信号，故记录下操作过程。执行如下python代码可以实现播放5秒的1Khz正弦波。如图所示标准的1KHz输出信号。
windows环境下载ubuntu22.04源码，提示invalid path aux.c
wacpguo的专栏
09-14 308
因此，当 Git 尝试在 Windows 上创建或访问名为 aux.c 的文件时，会导致路径无效的错误。即使在现代的 Windows 文件系统（如 NTFS）上，这些保留名称仍然不能用作文件名。aux 是 DOS 时代的一个设备文件名，代表辅助设备（通常是串行端口）。在Windows中，aux 是一个保留名称，不能用作文件名。Linux 或 macOS 系统没有上述的文件名限制。aux.c 文件导致 error的原因与文件名有关。这是为了向后兼容旧的 DOS 程序和设备驱动。
LNMP的简单安装(ubuntu)
最新发布
qq_41685627的博客
09-14 488
LNMP 是一种常见的开源软件组合，用于搭建高效的网站服务器环境。
framebuffer在Ubuntu上的操作
LEE_C17的博客
09-11 411
【代码】framebuffer在Ubuntu上的操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

GISer Liu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值