四、TypeScript 语句

最新推荐文章于 2023-12-21 20:06:28 发布

web前端菜鸟

最新推荐文章于 2023-12-21 20:06:28 发布

阅读量334

点赞数

分类专栏： TypeScript 文章标签： typescript 前端

本文链接：https://blog.csdn.net/weixin_46261309/article/details/107407791

版权

TypeScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

TypeScript 语句

现在我们来学习 TypeScript 语句，通过本次学习，要求达到以下目标：

能够使用条件语句
能够使用三元运算符简化条件语句
能够使用循环语句
能够使用断点调试

1. 条件语句

1.1 概述

生活中，我们打开网站看电影，电影分两类：1 免费电影 2 Vip 电影。这时候如果我们播放 Vip 电影时，首先会判断用户是不是 Vip： 1. 如果是 Vip，就可以看完整电影； 2. 如果不是 Vip，只能试看5分钟。

那么我们上面讲到的“看电影”的例子，跟我们今天要学的“条件语句”有什么联系呢？实际上，如果你想在typescript 中实现这样的判断功能，根据不同的情况做不同的事件，那就要用到条件语句。

接下来我们就来看一下条件语句的说明:

条件语句：根据判断条件的结果（真或假），来执行不同的代码，从而实现不同功能。

条件执行时，首先判断条件是否满足。

如果 条件满足，就做某件事情（情况1）
如果 条件不满足，就做另外一件事情（情况2）

在这里插入图片描述

条件语句，也叫分支语句，不同的情况就是不同的分支。

1.2 if 语句

在 TypeScript 中想要实现条件判断就要用到 if 语句。也就是说，刚刚我们所讲的“看电影”的例子，就可以用if语句来判断用户是不是vip。

if语句到底怎么用呢？我们来看一下if 语句的语法：

if (判断条件) {

条件满足时，要做的事情

}

解释一下以上语法：

判断条件：返回布尔类型（true 或 false）。
- 如果判断条件为真，就执行要做的事情；
- 否则，如果判断条件为假，则不执行花括号中的代码。

在这里，我们补充一下概念说明：语句，就是一个完整的句子，用来使某件事情发生（或实现某个功能）。

1.3 else 语句

在 TypeScript 中 else 语句必须配合 if 语句来使用。 else 语句表示：条件不满足，要做的事情（if 语句的对立面）。我们来看一下 else 语句的语法：

if (判断条件) {

条件满足时，要做的事情

} else {

条件不满足，要做的事情

}

解释一下以上语法：

判断条件：返回布尔类型（true 或 false）。
- 如果判断条件为真，就执行要做的事情；
- 否则，如果判断条件为假，就执行条件不满足时要做的事情。

接下来我们看一个案例，来巩固一下if…else语句：

案例：

根据年龄做出判断：

如果年龄小于18，打印‘回家看小猪佩奇吧’
否则，就打印 ‘欢迎来到王者荣耀’

分析：

// 使用变量age来作为年龄

let age:number = 17

if…else语句的重点，就是要找出判断条件。

// 判断条件：年龄是否小于18岁,返回布尔类型

age < 18

最终代码：

let age:number = 17;

if(age < 18){
	console.log('回家看小猪佩奇吧');
}eles{
	console.log('欢迎来到王者荣耀');
}

2. 三元运算符

实际上，三元运算符的作用与刚刚我们讲的 if…else 语句类似。 它的作用也是根据判断条件的真假，得到不同的结果。

我们来看一下三元运算符语法：

结果 = 判断条件 ? 值1 : 值2

解释一下以上语法：

如果判断条件为真，结果为值1；
否则，如果判断条件为假，结果为值2。

这里我们要注意：得到结果的类型由值1和值2的类型决定（值1和值2的类型一般相同）。

既然三元运算符的作用与刚刚我们讲的 if…else 语句类似，那接下来我们就通过把前面的案例用三元运算符改写，更好的理解三元运算符。

案例：

根据年龄做出判断（使用三元运算符）：

