0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿蒙TypeScript学习第7天:【TypeScript 循环】

jf_46214456 来源:jf_46214456 作者:jf_46214456 2024-04-02 14:28 次阅读

1、TypeScript 循环

有的时候,我们可能需要多次执行同一块代码。一般情况下,语句是按顺序执行的:函数中的第一个语句先执行,接着是第二个语句,依此类推。

编程语言提供了更为复杂执行路径的多种控制结构。

循环语句允许我们多次执行一个语句或语句组,下面是大多数编程语言中循环语句的流程图:

cke_10961.png


2、for 循环

TypeScript for 循环用于多次执行一个语句序列,简化管理循环变量的代码。

语法

语法格式如下所示:

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

下面是 for 循环的控制流程解析:

  1. init 会首先被执行,且只会执行一次。这一步允许您声明并初始化任何循环控制变量。您也可以不在这里写任何语句,只要有一个分号出现即可。
  2. 接下来,会判断 condition 。如果为 true,则执行循环主体。如果为 false,则不执行循环主体,且控制流会跳转到紧接着 for 循环的下一条语句。
  3. 在执行完 for 循环主体后,控制流会跳回上面的 increment 语句。该语句允许您更新循环控制变量。该语句可以留空,只要在条件后有一个分号出现即可。
  4. 条件再次被判断。如果为 true,则执行循环,这个过程会不断重复(循环主体,然后增加步值,再然后重新判断条件)。在条件变为 false 时,for 循环终止。

在这里,statement(s) 可以是一个单独的语句,也可以是几个语句组成的代码块。

condition 可以是任意的表达式,当条件为 true 时执行循环,当条件为 false 时,退出循环。

流程图

cke_17992.png

搜狗高速浏览器截图20240326151547.png

鸿蒙NEXT学习文档+mau123789是v

实例

以下实例计算 5 的阶乘, for 循环生成从 5 到 1 的数字,并计算每次循环数字的乘积。

3、TypeScript

var num:number = 5; var i:number; var factorial = 1; for(i = num;i>=1;i--) { factorial *= i; } console.log(factorial)

编译以上代码得到如下 JavaScript 代码:

4、JavaScript

鸿蒙NEXT学习文档+mau123789是v
var num = 5;

var i;

var factorial = 1;

for (i = num; i >= 1; i--)

{

factorial *= i;

}

console.log(factorial);复制

执行以上 JavaScript 代码,输出结果为:

120

5、for...in 循环

for...in 语句用于一组值的集合或列表进行迭代输出。

语法

语法格式如下所示:

for (var val in list) { 
    //语句 
}

val 需要为 string 或 any 类型。

实例

6、TypeScript

var j:any;

var n:any = "a b c"

for(j in n) {

console.log(n[j])

}复制

编译以上代码得到如下 JavaScript 代码:

7、JavaScript

var j;
var n = "a b c";
for (j in n) {
    console.log(n[j]);
}复制

执行以上 JavaScript 代码,输出结果为:

a

b

c

8、for…of 、forEach、every 和 some 循环

此外,TypeScript 还支持 for…of 、forEach、every 和 some 循环。

for...of 语句创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for...of 循环,以替代 for...in 和 forEach() ,并支持新的迭代协议。for...of 允许你遍历 Arrays(数组), Strings(字符串), Maps(映射), Sets(集合)等可迭代的数据结构等。

9、TypeScript for...of 循环

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

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

因为 forEach 在 iteration 中是无法返回的,所以可以使用 every 和 some 来取代 forEach。

10、TypeScript forEach 循环

let list = [4, 5, 6];
list.forEach((val, idx, array) = > {
    // val: 当前值
    // idx:当前index
    // array: Array
});复制

11、TypeScript every 循环

let list = [4, 5, 6];
list.every((val, idx, array) = > {
    // val: 当前值
    // idx:当前index
    // array: Array
    return true; // Continues
    // Return false will quit the iteration
});复制

12、while 循环

while 语句在给定条件为 true 时,重复执行语句或语句组。循环主体执行之前会先测试条件。

语法

语法格式如下所示:

while(condition)
{
   statement(s);
}

在这里,statement(s) 可以是一个单独的语句,也可以是几个语句组成的代码块。

condition 可以是任意的表达式,当条件为 true 时执行循环。 当条件为 false 时,程序流将退出循环。

流程图

cke_100073.png

