5_TypeScript 循环 --[深入浅出 TypeScript 测试]

在 TypeScript 中，循环结构与 JavaScript 相同，因为 TypeScript 是 JavaScript 的一个超集。TypeScript 添加了静态类型检查和其他一些特性，但它保留了 JavaScript 的所有语法和功能，包括循环。

以下是几种常见的循环结构：

for 循环

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

下面是两个使用 for 循环的具体示例，展示了如何在 TypeScript 中使用它来进行不同的任务：

示例 1: 计算数组元素的总和

假设我们有一个包含数字的数组，并且想要计算这些数字的总和。我们可以使用 for 循环来遍历数组并累加每个元素。

function sumArrayElements(arr: number[]): number {
    let total: number = 0;
    for (let i: number = 0; i < arr.length; i++) {
        total += arr[i];
    }
    return total;
}

// 使用示例
const numbers: number[] = [1, 2, 3, 4, 5];
console.log("数组元素的总和是: " + sumArrayElements(numbers)); // 输出：数组元素的总和是: 15

示例 2: 打印乘法表

这个例子展示了一个简单的 for 循环嵌套，用于打印一个给定数字的乘法表（例如9x9乘法表）。

function printMultiplicationTable(n: number): void {
    for (let i: number = 1; i <= n; i++) {
        let row: string = '';
        for (let j: number = 1; j <= n; j++) {
            row += `${i}*${j}=${i * j}\t`; // 使用制表符\t来分隔每一项
        }
        console.log(row);
    }
}

// 使用示例
printMultiplicationTable(9); // 打印9x9乘法表

在这两个示例中，for 循环都被用来迭代一组值或执行一系列操作。第一个示例是一个简单的累加过程，而第二个示例则涉及到了循环的嵌套，以创建更复杂的输出结构。这两个例子也展示了如何在 TypeScript 中为变量添加类型注解，确保代码的类型安全性和可读性。

while 循环

let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

下面是两个使用 while 循环的具体示例，展示了如何在 TypeScript 中利用 while 循环来完成不同的任务：

示例 1: 计算斐波那契数列

假设我们想要生成一个包含前 n 个斐波那契数的数组。我们可以使用 while 循环来构建这个序列。

function generateFibonacci(n: number): number[] {
    let fib: number[] = [];
    let a: number = 0, b: number = 1;
    while (fib.length < n) {
        fib.push(a);
        [a, b] = [b, a + b]; // 使用解构赋值更新 a 和 b
    }
    return fib;
}

// 使用示例
const numElements: number = 10;
console.log(`前 ${numElements} 个斐波那契数是: ${generateFibonacci(numElements).join(', ')}`);
// 输出：前 10 个斐波那契数是: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34

示例 2: 模拟猜数字游戏

在这个例子中，我们将创建一个简单的猜数字游戏。计算机随机选择一个介于 1 到 100 之间的数字，玩家需要猜测这个数字是什么。程序会提示玩家输入他们的猜测，并告诉他们猜得太高、太低还是正确，直到他们猜对为止。

function guessTheNumber(): void {
    const targetNumber: number = Math.floor(Math.random() * 100) + 1; // 随机生成1到100之间的整数
    let guess: number | null = null;

    console.log("欢迎来到猜数字游戏！我已经想好了一个1到100之间的数字。");

    while (guess !== targetNumber) {
        guess = parseInt(prompt("请输入你的猜测:") || "0", 10); // 假设有一个prompt函数获取用户输入
        if (isNaN(guess)) {
            console.log("请输入一个有效的数字！");
            continue;
        }

        if (guess < targetNumber) {
            console.log("太低了，请再试一次。");
        } else if (guess > targetNumber) {
            console.log("太高了，请再试一次。");
        } else {
            console.log("恭喜你，猜对了！");
        }
    }
}

// 注意：在实际浏览器环境中，可以使用 window.prompt 来获取用户输入。
// 在Node.js或没有UI的环境中，您可能需要用其他方式（如命令行参数或读取文件）来模拟用户输入。
// 使用示例（此代码段需要适应具体的执行环境）
// guessTheNumber();

请注意，在第二个示例中，prompt 函数用于获取用户的输入。这在浏览器环境中是可用的，但在 Node.js 环境中则不可用。如果你是在非浏览器环境中运行这段代码，你需要找到一种适合该环境的方法来接收用户输入，比如使用命令行界面（CLI）工具或者模拟用户输入。

这两个例子展示了 while 循环的灵活性以及它在不知道循环次数的情况下进行迭代的能力。第一个例子是一个计算问题，而第二个例子则涉及到用户交互和条件判断。

do…while 循环

let i = 0;
do {
    console.log(i);
    i++;
} while (i < 5);

当然，do...while 循环在 TypeScript 中至少执行一次循环体中的代码，然后根据条件判断是否继续执行。下面提供了两个使用 do...while 循环的具体示例：

示例 1: 用户输入验证

假设我们想要创建一个简单的程序来确保用户输入的是一个有效的正整数。我们可以使用 do...while 循环来不断请求用户输入，直到他们提供了一个有效的数字。

