乐趣区

关于typescript:TypeScript-循环语句

jiezi

本节咱们学习循环，什么是循环呢，从字面意思就可以看就是反复屡次执行代码。

TypeScript 中的 for 循环和 for...in 循的应用就和 JavaScript 中的一样。此外，TypeScript 中还还反对 for…of、forEach、every 和 some 循环。

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...in 是 for 循环的另一个变体，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...in 和 forEach()。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 循环不同，for 和 while 循环是在循环头部测试循环条件，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 循环效率较高。
退出移动版