• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

TypeScript 循环语句

互联网 diligentman 1周前 (04-08) 5次浏览

本节我们学习循环,什么是循环呢,从字面意思就可以看就是重复多次执行代码。

TypeScript 中的 for 循环和 for...in 循的使用就和 JavaScript 中的一样。此外,TypeScript 中还还支持 for…offorEacheverysome 循环。

for循环

TypeScript 语言中的 for 循环可以用于多次执行一个代码块。例如一句代码重复执行 10 次、100次、1000次等,都可以通过循环来实现。

语法如下所示:

for ( init; condition; increment ){
    // 代码块
}

其中 init 是循环控制变量,会在循环最开始的时候执行,且只会执行一次。condition 是循环条件,当条件为 true 时会执行循环中的代码块,为 false 时则停止执行循环。increment 用于更新循环控制变量,当循环中的代码块执行完毕后,控制流会跳回到这个语句。

示例:

循环输出数字 0 到 4:

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

编译成 JavaScript 代码:

var num = 5;
var i;
for (i = 0; i < num; i++) {
    console.log(i);
}

输出:

0
1
2
3
4

我们来看下上面代码的执行流程:

  • 首先程序中的代码都是自上而下执行,所以在循环开始执行之前会执行这两句代码:
let num:number = 5;
let i:number;
  • 然后看到循环部分,首先被执行的是 i = 0,初始化循环的控制变量变量,然后判断给出的循环条件 i < num,如果满足这个条件,则执行循环中的代码块。所以此时输出了 0,这就是第一次循环。
  • 接着开始第二次循环,控制流会跳回到 i++ 语句部分,这条语句用于更新循环控制变量,所以此时 i 的值加 1。知道了 i 的值为 1 后,循环条件再次被判断,此时 i < num 仍旧满足,所以继续执行循环中的代码块,输出 1,这是第二次循环。
  • 然后就跟上面的步骤一样,继续第三次、第四次…等的循环。一直到循环条件 i < num 不满足时,循环就会结束。

for…in 循环

for...infor 循环的另一个变体, for...in 语句可以用于一组值的集合或列表进行迭代输出。

语法格式如下所示:

for (var val in list) { 
    //代码块
}

val 的数据类型为 string 或者 any 类型。

示例:

例如我们声明一个数组,然后使用 for...in 循环来遍历这个数组:

let myArr:string[] = ['a', 'b', 'c', 'd'];
let i:string;
for (i in myArr){
    console.log(myArr[i]);
}

编译成 JavaScript 代码:

var myArr = ['a', 'b', 'c', 'd'];
var i;
for (i in myArr) {
    console.log(myArr[i]);
}

输出:

a
b
c
d

for…of循环

ES6 中引入了 for...of 循环,用来替代for...inforEach()for...of 语句创建一个循环来迭代可迭代的对象。可以用于遍历字符串、数组、映射、集合等可迭代的数据结构。

示例:

使用 for...of 语句遍历数组:

let myArr:string[] = ['a', 'b', 'c', 'd'];
let i;
for (i of myArr){
    console.log(i);
}

编译成 JavaScript 代码:

var myArr = ['a', 'b', 'c', 'd'];
var i;
for (var _i = 0, myArr_1 = myArr; _i < myArr_1.length; _i++) {
    i = myArr_1[_i];
    console.log(i);
}

输出:

a
b
c
d

forEach 循环

forEach() 方法是一个数组方法,用于对数组中的每个项执行一个函数。

语法如下所示:

array.forEach(callback[, thisObject]);  

forEach() 方法按升序对数组中的每个元素执行一次提供的回调。callback 回调函数时一个用于测试每个元素的函数,接受三个可选参数,第一个参数为元素值 value ,第二个参数为元素索引 index,第三个参数Array,是一个在 forEach() 方法中迭代的数组。thisObject 是执行回调时使用的对象。

示例:

循环一个数组:

let username:string[] = ['杨过', '黄蓉', '郭靖', '梅超风'];
username.forEach(function(item){
    console.log(item);
});

编译成 JavaScript 代码:

var username = ['杨过', '黄蓉', '郭靖', '梅超风'];
username.forEach(function (item) {
    console.log(item);
});

输出:

杨过
黄蓉
郭靖
梅超风

