dw做的网站怎么传到网络上去济南网站优化的周期
循环是编程中处理重复任务的核心工具。JavaScript 提供了多种循环语句，每种都有其适用场景和独特优势。本文将深入解析 JavaScript 的 6 种核心循环语句，通过实际示例帮助你精准选择合适的循环方案。
一、基础循环三剑客
1. for 循环
经典索引控制
javascript
复制
下载
for (let i = 0; i < 5; i++) {console.log(`第 ${i} 次循环`);
}
特点：
-
精确控制循环次数
-
支持索引访问
-
适合已知长度的数组遍历
2. while 循环
条件优先循环
javascript
复制
下载
let count = 0;
while (count < 3) {console.log(count);count++;
}
特点：
-
先检查条件后执行
-
适合不确定次数的循环
-
警惕无限循环风险
3. do...while 循环
先斩后奏型
javascript
复制
下载
let x = 5;
do {console.log(x); // 至少执行一次x++;
} while (x < 3);
特点：
-
无论条件如何至少执行一次
-
适合必须初始化执行的场景
二、现代遍历利器
4. for...of 循环
可迭代对象专用
javascript
复制
下载
const colors = ['红', '绿', '蓝'];
for (const color of colors) {console.log(color); // 直接获取元素值
}
优势：
-
支持数组/字符串/Map/Set
-
避免索引操作错误
-
可配合
break中断循环
5. for...in 循环
对象属性遍历器
javascript
复制
下载
const phone = { brand: 'Xiaomi', model: '13' };
for (const key in phone) {console.log(`${key}: ${phone[key]}`);
}
注意：
-
遍历对象可枚举属性
-
配合
hasOwnProperty过滤原型属性 -
不保证遍历顺序（ES6+ 已规范）
三、特殊循环技巧
6. 循环控制语句
灵活流程控制
javascript
复制
下载
// break 跳出整个循环
for (let i = 0; i < 10; i++) {if (i === 5) break;console.log(i); // 0-4
}// continue 跳过当前迭代
let n = 0;
while (n < 5) {n++;if (n === 3) continue;console.log(n); // 1,2,4,5
}
7. 嵌套循环优化
标签语句应用
javascript
复制
下载
outerLoop:
for (let i = 0; i < 3; i++) {innerLoop:for (let j = 0; j < 3; j++) {if (i === 1 && j === 1) {break outerLoop; // 同时跳出外层循环}console.log(i, j);}
}
四、循环方法对比指南
| 循环类型 | 最佳场景 | 可中断性 | 索引访问 | 对象支持 |
|---|---|---|---|---|
for | 精确控制次数的遍历 | ✅ | ✅ | ❌ |
while | 条件驱动的未知次数循环 | ✅ | ❌ | ❌ |
do...while | 必须执行一次的循环 | ✅ | ❌ | ❌ |
for...of | 数组等可迭代对象 | ✅ | ❌ | ❌ |
for...in | 对象属性遍历 | ✅ | ❌ | ✅ |
五、最佳实践建议
-
优先选择语义化循环
-
数组遍历用
for...of代替传统for -
对象遍历用
for...in+hasOwnProperty
-
-
性能关键场景用基础循环
javascript
复制
下载
// 缓存数组长度提升性能 const arr = [/* 大数据数组 */]; for (let i = 0, len = arr.length; i < len; i++) {// 处理逻辑 } -
避免在循环内创建函数
javascript
复制
下载
// 不推荐 for (let i = 0; i < 5; i++) {setTimeout(() => console.log(i), 0); }// 推荐：使用块级作用域 for (let i = 0; i < 5; i++) {(function(j) {setTimeout(() => console.log(j), 0);})(i); }
结语
掌握 JavaScript 循环语句的精髓在于理解每种结构的特性：
-
传统循环：精确控制，性能优先
-
现代遍历器：简洁安全，语义清晰
-
对象遍历：专属方案，避免误用