for循环是最常用的循环语句。
for (初始化; 条件; 更新) {
// 循环体
}
// 示例
for (let i = 0; i < 5; i++) {
console.log(i); // 0 1 2 3 4
}
初始化 → 检查条件 → true → 执行循环体 → 更新 → 检查条件 → ...
→ false → 结束循环
// 省略初始化
let i = 0;
for (; i < 5; i++) {
console.log(i);
}
// 省略条件（无限循环）
for (let i = 0; ; i++) {
if (i >= 5) break;
console.log(i);
}
// 省略更新
for (let i = 0; i < 5; ) {
console.log(i);
i++;
}
// 全部省略（无限循环）
for (;;) {
// 需要break退出
}
// 遍历数组
let arr = ["东", "巴", "文"];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
// 计算累加
let sum = 0;
for (let i = 1; i <= 100; i++) {
sum += i;
}
console.log(sum); // 5050
// 倒序循环
for (let i = arr.length - 1; i >= 0; i--) {
console.log(arr[i]);
}
while循环在条件为真时重复执行。
while (条件) {
// 循环体
}
// 示例
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
检查条件 → true → 执行循环体 → 检查条件 → ...
→ false → 结束循环
// 不确定循环次数
let input;
while (input !== "exit") {
input = prompt("输入exit退出");
}
// 读取数据直到结束
let data = [];
while (hasMoreData()) {
data.push(readNext());
}
// 处理队列
let queue = [1, 2, 3, 4, 5];
while (queue.length > 0) {
let item = queue.shift();
console.log(item);
}
// 避免无限循环
let i = 0;
while (i < 5) {
console.log(i);
// 忘记i++会导致无限循环
i++;
}
// 条件一开始就为假
let j = 10;
while (j < 5) {
console.log(j); // 不执行
}
do-while循环至少执行一次。
do {
// 循环体
} while (条件);
// 示例
let i = 0;
do {
console.log(i);
i++;
} while (i < 5);
// while：先检查后执行
let a = 10;
while (a < 5) {
console.log(a); // 不执行
}
// do-while：先执行后检查
let b = 10;
do {
console.log(b); // 执行一次，输出10
} while (b < 5);
// 菜单选择
let choice;
do {
choice = getMenuChoice();
processChoice(choice);
} while (choice !== "exit");
// 输入验证
let input;
do {
input = prompt("请输入正数：");
} while (isNaN(input) || Number(input) <= 0);
// 游戏循环
let playing = true;
do {
updateGame();
renderGame();
playing = checkContinue();
} while (playing);
for-in循环遍历对象的可枚举属性。
let user = {
name: "东巴文",
age: 1,
city: "北京"
};
for (let key in user) {
console.log(key, user[key]);
}
// name 东巴文
// age 1
// city 北京
let arr = ["东", "巴", "文"];
for (let index in arr) {
console.log(index, arr[index]);
}
// 0 东
// 1 巴
// 2 文
// 遍历继承的属性
let parent = { a: 1 };
let child = Object.create(parent);
child.b = 2;
for (let key in child) {
console.log(key); // b, a
}
// 只遍历自身属性
for (let key in child) {
if (child.hasOwnProperty(key)) {
console.log(key); // b
}
}
// 不推荐用于数组遍历
let arr = [1, 2, 3];
arr.customProp = "东巴文";
for (let i in arr) {
console.log(i); // 0, 1, 2, customProp
}
for-of循环遍历可迭代对象的值（ES6）。
let arr = ["东", "巴", "文"];
for (let value of arr) {
console.log(value);
}
// 东
// 巴
// 文
let str = "东巴文";
for (let char of str) {
console.log(char);
}
// 东
// 巴
// 文
// Map
let map = new Map([
["name", "东巴文"],
["age", 1]
]);
for (let [key, value] of map) {
console.log(key, value);
}
// Set
let set = new Set([1, 2, 3, 2, 1]);
for (let value of set) {
console.log(value); // 1 2 3
}
| 特性 | for-in | for-of | 东巴文建议 |
|---|---|---|---|
| 遍历内容 | 键（索引/属性名） | 值 | - |
| 适用对象 | 对象 | 可迭代对象 | - |
| 数组遍历 | 不推荐 | 推荐 | 用for-of |
| 对象遍历 | 推荐 | 不适用 | 用for-in |
| 继承属性 | 会遍历 | 不会 | - |
break语句用于跳出循环。
for (let i = 0; i < 10; i++) {
if (i === 5) {
break;
}
console.log(i); // 0 1 2 3 4
}
// 查找元素
let arr = [1, 2, 3, 4, 5];
let target = 3;
let found = false;
for (let i = 0; i < arr.length; i++) {
if (arr[i] === target) {
found = true;
break;
}
}
// 提前退出
while (true) {
let input = prompt("输入exit退出");
if (input === "exit") {
break;
}
}
continue语句用于跳过当前迭代，继续下一次。
for (let i = 0; i < 5; i++) {
if (i === 2) {
continue;
}
console.log(i); // 0 1 3 4
}
// 过滤奇数
for (let i = 1; i <= 10; i++) {
if (i % 2 !== 0) {
continue;
}
console.log(i); // 2 4 6 8 10
}
// 跳过无效数据
let data = [1, null, 2, undefined, 3, "", 4];
for (let item of data) {
if (!item) {
continue;
}
console.log(item); // 1 2 3 4
}
标签用于标识循环，配合break和continue使用。
outer: for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
if (i === 1 && j === 1) {
break outer; // 跳出外层循环
}
console.log(i, j);
}
}
// 查找二维数组
let matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
let target = 5;
let found = false;
search: for (let i = 0; i < matrix.length; i++) {
for (let j = 0; j < matrix[i].length; j++) {
if (matrix[i][j] === target) {
console.log(`找到${target}在位置[${i}][${j}]`);
found = true;
break search;
}
}
}
// continue标签
outer: for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
if (j === 1) {
continue outer; // 跳到外层循环的下一次迭代
}
console.log(i, j);
}
}
// 打印乘法表
for (let i = 1; i <= 9; i++) {
let row = "";
for (let j = 1; j <= i; j++) {
row += `${j}×${i}=${i * j} `;
}
console.log(row);
}
// 遍历二维数组
let matrix = [
[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]);
}
}
// 缓存长度
let arr = [1, 2, 3, 4, 5];
// 不推荐
for (let i = 0; i < arr.length; i++) { }
// 推荐
for (let i = 0, len = arr.length; i < len; i++) { }
// 或者使用for-of
for (let item of arr) { }
| 循环类型 | 适用场景 | 东巴文建议 |
|---|---|---|
| for | 需要索引、精确控制 | 通用场景 |
| while | 不确定循环次数 | 条件循环 |
| do-while | 至少执行一次 | 输入验证 |
| for-in | 遍历对象属性 | 对象遍历 |
| for-of | 遍历可迭代对象 | 数组遍历首选 |
掌握了循环语句后，让我们继续学习：
东巴文（db-w.cn） - 让编程学习更简单
🔄 东巴文寄语：循环是程序自动化的基础，掌握各种循环的特点和使用场景，选择最合适的循环方式，能让你的代码更高效、更清晰。在 db-w.cn，我们帮你掌握每一个技巧！