function getUserInput(): number {
    let userInput: string | null;
    let num: number;

    do {
        userInput = prompt("请输入一个正整数：") || "0"; // 假设有一个prompt函数获取用户输入
        num = parseInt(userInput, 10);

        if (isNaN(num) || num <= 0) {
            console.log("输入无效，请输入一个正整数！");
        }
    } while (isNaN(num) || num <= 0);

    return num;
}

// 注意：在实际浏览器环境中，可以使用 window.prompt 来获取用户输入。
// 在Node.js或没有UI的环境中，您可能需要用其他方式（如命令行参数或读取文件）来模拟用户输入。
// 使用示例（此代码段需要适应具体的执行环境）
// const validNumber = getUserInput();
// console.log(`你输入的有效正整数是: ${validNumber}`);

示例 2: 简单的猜硬币游戏

在这个例子中，我们将创建一个简单的猜硬币游戏。计算机随机选择“正面”或“反面”，玩家猜测结果。无论第一次猜测是否正确，游戏都会让玩家至少玩一次，并且只有在玩家决定停止时才会结束。

function coinFlipGame(): void {
    const outcomes: string[] = ['正面', '反面'];
    let playAgain: boolean = true;

    do {
        const flipResult: string = outcomes[Math.floor(Math.random() * outcomes.length)];
        const userGuess: string = prompt("请猜一猜，硬币是'正面'还是'反面'？")?.trim().toLowerCase() || '';

        if (userGuess === flipResult) {
            console.log(`恭喜你！你猜对了，是${flipResult}。`);
        } else {
            console.log(`很遗憾，这次是${flipResult}。`);
        }

        // 检查用户是否想再次玩游戏
        const again: string = prompt("你想再玩一次吗？(yes/no)")?.trim().toLowerCase() || '';
        playAgain = again === 'yes';
    } while (playAgain);
}

// 注意：在实际浏览器环境中，可以使用 window.prompt 来获取用户输入。
// 在Node.js或没有UI的环境中，您可能需要用其他方式（如命令行参数或读取文件）来模拟用户输入。
// 使用示例（此代码段需要适应具体的执行环境）
// coinFlipGame();

这两个例子展示了 do...while 循环的特点，即它会保证循环体至少被执行一次，这对于那些需要至少执行一次操作然后再检查条件的场景非常有用。第一个例子用于确保用户输入有效数据，而第二个例子则用于创建一个简单但有趣的游戏体验。

for…in 循环

for...in 循环用于遍历对象的可枚举属性（包括从原型链继承的属性）。对于数组来说，它会迭代索引。

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
        console.log(`${key}: ${obj[key]}`);
    }
}

for...in 循环在 TypeScript 中用于遍历对象的可枚举属性。它会迭代对象自身以及从原型链继承的所有可枚举属性，因此在使用时需要注意这一点。下面提供了两个使用 for...in 循环的具体示例：

示例 1: 遍历对象的属性

假设我们有一个表示学生的对象，其中包含一些个人信息。我们可以使用 for...in 循环来遍历这个对象，并打印出每个属性及其对应的值。

const student = {
    name: "张三",
    age: 20,
    major: "计算机科学"
};

for (const key in student) {
    if (student.hasOwnProperty(key)) { // 确保只处理对象自身的属性
        console.log(`${key}: ${student[key]}`);
    }
}

// 输出：
// name: 张三
// age: 20
// major: 计算机科学

示例 2: 遍历数组索引（不推荐）

虽然 for...in 可以用来遍历数组的索引，但这是不推荐的做法，因为 for...in 也会遍历原型链上的可枚举属性，这可能导致意外的结果。更好的做法是使用 for...of 或传统的 for 循环。然而，为了展示如何用 for...in 遍历数组，这里提供一个例子：

const numbers = [10, 20, 30, 40, 50];

for (const index in numbers) {
    if (numbers.hasOwnProperty(index)) { // 确保只处理数组自身的属性
        console.log(`Index ${index}: Value ${numbers[index]}`);
    }
}

// 输出：
// Index 0: Value 10
// Index 1: Value 20
// Index 2: Value 30
// Index 3: Value 40
// Index 4: Value 50

请注意，在遍历对象或数组时，总是要检查 hasOwnProperty 方法来确保你只处理对象自身的属性，而不是那些通过原型链继承来的属性。对于数组来说，通常更推荐使用 for...of 或者普通的 for 循环来遍历元素，因为它们更加直观且不会受到原型链的影响。

如果你确实需要遍历对象的属性，for...in 是一个很好的选择，但是在遍历数组时应谨慎使用，避免潜在的问题。

for…of 循环

for...of 循环是 ES6 引入的新特性，它用来遍历可迭代对象（如数组、字符串、Map、Set 等）的值。

const arr = [10, 20, 30];
for (const value of arr) {
    console.log(value);
}

for...of 循环是 ES6 引入的一种遍历可迭代对象（如数组、字符串、Map、Set 等）的值的方法。它非常适合于那些只需要访问元素本身而不需要索引的情况。下面是两个使用 for...of 循环的具体示例：

