TypeScript 循环 – BuildCodePro

TypeScript循环知识汇总

编程小白也能看懂的循环语句详解 – 从基础到高级用法

什么是循环？

想象一下，你需要把100个苹果放进篮子里，如果一个个放太麻烦了，循环就像是一个机器人助手，帮你重复执行同样的动作。

在编程中，循环就是让计算机重复执行一段代码多次的工具。比如：

显示列表中的所有商品
计算1到100的总和
处理用户的每一条消息

TypeScript中有多种循环方式，每种都有不同的用途和特点。

基本的循环类型

1. for循环 – 最常用的循环

当你确切知道需要重复多少次时，用for循环最合适。

                // 基本结构
                for (初始化; 条件; 变化) {
                    // 要重复执行的代码
                }
                
                // 示例：打印数字1到5
                for (let i = 1; i <= 5; i++) {
                    console.log(i); // 输出1,2,3,4,5
                }
            

大白话解释：

初始化：准备一个计数器（比如i=1）
条件：检查是否继续循环（i<=5）
变化：每次循环后计数器怎么变（i++表示加1）

2. while循环 – 条件满足就一直做

当你不确定具体要循环多少次，但知道满足某个条件就要继续时使用。

                // 基本结构
                while (条件) {
                    // 要重复执行的代码
                }
                
                // 示例：猜数字游戏
                let target = 7;
                let guess = 0;
                
                while (guess !== target) {
                    guess = Math.floor(Math.random() * 10) + 1; // 随机猜1-10
                    console.log(`猜了: ${guess}`);
                }
                console.log(“猜对了！”);
            

注意： 一定要确保循环条件最终会变为false，否则会陷入无限循环，导致程序卡死！

3. do…while循环 – 先做一次再检查

和while类似，但至少会执行一次循环体，然后再检查条件。

                // 基本结构
                do {
                    // 要重复执行的代码
                } while (条件);
                
                // 示例：输入验证
                let userInput: string;
                do {
                    userInput = prompt(“请输入yes继续:”) || “”;
                } while (userInput.toLowerCase() !== “yes”);
                console.log(“感谢确认！”);
            

使用场景： 当你需要至少执行一次操作时，比如菜单选择、用户输入验证等。

数组专用循环

4. for…of循环 – 遍历数组和字符串

专门用来遍历数组元素，比传统for循环更简洁。

                // 基本结构
                for (元素变量 of 数组) {
                    // 使用元素
                }
                
                // 示例：计算总分
                const scores = [85, 90, 78, 92, 88];
                let total = 0;
                
                for (const score of scores) {
                    total += score;
                }
                console.log(`总分: ${total}`); // 输出总分
            

优点： 无需索引变量，直接拿到元素值；不会遗漏或重复；可遍历字符串、Map、Set等。

5. forEach方法 – 数组的内置循环

数组对象自带的方法，提供更函数式的编程方式。

                // 基本结构
                数组.forEach((当前元素, 索引, 整个数组) => {
                    // 处理逻辑
                });
                
                // 示例：打印学生姓名
                const students = [“张三”, “李四”, “王五”];
                students.forEach((student, index) => {
                    console.log(`${index + 1}. ${student}`);
                });
            

特点：

不能使用break或continue
使用return只能跳出当前回调，不能跳出整个循环
适合执行无跳出的完整遍历

对象遍历循环

6. for…in循环 – 遍历对象属性

专门用于遍历对象的属性名，而不是数组元素。

                // 基本结构
                for (属性名 in 对象) {
                    // 使用对象[属性名]获取值
                }
                
                // 示例：显示商品信息
                const product = {
                    name: “手机”,
                    price: 2999,
                    brand: “华为”
                };
                
                for (const key in product) {
                    console.log(`${key}: ${product[key]}`);
                }
            

重要提示：

遍历顺序不固定（不同JavaScript引擎可能不同）
会遍历原型链上的属性（可使用hasOwnProperty检查）
不推荐用于数组遍历（顺序不保证，可能包含非数字属性）

循环控制语句

在循环中控制流程的特殊语句：

                // break – 立即跳出整个循环
                for (let i = 0; i < 10; i++) {
                    if (i === 5) {
                        break; // 当i=5时跳出循环
                    }
                    console.log(i); // 只输出0-4
                }
                
                // continue - 跳过本次循环的剩余代码
                for (let i = 0; i < 5; i++) {
                    if (i === 2) {
                        continue; // 跳过i=2这次循环
                    }
                    console.log(i); // 输出0,1,3,4
                }
                
                // return - 在函数中跳出循环并返回值
                function findTarget(arr: number[], target: number): number {
                    for (let i = 0; i < arr.length; i++) {
                        if (arr[i] === target) {
                            return i; // 找到目标立即返回索引
                        }
                    }
                    return -1; // 没找到返回-1
                }
            

循环比较表

循环类型	适用场景	优点	缺点
for	已知循环次数	控制精确，性能好	语法相对复杂
while	条件循环	条件灵活	容易忘记更新条件
do…while	至少执行一次	保证执行一次	使用场景较少
for…of	遍历数组/字符串	简洁安全	不能直接获取索引
forEach	完整遍历数组	函数式风格	无法跳出循环
for…in	遍历对象属性	获取属性名	顺序不保证，会遍历原型

常见问题解答

Q: 我应该使用for循环还是for…of循环？

A: 如果你需要索引位置，用for循环；如果只需要元素值，用for…of更简洁安全。

Q: 为什么for…in不推荐用于数组？

A: 因为for…in会遍历所有可枚举属性，包括数组的非数字属性（如length）和原型链上的属性，且顺序不保证。

Q: 循环中如何避免无限循环？

A: 确保循环条件最终会变为false，在while循环中记得更新条件变量，在for循环中确保有终止条件。

Q: 循环性能重要吗？

A: 对于小型数据集不重要，但对于大型数据集（如数万条数据），for循环通常是最快的，forEach和for…of稍慢。

循环使用总结

选择循环类型就像选择工具 – 不同的任务需要不同的工具：

遍历数组 → for…of | 需要索引 → for循环 | 遍历对象 → for…in

记住：清晰的代码比聪明的代码更重要。选择使代码更易读、更易维护的循环方式！

什么是循环？

基本的循环类型

1. for循环 – 最常用的循环

2. while循环 – 条件满足就一直做

3. do…while循环 – 先做一次再检查

数组专用循环

4. for…of循环 – 遍历数组和字符串

5. forEach方法 – 数组的内置循环

对象遍历循环

6. for…in循环 – 遍历对象属性

循环控制语句

循环比较表

常见问题解答

循环使用总结

发表评论 取消回复

发表评论取消回复