如果年龄小于18，打印‘回家看小猪佩奇吧’
否则，就打印 ‘欢迎来到王者荣耀’

分析：

// 使用变量age来作为年龄

let age:number = 17

// 结果用变量result接收结果

let result:String = ‘’

找出判断条件。

// 判断条件：年龄是否小于18岁,返回布尔类型

age < 18

最终代码：

let result:String =  age < 18 ? '回家看小猪佩奇吧' : '欢迎来到王者荣耀'

3. 循环语句

3.1 概述

首先我们来通过两个例子来说明我们为什么要学习循环语句。生活中，经常重复做某件事情，比如：

	1. 上学时作业写 3 遍。 
	2. 女朋友说：爱我就对我说 100 遍“我爱你”。

同样的，在程序中，我们也会经常做一些重复的事情，比如这样一个需求：在 TS 中，打印 3 遍以下内容：

‘北冥有鱼，其名为鲲。鲲之大，一锅装不下’

这时候我们可以怎么做？像这样：

console.log('北冥有鱼，其名为鲲。鲲之大，一锅装不下');
console.log('北冥有鱼，其名为鲲。鲲之大，一锅装不下');
console.log('北冥有鱼，其名为鲲。鲲之大，一锅装不下');

那如果现在需求变了，要我们打印100遍，1000遍，10000遍呢？我们也要这样复制粘贴吗？这时候就需要使用循环语句了。

在 TypeScript 中，要实现重复做某件事情，就需要用到循环语句，来减少重复劳动提升效率。

3.2 for 循环

在 TypeScript 中，我们如何使用循环语句呢？for 循环就是实现重复做某件事情的循环语句。

注意：for 循环是 TS 基础知识的重难点，语法比较复杂。

下面我们从写作业的例子来看看for语句的组成：

需求：

老师要求我们作业写 3 遍

分析：

先准备，写作业的遍数，默认为：1。

第 1 遍：先判断遍数是否 <= 3（是）；写作业；遍数 + 1（准备开始第2遍）。

第 2 遍：先判断遍数是否 <= 3（是）；写作业；遍数 + 1（准备开始第3遍）。

第 3 遍：先判断遍数是否 <= 3（是）；写作业；遍数 + 1（准备开始第4遍）。

第 4 遍：先判断遍数是否 <= 3（否）；结束写作业。

从上面的分析过程可以看出，for 循环的组成：

初始化语句：声明计数器变量用来记录循环次数（执行一次）。
判断条件：判断循环次数是否达到目标次数。
计数器更新：完成一次循环让计数器数量加1。
循环体：循环的代码，也就是要重复做的事情。

3.3 for 循环的基本使用

下面我们就来看一下for语句的语法：

for (初始化语句; 判断条件; 计数器更新) {

循环体

}

我们对以上语法进行解释：

初始化语句：声明计数器变量，记录循环次数。

3.2的案例中，作业从第一遍开始，所以初始化 i 为 1

for (let i: number = 1; )
判断条件：判断循环次数是否达到目标次数。

3.2的案例中，作业要写3遍，所以判断条件为i <= 3;

for (let i: number = 1; i <= 3; )
计数器更新：计数器数量加1。

for (let i: number = 1; i <= 3; i++)
循环体：重复执行的代码，也就是要重复做的事情。

for (let i: number = 1; i <= 3; i++){

console.log(‘写作业’);

}

3.4 for 循环的执行过程

for 循环的语法比较复杂，搞明白代码执行顺序，才是真正理解并掌握了 for 循环。现在我们就来弄清楚for 循环的执行过程。

首先执行初始化语句：只会执行一次。
接着重复执行的部分：判断条件、循环的代码、计数器更新。

这一部分是比较复杂的。每次执行：
1. 判断条件
2. - 如果判断为真，执行循环体
  - 如果判断为真，结束循环
3. 计数器更新，跳转到2.1

3.5 断点调试

相信大家都有个疑惑：我们是如何知道 for 循环执行过程的呢？答案就是：断点调试。我们可以借助断点调试，观察代码的执行过程。