示例 1: 遍历数组并计算平均数

假设我们有一个包含学生成绩的数组，并且想要计算这些成绩的平均分。我们可以使用 for...of 循环来遍历数组中的每个成绩，并计算总和，最后求出平均分。

function calculateAverage(scores: number[]): number {
    let sum: number = 0;
    for (const score of scores) {
        sum += score;
    }
    return scores.length > 0 ? sum / scores.length : 0;
}

// 使用示例
const studentScores: number[] = [88, 92, 75, 83, 90];
console.log(`学生的平均成绩是: ${calculateAverage(studentScores).toFixed(2)}`);
// 输出：学生的平均成绩是: 85.60

示例 2: 遍历字符串并统计字符出现次数

在这个例子中，我们将创建一个函数来遍历一个字符串，并统计每个字符出现的次数。这可以用来分析文本中字符的频率。

function countCharacters(str: string): {[key: string]: number} {
    const charCount: {[key: string]: number} = {};
    for (const char of str) {
        if (char in charCount) {
            charCount[char]++;
        } else {
            charCount[char] = 1;
        }
    }
    return charCount;
}

// 使用示例
const text: string = "hello world";
const characterCounts = countCharacters(text);
console.log(characterCounts);
// 输出：{ h: 1, e: 1, l: 3, o: 2, ' ': 1, w: 1, r: 1, d: 1 }

在这两个示例中，for...of 循环被用于遍历不同的数据结构（数组和字符串），并且展示了如何在 TypeScript 中处理这些数据。第一个示例演示了如何对数值进行累加以计算平均值，而第二个示例则展示了如何遍历字符串并对字符计数。这两个例子都体现了 for...of 循环简洁明了的特点，尤其是在你需要直接操作集合中的元素时。

forEach 方法（针对数组）

这不是语言层面的循环结构，而是数组的一个方法，它可以更简洁地遍历数组元素。

const arr = [1, 2, 3];
arr.forEach((value, index, array) => {
    console.log(`Element at index ${index} is ${value}`);
});

forEach 方法是 JavaScript 数组的一个内置方法，它允许你为数组中的每个元素执行一次提供的函数。这个方法非常适合用来遍历数组并对其元素进行操作。在 TypeScript 中使用 forEach 时，你可以利用类型注解来确保代码的类型安全性和可读性。以下是两个具体的示例：

示例 1: 使用 `forEach` 打印数组元素

假设我们有一个包含学生名字的字符串数组，并且想要打印出每个学生的欢迎信息。

const students: string[] = ["Alice", "Bob", "Charlie"];

students.forEach((student) => {
    console.log(`欢迎, ${student}!`);
});

// 输出：
// 欢迎, Alice!
// 欢迎, Bob!
// 欢迎, Charlie!

在这个例子中，forEach 方法接收一个回调函数作为参数，该回调函数会在数组的每一个元素上被调用。回调函数接收当前元素（这里是 student）作为其参数，并可以对其进行任意操作。

示例 2: 使用 `forEach` 对数组元素进行累加

在这个例子中，我们将创建一个函数来计算一个数字数组中所有元素的总和。虽然通常我们会使用 reduce 方法来做这种累加操作，但这里我们展示如何使用 forEach 来实现相同的功能。

function sumArrayElements(arr: number[]): number {
    let total: number = 0;

    arr.forEach((value) => {
        total += value;
    });

    return total;
}

// 使用示例
const numbers: number[] = [1, 2, 3, 4, 5];
console.log(`数组元素的总和是: ${sumArrayElements(numbers)}`);
// 输出：数组元素的总和是: 15

在这个例子中，forEach 同样接收一个回调函数，这次我们还定义了一个累加器变量 total 来保存累加的结果。每当 forEach 调用回调函数时，它会将当前元素的值加到 total 上。

这两个例子展示了 forEach 方法的灵活性以及它是如何与 TypeScript 的类型系统一起工作的。第一个例子简单地遍历了数组并打印了信息，而第二个例子则展示了如何使用 forEach 来累积数组元素的值。请注意，forEach 不会改变原始数组，并且它的主要用途是在不改变数组的情况下对数组元素执行某些操作。

使用类型注解

在 TypeScript 中，你可以为循环变量添加类型注解，以确保类型安全。

for (let i: number = 0; i < 5; i++) {
    console.log(i);
}

const obj = { a: 'one', b: 'two', c: 'three' };
for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
        console.log(`${key}: ${(obj as {[key: string]: string})[key]}`);
    }
}

const arr = [1, 2, 3];
arr.forEach((value: number, index: number, array: number[]) => {
    console.log(`Element at index ${index} is ${value}`);
});

选择哪种循环取决于你的具体需求以及你想要操作的数据类型。例如，如果你需要遍历数组并且不需要改变数组本身，那么 for...of 或 forEach 可能是最合适的选择。如果你需要遍历对象的属性，那么 for...in 就很有用。而传统的 for 和 while 循环则适用于更广泛的场景。