JavaScript for 循环

for 循环是 JavaScript 中最灵活的循环语句，通过初始化、条件判断、迭代更新三部分控制循环流程。

基本语法

for (初始化; 条件; 迭代) {
    // 循环体
}

基本用法

// 标准形式
for (let i = 0; i < 5; i++) {
    console.log(i);
}
// 输出：0, 1, 2, 3, 4

// 执行顺序：
// 1. 初始化：let i = 0（只执行一次）
// 2. 条件判断：i < 5
// 3. 循环体执行
// 4. 迭代更新：i++
// 5. 重复 2-4 直到条件为 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 跳出
}

// 多变量控制
for (let i = 0, j = 10; i < j; i++, j--) {
    console.log(i, j);
}

遍历数组

const arr = ['a', 'b', 'c', 'd'];

// 索引遍历
for (let i = 0; i < arr.length; i++) {
    console.log(i, arr[i]);
}

// 倒序遍历
for (let i = arr.length - 1; i >= 0; i--) {
    console.log(arr[i]);
}

// 缓存长度（优化性能）
for (let i = 0, len = arr.length; i < len; i++) {
    console.log(arr[i]);
}

嵌套循环

// 九九乘法表
for (let i = 1; i <= 9; i++) {
    let row = '';
    for (let j = 1; j <= i; j++) {
        row += `${j}×${i}=${i*j} `;
    }
    console.log(row);
}

// 遍历二维数组
const 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]);
    }
}

实际应用

// 数组求和
const numbers = [10, 20, 30, 40, 50];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
}
console.log(sum);  // 150

// 查找元素
const arr = [3, 7, 2, 9, 5];
let target = 9;
let index = -1;
for (let i = 0; i < arr.length; i++) {
    if (arr[i] === target) {
        index = i;
        break;
    }
}

// 过滤数组
const nums = [1, 2, 3, 4, 5, 6];
const evens = [];
for (let i = 0; i < nums.length; i++) {
    if (nums[i] % 2 === 0) {
        evens.push(nums[i]);
    }
}
console.log(evens);  // [2, 4, 6]

循环控制

// break 跳出循环
for (let i = 0; i < 10; i++) {
    if (i === 5) break;
    console.log(i);  // 0, 1, 2, 3, 4
}

// continue 跳过当前迭代
for (let i = 0; i < 5; i++) {
    if (i === 2) continue;
    console.log(i);  // 0, 1, 3, 4
}

// 带标签跳出外层循环
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);
    }
}

for 循环变体

// for...of：遍历可迭代对象的值
const arr = ['a', 'b', 'c'];
for (const item of arr) {
    console.log(item);  // a, b, c
}

// for...of 遍历字符串
for (const char of 'hello') {
    console.log(char);  // h, e, l, l, o
}

// for...in：遍历对象的可枚举属性
const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
    console.log(key, obj[key]);  // a 1, b 2, c 3
}

// for...in 遍历数组索引（不推荐）
for (const index in arr) {
    console.log(index, arr[index]);  // 0 a, 1 b, 2 c
}

注意事项

• 使用 let 声明循环变量，避免变量提升问题
• 循环条件中的 .length 每次都会计算，大数组可缓存
• 避免在循环中修改数组长度
• for...in 遍历的是索引/键，for...of 遍历的是值

// 变量作用域
for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100);
}
// 输出：0, 1, 2（let 有块级作用域）

for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100);
}
// 输出：3, 3, 3（var 无块级作用域，共享同一个 i）

// 循环中修改数组（危险操作）
const list = [1, 2, 3, 4];
for (let i = 0; i < list.length; i++) {
    if (list[i] === 2) {
        list.splice(i, 1);  // 删除元素后索引错位
        i--;  // 需要调整索引
    }
}

要点总结

• for 循环三要素：初始化、条件、迭代
• 执行顺序：初始化 → 条件判断 → 循环体 → 迭代 → 条件判断...
• 使用 let 声明循环变量，确保每次迭代独立作用域
• for...of 遍历值，for...in 遍历键/索引
• break 跳出循环，continue 跳过当前迭代
• 避免在循环中动态修改数组长度