使用 forEach() 方法其实有一个缺点,就是它没有提供停止或者中断循环的方法,且它只对数组有效。所以我们可以使用 every some 来代替 forEach 循环。

every 循环

every() 方法测试数组中的所有元素是否通过由提供的函数实现的测试。如果数组中的每个元素都满足提供的测试功能,则返回true。否则返回 false。

语法如下所示:

array.every(callback[, thisObject]);

every() 方法的语法和forEach() 方法类似,其中 callback 是一个回调函数,thisObject 为执行回调时用作此对象的对象。

示例:
let numArr:number[] = [1, 2, 3, 4, 5];

let result = numArr.every(function compare(element, index, array) { 
    return (element < 10); 
});        
console.log(result);

编译为 JavaScript 代码:

var numArr = [1, 2, 3, 4, 5];
var result = numArr.every(function compare(element, index, array) {
    return (element < 10);
});
console.log(result);

输出:

true

上述代码中因为数组 numArr 中的每个元素都通过了由函数compare 提供的测试,所以返回结果为 true。

some 循环

some() 方法用于测试数组中的某些元素是否通过由提供的函数实现的测试。

some() 方法和 every() 方法很类似,但是两者又还有一些区别,some() 方法会遍历数组中的每一项,如果其中一项为 true,则返回值为true。every() 方法则需要全部为true ,结果才为 true。

示例:
let numArr:number[] = [7, 10, 15, 21];

let result = numArr.some(function compare(element, index, array) { 
    return (element < 10); 
});        
console.log(result);

编译成 JavaScript 代码:

var numArr = [7, 10, 15, 21];
var result = numArr.some(function compare(element, index, array) {
    return (element < 10);
});
console.log(result);

输出:

true

上述代码中只要数组 numArr 中的有任何一个元素通过了由函数compare 提供的测试,结果返回值就会为 true。很明显,数组中有一个元素 7,满足小于 10 这个条件,所以最终代码输出结果为 true

while 循环

while 语句在满足指定循环条件时,会重复执行循环中的代码块。循环主体执行之前会先执行测试条件,如果一开始就不满足条件,则循环不会执行。

语法格式:

while(condition)
{
   // 代码块
}
示例:

循环输出数字 1 到 5:

var num:number = 1; 
while(num <= 5) { 
    console.log(num);
    num++; 
} 

编译成 JavaScript 代码:

var num = 1;
while (num <= 5) {
    console.log(num);
    num++;
}

输出:

1
2
3
4
5

while 后面小括号中就是指定的循环条件,当第一次循环时,变量 num 的值一开始为1,满足 num <= 5 ,输出 num 的值,然后执行 num++ ,此时 num 的值变为了2。然后继续第二次循环,2 小于 5,所以满足循环条件,执行循环中的代码块…. 然后一直到 num <= 5 这个条件不成立,循环结束。

do…while 循环

do...while 循环和 while 循环和 for 循环不同,forwhile 循环是在循环头部测试循环条件,do...while 循环是在循环的尾部检查它的条件。且 do...while 循环会在条件被测试之前至少执行一次。

语法格式如下所示:

do{
   // 代码块
}while( condition );
示例:
var num:number = 1; 
do { 
    console.log(num); 
    num++; 
} while(num == 5);

编译成 JavaScript 代码:

var num = 1;
do {
    console.log(num);
    num++;
} while (num == 5);

输出:

1

我们来看上面这段代码,在上面这个 do...while 循环中我们给定的循环条件为 num == 5 ,但此时 num 的值为 1,很显然不满足条件,但是从输出结果我们可以看出,循环执行了一次。这正是do...while 循环的与众不同,就是即使不满足条件,循环也至少会执行一次。

总结

对于循环来说,我们常见的还是 for 循环和 while 循环,那么什么情况下使用这两种循环呢?

  • 一般知道执行次数的使用选择使用 for 循环,而 while 可以在不确定循环次数的时候使用。
  • 可以根据具体需要使用这两种循环,但是可以优先考虑 for 循环,因为一般情况下 for 循环效率较高。

展开阅读全文

© 著作权归作者所有

举报

打赏

0


0 收藏

微信
QQ
微博

分享

作者的其它热门文章

TypeScript 数组类型
TypeScript 元组类型
Python的下载安装
Python调用钉钉机器人推送消息


程序员灯塔
转载请注明原文链接:TypeScript 循环语句
喜欢 (0)