跳到主要内容

TypeScript For循环

介绍​

在编程中，循环是一种重复执行代码块的结构。TypeScript 提供了多种循环方式，其中最常用的是 for 循环。for 循环允许你根据指定的条件重复执行一段代码，通常用于遍历数组、对象或执行固定次数的操作。

本文将详细介绍 TypeScript 中的 for 循环，包括其语法、使用场景以及实际案例。

基本语法​

TypeScript 中的 for 循环语法与 JavaScript 相同。其基本结构如下：

typescript
for (初始化; 条件; 更新) {
  // 循环体
}
  • 初始化：在循环开始前执行一次，通常用于声明和初始化循环变量。
  • 条件：每次循环开始前都会检查的条件。如果条件为 true，则执行循环体；否则，循环结束。
  • 更新：每次循环结束后执行，通常用于更新循环变量。

示例：遍历数组​

以下是一个简单的 for 循环示例，用于遍历数组并打印每个元素：

typescript
const numbers = [1, 2, 3, 4, 5];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

输出：

1
2
3
4
5

在这个示例中，i 是循环变量，初始值为 0。每次循环时，i 都会递增，直到 i 不再小于 numbers.length，循环结束。

for...of 循环​

TypeScript 还提供了 for...of 循环，用于遍历可迭代对象（如数组、字符串等）。与传统的 for 循环相比，for...of 循环更加简洁。

示例：遍历数组​

typescript
const fruits = ["apple", "banana", "cherry"];

for (const fruit of fruits) {
  console.log(fruit);
}

输出：

apple
banana
cherry

在这个示例中，fruit 是数组 fruits 中的每个元素。for...of 循环会自动遍历数组中的每个元素，无需手动管理索引。

提示

for...of 循环非常适合遍历数组和字符串，因为它不需要手动管理索引，代码更加简洁。

for...in 循环​

for...in 循环用于遍历对象的属性。它会遍历对象的所有可枚举属性，包括原型链上的属性。

示例：遍历对象​

typescript
const person = {
  name: "Alice",
  age: 25,
  job: "Developer"
};

for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

输出：

name: Alice
age: 25
job: Developer

在这个示例中，key 是对象 person 的每个属性名。for...in 循环会遍历对象的所有属性，并打印属性名和对应的值。

警告

for...in 循环会遍历对象的所有可枚举属性，包括原型链上的属性。如果你只想遍历对象自身的属性，可以使用 Object.hasOwnProperty 方法进行过滤。

实际应用场景​

场景 1：计算数组元素的总和​

假设你有一个数字数组，需要计算所有元素的总和。你可以使用 for 循环来实现：

typescript
const numbers = [10, 20, 30, 40, 50];
let sum = 0;

for (let i = 0; i < numbers.length; i++) {
  sum += numbers[i];
}

console.log(`总和为: ${sum}`);

输出：

总和为: 150

场景 2：过滤数组中的偶数​

假设你有一个数字数组，需要过滤出其中的偶数。你可以使用 for...of 循环来实现：

typescript
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = [];

for (const number of numbers) {
  if (number % 2 === 0) {
    evenNumbers.push(number);
  }
}

console.log(`偶数数组: ${evenNumbers}`);

输出：

偶数数组: 2,4,6

总结​

for 循环是 TypeScript 中最常用的循环结构之一，适用于各种场景。通过本文的学习，你应该已经掌握了 for 循环的基本语法、for...of 循环和 for...in 循环的使用方法，并了解了它们在实际应用中的使用场景。

备注

附加资源：

练习：

  1. 使用 for 循环遍历一个字符串，并打印每个字符。
  2. 使用 for...in 循环遍历一个对象，并过滤出值为数字的属性。
  3. 使用 for...of 循环遍历一个数组，并计算所有元素的总和。