图表中,while 循环的关键点是循环可能一次都不会执行。当条件为 false 时,会跳过循环主体,直接执行紧接着 while 循环的下一条语句。

实例

13、TypeScript

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

编译以上代码得到如下 JavaScript 代码:

14、JavaScript

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

执行以上 JavaScript 代码,输出结果为:

5 的阶乘为:120

15、do...while 循环

不像 forwhile 循环,它们是在循环头部测试循环条件。do...while 循环是在循环的尾部检查它的条件。

语法

语法格式如下所示:

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

请注意,条件表达式出现在循环的尾部,所以循环中的 statement(s) 会在条件被测试之前至少执行一次。

如果条件为 true,控制流会跳转回上面的 do,然后重新执行循环中的 statement(s)。这个过程会不断重复,直到给定条件变为 false 为止。

流程图

cke_127174.png

实例

TypeScript

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

编译以上代码得到如下 JavaScript 代码:

JavaScript

var num = 5;
var n = 10;
do {
    console.log(n);
    n--;
} while (n >= 0);复制

执行以上 JavaScript 代码,输出结果为:

10
9
8
7
6
5
4
3
2
1
0

16、break 语句

break 语句有以下两种用法:

  1. break 语句出现在一个循环内时,循环会立即终止,且程序流将继续执行紧接着循环的下一条语句。
  2. 它可用于终止 switch 语句中的一个 case。

如果您使用的是嵌套循环(即一个循环内嵌套另一个循环),break 语句会停止执行最内层的循环,然后开始执行该块之后的下一行代码。

语法

语法格式如下所示:

break;

流程图

cke_148975.png

实例

TypeScript

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

编译以上代码得到如下 JavaScript 代码:

JavaScript

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

执行以上 JavaScript 代码,输出结果为:

1~10 之间第一个被 5 整除的数为 : 5

17、continue 语句

continue 语句有点像 break 语句。但它不是强制终止,continue 会跳过当前循环中的代码,强迫开始下一次循环。

对于 for 循环,continue 语句执行后自增语句仍然会执行。对于 whiledo...while 循环,continue 语句重新执行条件判断语句。

语法

语法格式如下所示:

continue;

流程图

cke_174486.png

实例

TypeScript

ar 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个偶数复制

编译以上代码得到如下 JavaScript 代码:

JavaScript

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

执行以上 JavaScript 代码,输出结果为:

0 ~20 之间的奇数个数为: 10

18、无限循环

无限循环就是一直在运行不会停止的循环。 for 和 while 循环都可以创建无限循环。

for 创建无限循环语法格式:

for(;;) { 
   // 语句
}

实例

for(;;) { 
   console.log("这段代码会不停的执行") 
}

while 创建无限循环语法格式:

while(true) { 
   // 语句
}

实例

while(true) { 
   console.log("这段代码会不停的执行") 
}

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • HarmonyOS
    +关注

    关注

    79

    文章

    1780

    浏览量

    29238
  • OpenHarmony
    +关注

    关注

    23

    文章

    3216

    浏览量

    15155
  • 鸿蒙OS
    +关注

    关注

    0

    文章

    126

    浏览量

    4279
