解释 TypeScript 中 for 循环的不同变体
在任何编程语言中，我们都使用循环来重复或多次执行相同的代码块。循环允许我们编写更少的代码来多次执行相同的代码块。
for 循环是 TypeScript 中的循环之一。如下所示，TypeScript 中 for 循环还有三种不同的子类型。
普通 for 循环
for-of 循环
for-in 循环
我们将在本 TypeScript 教程中了解 for 循环的所有变体。此外，我们将了解每种 for 循环类型与其他循环的不同之处。
普通 for 循环简介
我们可以使用 for 循环多次执行代码块。此外，我们可以定义要执行代码块的次数。对于 for 循环的每次迭代，我们可以对变量执行不同的操作。
语法
您可以按照以下语法在 TypeScript 中使用 for 循环。
for(initialization; condition: step){
// for 循环的代码块
}
for 循环多次执行花括号内的代码。
参数
用户可以在语法中观察到 for 循环采用三个不同的参数，这些参数由";"分隔
初始化 - 这是启动循环的初始化条件。当 for 循环开始时，它将调用在第一个分号之前编写的所有代码，这意味着在初始化块中。
条件 - 这是循环的终止条件，允许我们停止 for 循环的迭代。在 for 循环的每次迭代之后，它会检查条件是否返回 true，只有 for 循环才会进行下一次迭代；否则，它会停止迭代。
步骤 - 这是在每次迭代后移动 for 循环并对可迭代变量进行更改的步骤。
示例 1
在下面的示例中，我们使用 for 循环打印了五次消息。在初始化步骤中，我们用 1 初始化了 k 变量。每次迭代之后，for 循环都会检查 k 的值是否小于或等于 5，它将运行下一次迭代。此外，for 循环会在步骤中将 k 变量增加 1。
在输出中，用户可以看到 for 循环运行了 5 次代码，该代码写在 for 循环的范围内。
// 使用 for 循环多次打印消息
for (let k = 1; k <= 5; k = k + 1) {
console.log("printing the message for " + k + "time");
}
编译后，它负责生成以下 JavaScript 代码 -
// 使用 for 循环多次打印消息
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 循环中的使用。用户可以看到我们在 for 循环的终止条件中写入了 true。因此，它永远不会停止循环。
我们使用了'break'关键字来停止其中的 for 循环。在输出中，用户可以观察到 for 循环不会执行 k==1 的代码，而是跳转到下一次迭代。
for (let k = 0; true; k++) {
// 如果 k 的值==1，循环将跳转到
// 下一次迭代而不执行下面的代码
if (k == 1) {
continue;
// for 循环中的终止条件
} else if (k == 6) {
break;
} else {
// 要执行的代码
console.log("可迭代对象 k 的值为 " + k);
}
}
编译后，它将生成以下 JavaScript 代码 -
for (var k = 0; true; k++) {
// 如果 k 的值==1，循环将跳转到
// 下一次迭代而不执行以下代码
if (k == 1) {
continue;
// for 循环中的终止条件
}
else if (k == 6) {
break;
}
else {
// 要执行的代码
console.log("可迭代对象 k 的值为 " + k);
}
}
输出
上述代码将产生以下输出 −
可迭代 k 的值为 0 可迭代 k 的值为 2 可迭代 k 的值为 3 可迭代 k 的值为 4 可迭代 k 的值为 5
for-of 循环简介
for-of 循环是 for 循环的子类型。我们可以使用 for-of 循环来迭代可迭代对象的值。例如，我们可以使用 for-of 循环来迭代数组并从每个索引获取值。
与 for 循环相比，for-of 循环提供了一种更简单的语法来迭代可迭代对象。
语法
您可以按照以下语法使用 for-of 循环来迭代可迭代对象。
for (let element of iterableArray) {
// 使用元素执行某些操作
}
在上述语法中，元素是数组元素。 for-of 循环从起始索引开始遍历每个数组元素。
示例
在下面的示例中，我们使用 for-of 循环遍历数组的每个值。由于字符串是 TypeScript 中的可迭代对象，因此我们使用 for-of 循环遍历字符串的每个字符。
我们可以在 for-of 循环块内对字符串字符或数组元素执行任何所需的操作。
// 创建 any 类型的可迭代数组
let iterableArray: any[] = [
10,
"Hi",
"TutorialsPoint",
75,
false,
true,
87,
"JavaScript",
"TypeScript",
];
// 使用 for-of 循环遍历数组
for (let element of iterableArray) {
console.log("element 的值为 " + element);
}
let str: string = "Welcome!";
// 遍历字符串的每个字符
for (let char of str) {
console.log("char 为 " + char);
}
编译后，它负责生成以下 JavaScript 代码 -
// 创建 any 类型的可迭代数组
var iterableArray = [
10,
"Hi",
"TutorialsPoint",
75,
false,
true,
87,
"JavaScript",
"TypeScript",
];
// 使用 for-of 循环遍历数组
for (var _i = 0, iterableArray_1 = iterableArray; _i < iterableArray_1.length; _i++) {
var element = iterableArray_1[_i];
console.log("element 的值为 " + element);
}
var str = "Welcome!";
// 遍历字符串的每个字符
for (var _a = 0, str_1 = str; _a < str_1.length; _a++) {
var char = str_1[_a];
console.log("char 为 " + char);
}
输出
上述代码将产生以下输出 −
element 的值为 10 element 的值为 Hi element 的值为 TutorialsPoint element 的值为 75 element 的值为 false element 的值为 true element 的值为 87 element 的值为 JavaScript element 的值为 TypeScript char 为 W char 为 e char 为 l char 为 c char 为 o char 为 m char 为 e char 为 !
for-in 循环简介
for-in 循环的工作原理与 for-of 循环几乎相同。for-in 循环遍历对象键而不是对象值。当我们对数组使用 for-in 循环时，它会遍历数组索引。
语法
您可以按照以下语法在 TypeScript 中使用 for-in 循环。
for (let element in iterable) {
// element 可以是对象键或数组索引
}
示例
在此示例中，我们创建了对象并使用 for-in 循环遍历每个对象的属性。在输出中，我们可以看到 for-in 循环打印了所有对象属性。
// 使用不同的键值对创建对象
let obj = {
obj_name: "Shubham",
hair_color: "black",
eye_color: "black",
};
// 获取对象的所有键
for (let key in obj) {
console.log("key 键是 " + key);
}
输出
编译后，它将在 JavaScript 中生成相同的代码。
它将产生以下输出 −
key 键是 obj_name key 键是 hair_color key 键是 eye_color
我们已经了解了 TypeScript 中 for 循环的不同子类型。但是，无论我们可以用 for-of 和 for-in 循环做什么，我们都可以使用普通的 for 循环，但 for-of 和 for-in 循环为迭代可迭代对象提供了清晰的语法和编码迭代。
此外，for-of 循环和 for-in 循环之间的区别在于 for-of 循环迭代可迭代对象的值，而 for-in 循环迭代可迭代对象的属性。