断点（Breakpoint）：程序暂停的位置（调试时，程序运行到此处，就会暂停）。

这里我们要注意一下：VSCode调试TS代码是需要配置的。

接下来我们就来学习VSCode - 断点调试配置

第一步：准备要调试的ts文件。这里我们准备了一个a.ts文件

第二步：添加调试配置

打开调试窗口：点击左侧活动栏倒数第二个按钮（Debug）
生成默认配置：点击DEBUG后面的下拉框，选择添加配置

修改配置内容如下：

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "调试TS代码",
      // ts-node 命令： “直接”运行ts代码。
      // 作用：调试时加载ts-node包（在调试时“直接”运行ts代码）
      "runtimeArgs": ["-r", "ts-node/register"],
      // 此处的 a.ts 表示要调试的 TS 文件（ 可修改为其他要调试的ts文件 ）
      "args": ["${workspaceFolder}/a.ts"]
    }
  ]
}

第三步：安装调试用到的包

在终端中输入以下命令：

# 注意：原来通过 -g（全局）安装的包，在调试时不生效，需要在当前目录中单独安装
# 调试TS代码，依赖这两个包
npm i ts-node typescript

调试技巧:

我们可以查看 console.log 输出（调试控制台）。如果我们想知道变量的值，可以：1. 鼠标移入 2 添加到左侧监视窗口

下面给出2个for循环语句的案例，大家可以通过断点调试，更好的理解for 循环的执行过程。

案例一：

买了 5 个包子，吃包子。

代码：

for(let i:number = 1; i <= 5; i++){
	console.log('现在吃第' + i + '个包子');
}

案例二：

打印出1+2+3+4+5+6+…+100的结果

代码：

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

3.6 break和continue

break和continue 常用在循环语句中，用来改变循环的执行过程。什么是改变循环的执行过程？实际上，for循环执行的特点是：连续且不间断。比如我们前面说的吃包子的例子就是不间断的。但是有的场景下，我们可以需要改变循环的执行过程。这种情况下，我们就用到break和continue。接下来我们就分别来学习break和continue。

break 能够让循环提前结束（终止循环）。 我们前面提到的”吃包子“的例子是连续且不间断地吃完了5个包子，现在我们改变一下需求：吃到（没吃）第3个饱了，剩下的就不吃了。

现在我们就不能单纯的用for语句做循环了，而是要在每次吃包子前判断，这个包子是不是第3个，如果不是，就继续吃；如果是，就停下来，不吃了。这时候我们就可以用break来提前结束循环：

for (let i: number = 1; i <= 5; i++) { 
	if (i === 3) { 
		break 
	}
	console.log('正在吃第' + i + '个包子') 
}

continue 能够让循环间断执行（跳过本次循环，继续下一次循环）。这句话什么意思呢？同样我们来举个例子，还是吃包子，吃到第3个有虫子，这个就不再吃了，但没吃饱，继续吃下一个。这时候就要用到continue 了。

for (let i: number = 1; i <= 5; i++) { 
	if (i === 3) { 
		continue 
	}
	console.log('正在吃第' + i + '个包子') 
}

束循环：

for (let i: number = 1; i <= 5; i++) { 
	if (i === 3) { 
		break 
	}
	console.log('正在吃第' + i + '个包子') 
}

for (let i: number = 1; i <= 5; i++) { 
	if (i === 3) { 
		continue 
	}
	console.log('正在吃第' + i + '个包子') 
}

web前端菜鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
四、TypeScript 语句

TypeScript 语句1. 条件语句1.1 概述1.2 if 语句1.3 else 语句2. 三元运算符3. 循环语句3.1 概述3.2 for 循环3.3 for 循环的基本使用3.4 for 循环的执行过程3.5 断点调试3.6 break和continue现在我们来学习TypeScript 语句，通过本次学习，要求达到以下目标：能够使用条件语句能够使用三元运算符简化条件语句能够使用循环语句能够使用断点调试1. 条件语句1.1 概述生活中，我们打开网站看电影，电影分两类：1
复制链接

扫一扫