TypeScript 循环语句 typescript

本节我们学习循环，什么是循环呢，从字面意思就可以看就是重复多次执行代码。
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 循环的与众不同，就是即使不满足条件，循环也至少会执行一次。
总结 【TypeScript 循环语句】对于循环来说，我们常见的还是 for 循环和 while 循环，那么什么情况下使用这两种循环呢？