「TypeScript系列」TypeScript 循环

注意，由于 TypeScript 是 JavaScript 的超集，因此这些循环结构在 TypeScript 中与在 JavaScript 中完全相同。TypeScript 中的循环结构非常有用，特别是在需要重复执行某些操作或遍历数据集合时。用于遍历可迭代对象（包括数组、Map、Set、String、TypedArray、函数的 arguments 对象等等）的元素。：当你有一个数组，并且需要遍历

雪梅零落

2271人浏览 · 2024-05-17 00:15:00

雪梅零落 · 2024-05-17 00:15:00 发布

一、TypeScript 循环

在 TypeScript（以及 JavaScript）中，有多种方式可以实现循环。这里是一些常见的循环结构：

1. for 循环

用于在指定次数内重复代码块。

for (let i = 0; i < 10; i++) {
  console.log(i);
}

2. for…of 循环

用于遍历可迭代对象（包括数组、Map、Set、String、TypedArray、函数的 arguments 对象等等）的元素。

let array = [1, 2, 3, 4, 5];

for (let value of array) {
  console.log(value);
}

3. for…in 循环

用于遍历对象的可枚举属性（包括其原型链上的属性）。

注意：for...in 主要用于遍历对象的属性，而不是数组的索引。

let obj = {a: 1, b: 2, c: 3};

for (let key in obj) {
  if (obj.hasOwnProperty(key)) { // 检查属性是否是对象自身的（而不是原型链上的）
    console.log(key + ": " + obj[key]);
  }
}

4. while 循环

当指定的条件为真时，重复执行代码块。

let i = 0;

while (i < 10) {
  console.log(i);
  i++;
}

5. do…while 循环

与 while 循环类似，但会先执行代码块一次，然后再检查条件。

let i = 0;

do {
  console.log(i);
  i++;
} while (i < 10);

6. 嵌套循环（例如，用于二维数组遍历）

let matrix: number[][] = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

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

7. 使用循环进行数组操作（例如，过滤数组）

虽然这不是一个直接的循环结构示例，但你可以使用循环来遍历数组并执行某些操作，如过滤数组。

let numbers: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9];

let evenNumbers: number[] = [];

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

console.log(evenNumbers); // 输出: [2, 4, 6, 8]

在 TypeScript 中，你可以使用这些循环结构来遍历和处理数据。注意，由于 TypeScript 是 JavaScript 的超集，因此这些循环结构在 TypeScript 中与在 JavaScript 中完全相同。

二、循环应用场景

TypeScript 中的循环结构非常有用，特别是在需要重复执行某些操作或遍历数据集合时。以下是几种常见的应用场景以及对应的详细案例代码：

1. 遍历数组

应用场景：当你有一个数组，并且需要遍历数组中的每个元素来执行某些操作时。

案例代码：

let numbers: number[] = [1, 2, 3, 4, 5];

// 使用 for 循环遍历数组
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

// 使用 for...of 循环遍历数组
for (let number of numbers) {
  console.log(number);
}

2. 累加数组元素

应用场景：计算数组中所有元素的总和。

案例代码：

let numbers: number[] = [1, 2, 3, 4, 5];
let sum = 0;

// 使用 for 循环累加数组元素
for (let i = 0; i < numbers.length; i++) {
  sum += numbers[i];
}

console.log("Sum:", sum); // 输出：Sum: 15

3. 过滤数组元素

应用场景：从数组中筛选出符合特定条件的元素。

案例代码：

let numbers: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let evenNumbers: number[] = [];

// 使用 for 循环过滤数组元素
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 === 0) {
    evenNumbers.push(numbers[i]);
  }
}

console.log(evenNumbers); // 输出：[2, 4, 6, 8]

// 使用 Array.prototype.filter 方法（不是循环，但也很常用）
evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // 输出：[2, 4, 6, 8]

4. 遍历对象属性

应用场景：当你需要遍历对象的属性时。

案例代码：

let person: { name: string; age: number; occupation: string } = {
  name: "Alice",
  age: 30,
  occupation: "Engineer"
};

// 使用 for...in 循环遍历对象属性
for (let key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(`${key}: ${person[key]}`);
  }
}

// 输出：
// name: Alice
// age: 30
// occupation: Engineer

5. 嵌套循环

应用场景：处理二维数组、矩阵或其他需要嵌套遍历的数据结构。

案例代码：

let matrix: number[][] = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

// 使用嵌套 for 循环遍历二维数组
for (let i = 0; i < matrix.length; i++) {
  for (let j = 0; j < matrix[i].length; j++) {
    console.log(matrix[i][j]);
  }
}

// 输出：
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9

以上案例代码展示了 TypeScript 中循环结构的一些常见应用场景和用法。根据具体需求，你可以选择适合的循环结构来处理数据。

三、循环流程

1. `for` 循环流程

开始：程序到达 for 循环语句。
初始化：执行 for 循环的初始化表达式（如 let i = 0）。
条件判断：检查循环条件（如 i < 10）。如果条件为真（true），则执行循环体；如果为假（false），则跳过循环体，直接执行 for 循环之后的代码。
循环体：执行循环体内的代码块。
更新：执行 for 循环的更新表达式（如 i++）。
回到条件判断：再次检查循环条件。如果条件为真，则回到步骤 4，继续执行循环体；如果为假，则结束循环。

2. `for...of` 循环流程

开始：程序到达 for...of 循环语句。
获取迭代器：从可迭代对象（如数组、字符串等）中获取迭代器。
检查迭代器：检查迭代器是否还有下一个元素。如果有，则继续；否则，结束循环。
循环体：执行循环体内的代码块，并使用迭代器提供的当前元素。
移动到下一个元素：使用迭代器移动到下一个元素。
回到检查迭代器：再次检查迭代器是否还有下一个元素。如果有，则回到步骤 4，继续执行循环体；否则，结束循环。

3. `while` 循环流程

开始：程序到达 while 循环语句。
条件判断：检查循环条件（如 i < 10）。如果条件为真（true），则执行循环体；如果为假（false），则跳过循环体，直接执行 while 循环之后的代码。
循环体：执行循环体内的代码块。
回到条件判断：再次检查循环条件。如果条件为真，则回到步骤 3，继续执行循环体；如果为假，则结束循环。