数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究解释 TypeScript 中 for 循环的不同变体
在任何编程语言中，我们使用循环来重复执行相同的代码块多次。循环允许我们编写更少的代码来多次执行相同的代码块。
for 循环是TypeScript中的循环之一。如下所示，TypeScript 中还有三种不同的 for 循环子类型。
普通 for 循环
for...of 循环
for...in 循环
在本 TypeScript 教程中，我们将学习 for 循环的所有变体。此外，我们还将学习每种类型的 for 循环与其他循环的不同之处。
普通 for 循环介绍
我们可以使用 for 循环多次执行代码块。此外，我们可以定义想要执行代码块的次数。对于 for 循环的每次迭代，我们都可以对变量执行不同的操作。
语法
您可以按照以下语法在 TypeScript 中使用 for 循环。
for(initialization; condition: step){
// code block of for loop
}
for 循环多次执行在花括号内编写的代码。
参数
用户可以在语法中观察到，for 循环采用三个不同的参数，用“;”分隔。
初始化 - 这是启动循环的初始化条件。当 for 循环开始时，它将调用在第一个分号之前编写的全部代码，这意味着在初始化块中。
条件 - 这是循环的终止条件，允许我们停止 for 循环的迭代。在 for 循环的每次迭代之后，它都会检查条件是否返回 true，只有在这种情况下，for 循环才会进行下一次迭代；否则，它将停止迭代。
步进 - 这是移动 for 循环并在每次迭代后更改可迭代变量的步骤。
示例 1
在下面的示例中，我们使用了 for 循环来打印五次消息。在初始化步骤中，我们将 k 变量初始化为 1。每次迭代后，for 循环都会检查 k 的值是否小于或等于 5，如果是，则运行下一次迭代。此外，for 循环将在步进中将 k 变量增加 1。
在输出中，用户可以看到 for 循环运行了 5 次代码，这些代码写在 for 循环的范围内。
// 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");
}
编译后，它将生成以下 JavaScript 代码：
// 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
在下面的示例中，我们演示了如何在 for 循环中使用 break 和 continue 关键字。用户可以看到，我们在 for 循环的终止条件中写了 true。因此，它永远不会停止循环。
我们使用了“break”关键字来停止其中的 for 循环。在输出中，用户可以观察到 for 循环不会为 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);
}
}
编译后，它将生成以下 JavaScript 代码：
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 循环的子类型。我们可以使用 for...of 循环迭代可迭代对象的数值。例如，我们可以使用 for...of 循环迭代数组并从每个索引获取数值。
与 for 循环相比，for...of 循环提供了一种更简单的语法来迭代可迭代对象。
语法
您可以按照以下语法使用 for...of 循环迭代可迭代对象。
for (let element of iterableArray) {
// perform some operations with the element
}
在上述语法中，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);
}
编译后，它将生成以下 JavaScript 代码：
// 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 循环迭代可迭代对象的数值，而 for...in 循环迭代可迭代对象的属性。
273 次浏览