收藏 人收藏

    评论

    相关推荐

    鸿蒙TypeScript入门学习第6天:【条件语句】

    条件语句用于基于不同的条件来执行不同的动作。 TypeScript 条件语句是通过一条或多条语句的执行结果(True 或 False)来决定执行的代码块。
    的头像 发表于 04-01 13:51 410次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>TypeScript</b>入门<b class='flag-5'>学习</b>第6天:【条件语句】

    鸿蒙TypeScript 开发学习第9天:【TypeScript Number】

    TypeScript 与 JavaScript 类似,支持 Number 对象。 Number 对象是原始数值的包装对象。
    的头像 发表于 04-07 18:02 426次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>TypeScript</b> 开发<b class='flag-5'>学习</b>第9天:【<b class='flag-5'>TypeScript</b> Number】

    鸿蒙语言TypeScript学习第16天:【类】

    TypeScript 支持面向对象的所有特性,比如 类、接口等。
    的头像 发表于 04-15 09:29 412次阅读
    <b class='flag-5'>鸿蒙</b>语言<b class='flag-5'>TypeScript</b><b class='flag-5'>学习</b>第16天:【类】

    鸿蒙TypeScript学习第17天:【对象】

    对象是包含一组键值对的实例。 值可以是标量、函数、数组、对象等
    的头像 发表于 04-15 15:33 331次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>学习</b>第17天:【对象】

    鸿蒙TypeScript学习第20天:【模块】

    TypeScript 模块的设计理念是可以更换的组织代码。 模块是在其自身的作用域里执行,并不是在全局作用域,这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的,除非明确地使用 export 导出它们。类似地,我们必须通过 import 导入其他模块导出的变量、函数、类等。
    的头像 发表于 04-18 15:19 386次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>学习</b>第20天:【模块】

    【触觉智能 Purple Pi OH 开发板体验】二、鸿蒙系统APP应用例程学习HDC使用学习

    两年开发鸿蒙APP也是使用的这两种语言进行开发。当下看TypeScript程序还能说勉强看懂,但是当下开发程序就没那个实力了,需要之后在抽时间学习。技术更新的也确实是快啊!!! 二、天气预报程序开发
    发表于 08-31 11:13

    详解了将三万行代码从Flow移植到TypeScript的全过程

    最新发布的Babel 7已经开始支持TypeScript了,这引起了我的注意。这个发布意味着采用TypeScript不再需要引入整个TypeScript生态系统,我们可以继续通过Babel来生成JavaScript。更重要的是,
    的头像 发表于 02-11 11:05 3102次阅读

    搭建基于Vue3+Vite2+Arco+Typescript+Pinia后台管理系统模板

    今天我们就来快速搭建一个基于Vue3+Vite2+Arco+Typescript+Pinia后台管理系统模板。这样可以帮大家快速制作自己的后台模板
    的头像 发表于 03-01 10:09 487次阅读
    搭建基于Vue3+Vite2+Arco+<b class='flag-5'>Typescript</b>+Pinia后台管理系统模板

    快速了解TypeScript和JavaScript之间的差异

    如果我们同时考虑两者 ——TypeScript 与 JavaScript,那么每个 JavaScript 代码在 TypeScript 中都是有效的。这意味着 TypeScript 是 JavaScript 的超集。
    的头像 发表于 03-13 10:19 623次阅读

    TypeScript之父也搞大模型:推出TypeChat

    C# 和 TypeScript 之父 Anders Hejlsberg 今天宣布了全新的开源项目 ——TypeChat,它通过 AI 在自然语言和应用程序模式 (application schema),以及 API 之间构建了一座 “桥梁”,能用新颖有趣的方式使用 TypeScr
    的头像 发表于 07-24 09:27 578次阅读
    <b class='flag-5'>TypeScript</b>之父也搞大模型:推出TypeChat

    鸿蒙开发之ArkTS基础知识

    一、ArkTS简介 ArkTS是HarmonyOS优选的主力应用开发语言。它在TypeScript(简称TS)的基础上,匹配了鸿蒙的ArkUI框架,扩展了声明式UI、状态管理等相应的能力,让开
    的头像 发表于 01-24 16:44 550次阅读
    <b class='flag-5'>鸿蒙</b>开发之ArkTS基础知识

    鸿蒙TypeScript入门学习第2天【TypeScript安装】

    本文介绍 TypeScript 环境的安装。 我们需要使用到 npm 工具安装,如果你还不了解 npm,可以参考我之前文档。
    的头像 发表于 03-27 15:22 174次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>TypeScript</b>入门<b class='flag-5'>学习</b>第2天【<b class='flag-5'>TypeScript</b>安装】

    鸿蒙TypeScript入门学习第5天:【TypeScript 运算符】

    运算符用于执行程序代码运算,会针对一个以上操作数项目来进行运算。
    的头像 发表于 04-01 16:18 84次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>TypeScript</b>入门<b class='flag-5'>学习</b>第5天:【<b class='flag-5'>TypeScript</b> 运算符】

    鸿蒙TypeScript入门学习第8天:【TypeScript 函数】

    函数是一组一起执行一个任务的语句。 您可以把代码划分到不同的函数中。如何划分代码到不同的函数中是由您来决定的,但在逻辑上,划分通常是根据每个函数执行一个特定的任务来进行的。
    的头像 发表于 04-03 14:54 160次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>TypeScript</b>入门<b class='flag-5'>学习</b>第8天:【<b class='flag-5'>TypeScript</b> 函数】

    鸿蒙TypeScript学习第13天:【元组】

    元组中允许存储不同类型的元素,元组可以作为参数传递给函数。
    的头像 发表于 04-11 14:43 108次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>学习</b>第13天:【元组】