TypeScript for循环的不同变体

在任何编程语言中，我们使用循环来重复或多次执行同一个代码块。循环使我们可以写更少的代码来多次执行同一个代码块。

for循环是TypeScript中的循环之一。如下所示，TypeScript中的for循环也有三种不同的子类型。

• 正常的for循环

• for-of 循环

• for-in循环

在这个TypeScript教程中，我们将了解for循环的所有变体。此外，我们还将学习每种类型的for循环与其他类型有什么不同。

正常for循环的介绍

我们可以使用for循环来多次执行该代码块。同时，我们可以定义我们要执行多少次代码块。对于for-loop的每一次迭代，我们可以对变量进行不同的操作。

语法

你可以按照下面的语法来使用TypeScript中的for循环。

for(initialization; condition: step){

   // code block of for loop
}

for循环多次执行写在大括号内的代码。

参数

用户可以在语法中观察到，for循环需要三个不同的参数，由’;’分隔。

• initialization – 它是一个启动循环的初始化条件。当for loop启动时，它将调用所有写在第一个分号之前的代码，也就是初始化块中的代码。

• condition – 它是一个循环的终止条件，允许我们停止for-loop的迭代。在for-loop的每一次迭代之后，它都会检查，如果条件返回为真，只有for-loop进入下一次迭代；否则，它就会停止迭代。

• step – 这是一个移动for循环的步骤，在每次迭代后对可迭代变量进行修改。

示例 1

在下面的例子中，我们用for循环打印了五次信息。在初始化步骤中，我们将k变量初始化为1。在每次迭代之后，for循环都会检查，如果k的值小于或等于5，它将运行下一次迭代。同时，for-loop将在该步骤中把k变量增加1。

在输出中，用户可以看到for-loop运行了5次代码，这是写在for-loop的范围内。

// using the for loop to print the message multiple times
for (let k = 1; k <= 5; k = k + 1) {
   console.log("printing the message for " + k + "time");
}

// using the for loop to print the message multiple times
for (var k = 1; k <= 5; k = k + 1) {
   console.log("printing the message for " + k + "time");
}

输出

上述代码将产生以下输出 —

printing the message for 1time
printing the message for 2time
printing the message for 3time
printing the message for 4time
printing the message for 5time

示例 2

在下面的例子中，我们演示了break和continue关键字在for-loop中的使用。用户可以看到，我们在for-loop的终止条件中写了true。因此，它将永远不会停止循环。

我们使用了’break’关键字来停止里面的for-loop。在输出中，用户可以观察到for-loop在k==1时不会执行代码，而是跳到下一个迭代。

for (let k = 0; true; k++) {

   // if the value of k==1, the loop will jump to the 

   // next iteration without executing the below code
   if (k == 1) {
      continue;

      // termination condition in the for loop
   } else if (k == 6) {
      break;
   } else {

      //  code to execute
      console.log("The value of iterable k is " + k);
   }
}

for (var k = 0; true; k++) {

   // if the value of k==1, the loop will jump to the 

   //next iteration without executing the below code
   if (k == 1) {
      continue;

      // termination condition in the for loop
   }
   else if (k == 6) {
      break;
   }
   else {

      //  code to execute
      console.log("The value of iterable k is " + k);
   }
}

输出

上述代码将产生以下输出 —

The value of iterable k is 0
The value of iterable k is 2
The value of iterable k is 3
The value of iterable k is 4
The value of iterable k is 5

for-of循环的介绍

for-of 循环是for-loop的子类型。我们可以使用for-of循环来迭代可迭代对象的值。例如，我们可以使用for-of循环来遍历数组，并从每个索引中获取数值。

与for-loop相比，for-of循环提供了一种简单的语法来迭代可迭代对象。

语法

你可以按照下面的语法，使用for-of循环来迭代可迭代对象。

for (let element of iterableArray) {

   // perform some operations with the element
}

在上面的语法中，元素是指数组元素。for-of循环从起始索引开始迭代每个数组元素。

示例

在下面的例子中，我们使用for-of循环来迭代数组的每一个值。由于字符串在TypeScript中是一个可迭代的对象，我们使用for-of循环来迭代字符串的每个字符。

我们可以在for-of循环的块内对字符串或数组元素进行任何需要的操作。

// Creating the iterable array of type any
let iterableArray: any[] = [
   10,
   "Hi",
   "TutorialsPoint",
   75,
   false,
   true,
   87,
   "JavaScript",
   "TypeScript",
];

// using the for-of loop to iterate through the array
for (let element of iterableArray) {
   console.log("The value of element is " + element);
}

let str: string = "Welcome!";

// iterating through every character of the string
for (let char of str) {
   console.log("The char is " + char);
}

// Creating the iterable array of type any
var iterableArray = [
   10,
   "Hi",
   "TutorialsPoint",
   75,
   false,
   true,
   87,
   "JavaScript",
   "TypeScript",
];

// using the for-of loop to iterate through the array
for (var _i = 0, iterableArray_1 = iterableArray; _i < iterableArray_1.length; _i++) {
   var element = iterableArray_1[_i];
   console.log("The value of element is " + element);
}
var str = "Welcome!";

// iterating through every character of the string
for (var _a = 0, str_1 = str; _a < str_1.length; _a++) {
   var char = str_1[_a];
   console.log("The char is " + char);
}

输出

上述代码将产生以下输出 —

The value of element is 10
The value of element is Hi
The value of element is TutorialsPoint
The value of element is 75
The value of element is false
The value of element is true
The value of element is 87
The value of element is JavaScript
The value of element is TypeScript
The char is W
The char is e
The char is l
The char is c
The char is o
The char is m
The char is e
The char is !

for-in循环简介

for-in 循环的工作原理与for-of 循环几乎相同。for-in 循环通过对象的键值而不是对象的值进行迭代。当我们对数组使用for-in循环时，它通过数组索引进行迭代。

语法

你可以按照下面的语法来使用TypeScript中的for-in循环。

for (let element in iterable) {

   // element can be an object key or array index
}

示例

在这个例子中，我们创建了对象，并使用for-in循环来迭代每个对象的属性。在输出中，我们可以看到for-in循环打印了所有的对象属性。

// creating the object with different key-value pairs
let obj = {
   obj_name: "Shubham",
   hair_color: "black",
   eye_color: "black",
};

// getting all keys of an object
for (let key in obj) {
   console.log("The key is " + key);
}

输出

在编译时，它将在JavaScript中生成相同的代码。

它将产生以下输出 —

The key is obj_name
The key is hair_color
The key is eye_color

我们已经了解了TypeScript中for循环的不同子类型。然而，无论我们能用for-of和for-in循环做什么，我们都可以使用普通的for循环，但for-of和for-in循环给出了清晰的语法和代码员对迭代器的迭代。

另外，for-of循环和for-in循环的区别在于，for-of循环是通过iterable的值进行迭代，而for-in循环则是通过iterable的属性进行迭代。