当前位置：极客教程 > TypeScript > TypeScript 教程 > TypeScript for循环的不同变体

TypeScript for循环的不同变体

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
}
TypeScript

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");
}
TypeScript
// 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");
}
TypeScript

输出

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

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
TypeScript

示例 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);
   }
}
TypeScript
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);
   }
}
TypeScript

输出

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

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
TypeScript

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
}
TypeScript

在上面的语法中，元素是指数组元素。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);
}
TypeScript
// 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);
}
TypeScript

输出

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

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 !
TypeScript

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
}
TypeScript

示例

在这个例子中，我们创建了对象，并使用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);
}
TypeScript

输出

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

它将产生以下输出 —

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

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

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

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

TypeScript 教程

登录

找回密码？

注册