无限空间网站,有哪些好的模板网站,做淘宝客网站好搭建吗?,网站推广实施计划循环是编程中控制流程的核心工具。本文将详细介绍 JavaScript、ES6 及 TypeScript 中各种循环的写法、特性#xff0c;并通过实际示例帮助你掌握它们的正确使用姿势。 目录 传统三剑客 for 循环 while 循环 do...while 循环 ES6 新特性 forEach for...of for...in 数组…循环是编程中控制流程的核心工具。本文将详细介绍 JavaScript、ES6 及 TypeScript 中各种循环的写法、特性并通过实际示例帮助你掌握它们的正确使用姿势。 目录 传统三剑客 for 循环 while 循环 do...while 循环 ES6 新特性 forEach for...of for...in 数组高阶方法 map filter TypeScript 特别注意事项 循环对比与选择指南 一、传统三剑客
1. for 循环
特性 最基础的循环结构 明确控制循环次数 支持 break 和 continue
// JavaScript
for (let i 0; i 5; i) {console.log(i); // 0-4
}// TypeScript
const items: number[] [10, 20, 30];
for (let i: number 0; i items.length; i) {console.log(items[i]);
}
2. while 循环
特性 条件前置检查 适合不确定循环次数的情况
let count 0;
while (count 3) {console.log(count); // 0,1,2
}
3. do...while 循环
特性 至少执行一次 条件后置检查
let x 5;
do {console.log(x--); // 输出5后停止
} while (x 5); 二、ES6 新特性循环
1. forEach
特性 数组专用方法 无法使用 break/continue 回调函数参数丰富
const colors [red, green, blue];// JavaScript
colors.forEach((color, index) {console.log(${index}: ${color});
});// TypeScript
interface ColorItem {id: number;name: string;
}const colorObjects: ColorItem[] [{ id: 1, name: red },{ id: 2, name: green }
];colorObjects.forEach((item: ColorItem) {console.log(item.id.toString());
});
2. for...of
特性 支持所有可迭代对象 可直接获取元素值 支持 break/continue
// 遍历数组
const nums [10, 20, 30];
for (const num of nums) {if (num 20) break;console.log(num); // 10,20
}// 遍历字符串
for (const char of Hello) {console.log(char); // H,e,l,l,o
}// TypeScript 泛型示例
const mixedArray: Arraystring | number [a, 1, b];
for (const item of mixedArray) {if (typeof item string) {console.log(item.toUpperCase());}
}
3. for...in
特性 遍历对象可枚举属性 会遍历原型链属性 数组索引为字符串类型
const obj { a: 1, b: 2 };// JavaScript
for (const key in obj) {if (obj.hasOwnProperty(key)) {console.log(${key}: ${obj[key]});}
}// TypeScript 类型断言
interface MyObject {[key: string]: number;
}const typedObj: MyObject { x: 10, y: 20 };
for (const key in typedObj) {const value typedObj[key];console.log(value.toFixed(2));
} 三、数组高阶方法
1. map
特性 返回新数组 数据转换专用
// TypeScript
const numbers: number[] [1, 2, 3];
const squares: number[] numbers.map(n n * n);
2. filter
特性 返回过滤后的新数组 条件筛选利器
const users [{ name: Alice, age: 25 },{ name: Bob, age: 17 }
];const adults users.filter(user user.age 18); 四、TypeScript 特别注意事项 类型注解 // 明确声明索引类型
const arr: number[] [1, 2, 3];
for (let i: number 0; i arr.length; i) {const item: number arr[i];
} 枚举遍历 enum Color { Red RED, Green GREEN }
for (const colorKey in Color) {const colorValue Color[colorKey as keyof typeof Color];
} 对象遍历 interface User {id: number;name: string;
}const user: User { id: 1, name: Alice };
for (const key in user) {const value user[key as keyof User];
} 五、循环选择指南
循环类型最佳使用场景是否可中断返回值for确定次数的循环✅无for...of遍历数组/可迭代对象✅无for...in遍历对象属性✅无forEach简单数组遍历❌undefinedmap数组元素转换❌新数组filter数组元素过滤❌新数组 总结建议 优先考虑可读性在性能差异不大时选择更语义化的方式 注意类型安全TypeScript 中要确保循环变量正确类型 避免副作用尽量使用纯函数式方法处理数据 性能关键场景大数据量时优先考虑传统 for 循环
掌握各种循环的特点根据具体场景选择合适的迭代方式将显著提升代码质量和开发效率。 如果对你有帮助请帮忙点个
