JavaScript for 循环

for 循环的概念

for 循环是 JavaScript 中最常用的循环语句之一，它用于重复执行一段代码，直到指定的条件不再满足。for 循环特别适合已知循环次数的情况。

for 循环的基本语法

for (initialization; condition; increment) {
  // 循环体代码
}

语法说明：

• initialization：初始化语句，在循环开始前执行一次
• condition：条件表达式，每次循环前检查，如果为 true，则执行循环体；如果为 false，则退出循环
• increment：递增语句，在每次循环体执行后执行

for 循环的示例

1. 基本用法

// 循环 5 次，输出 0 到 4
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// 输出:
// 0
// 1
// 2
// 3
// 4

2. 递减循环

// 循环 5 次，输出 4 到 0
for (let i = 4; i >= 0; i--) {
  console.log(i);
}

// 输出:
// 4
// 3
// 2
// 1
// 0

3. 自定义步长

// 循环输出 0, 2, 4, 6, 8
for (let i = 0; i < 10; i += 2) {
  console.log(i);
}

// 输出:
// 0
// 2
// 4
// 6
// 8

4. 遍历数组

const fruits = ["apple", "banana", "orange", "grape"];

// 使用索引遍历数组
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// 输出:
// apple
// banana
// orange
// grape

5. 计算总和

const numbers = [1, 2, 3, 4, 5];
let sum = 0;

for (let i = 0; i < numbers.length; i++) {
  sum += numbers[i];
}

console.log("Sum:", sum); // 输出: Sum: 15

6. 嵌套 for 循环

// 输出乘法表
for (let i = 1; i <= 9; i++) {
  let row = "";
  for (let j = 1; j <= i; j++) {
    row += `${j} × ${i} = ${i * j}\t`;
  }
  console.log(row);
}

// 输出:
// 1 × 1 = 1
// 1 × 2 = 2	2 × 2 = 4
// 1 × 3 = 3	2 × 3 = 6	3 × 3 = 9
// ...

for 循环的变体

1. for...in 循环

for...in 循环用于遍历对象的可枚举属性：

const person = {
  name: "John",
  age: 30,
  city: "New York",
};

for (let key in person) {
  console.log(key + ": " + person[key]);
}

// 输出:
// name: John
// age: 30
// city: New York

2. for...of 循环

for...of 循环用于遍历可迭代对象（如数组、字符串、Map、Set 等）：

// 遍历数组
const fruits = ["apple", "banana", "orange"];
for (let fruit of fruits) {
  console.log(fruit);
}

// 输出:
// apple
// banana
// orange

// 遍历字符串
const str = "Hello";
for (let char of str) {
  console.log(char);
}

// 输出:
// H
// e
// l
// l
// o

3. forEach() 方法

数组的 forEach() 方法也可以用于遍历数组：

const fruits = ["apple", "banana", "orange"];
fruits.forEach(function (fruit, index) {
  console.log(index + ": " + fruit);
});

// 输出:
// 0: apple
// 1: banana
// 2: orange

// 使用箭头函数
fruits.forEach((fruit, index) => {
  console.log(index + ": " + fruit);
});

for 循环的最佳实践

1. 使用 let 声明循环变量

使用 let 声明循环变量，而不是 var，以避免作用域问题：

// 好的做法
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// 不好的做法
for (var i = 0; i < 5; i++) {
  console.log(i);
}

2. 缓存数组长度

在遍历数组时，缓存数组长度可以提高性能：

// 好的做法
const fruits = ["apple", "banana", "orange"];
for (let i = 0, len = fruits.length; i < len; i++) {
  console.log(fruits[i]);
}

// 不好的做法
const fruits = ["apple", "banana", "orange"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

3. 避免在循环体中修改循环变量

避免在循环体中修改循环变量，以免导致意外的循环行为：

// 不好的做法
for (let i = 0; i < 5; i++) {
  console.log(i);
  i++; // 循环变量被修改，可能导致意外行为
}

// 输出:
// 0
// 2
// 4

4. 合理使用循环类型

根据不同的场景选择合适的循环类型：

• for：已知循环次数的情况
• for...in：遍历对象的属性
• for...of：遍历可迭代对象
• forEach()：遍历数组并对每个元素执行操作

5. 避免无限循环

确保循环条件最终会变为 false，以避免无限循环：

// 错误：无限循环，因为 i 始终小于 5
for (let i = 0; i < 5; i--) {
  console.log(i);
}

// 正确
for (let i = 0; i < 5; i++) {
  console.log(i);
}

for 循环的常见错误

1. 初始化语句错误

// 错误：初始化语句缺少分号
for (let i = 0 i < 5; i++) {
  console.log(i);
}

// 正确
for (let i = 0; i < 5; i++) {
  console.log(i);
}

2. 条件表达式错误

// 错误：条件表达式使用了赋值运算符 = 而不是比较运算符 <
for (let i = 0; (i = 5); i++) {
  console.log(i);
}

// 正确
for (let i = 0; i < 5; i++) {
  console.log(i);
}

3. 递增语句错误

// 错误：递增语句缺少分号
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// 正确
for (let i = 0; i < 5; i++) {
  console.log(i);
}

4. 循环体错误

// 错误：循环体缺少花括号，只有第一条语句会被循环执行
for (let i = 0; i < 5; i++) console.log(i);
console.log("Loop iteration"); // 这条语句只会执行一次

// 正确
for (let i = 0; i < 5; i++) {
  console.log(i);
  console.log("Loop iteration");
}

5. 数组遍历错误

// 错误：使用 length 作为循环变量的初始值
const fruits = ["apple", "banana", "orange"];
for (let i = fruits.length; i > 0; i--) {
  console.log(fruits[i]); // 会输出 undefined，因为索引从 0 开始
}

// 正确
const fruits = ["apple", "banana", "orange"];
for (let i = fruits.length - 1; i >= 0; i--) {
  console.log(fruits[i]);
}

for 循环与其他循环的比较

1. for 循环 vs while 循环

• for 循环：适合已知循环次数的情况
• while 循环：适合未知循环次数的情况

// for 循环：已知循环次数
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// while 循环：未知循环次数
let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

2. for 循环 vs forEach() 方法

• for 循环：更灵活，可以使用 break 和 continue 语句
• forEach() 方法：更简洁，适合对数组的每个元素执行操作

// for 循环：可以使用 break
for (let i = 0; i < fruits.length; i++) {
  if (fruits[i] === "banana") {
    break; // 找到 banana 后退出循环
  }
  console.log(fruits[i]);
}

// forEach() 方法：不能使用 break
fruits.forEach(function (fruit) {
  if (fruit === "banana") {
    return; // 只能跳过当前迭代，不能退出整个循环
  }
  console.log(fruit);
});

小结

for 循环是 JavaScript 中最常用的循环语句之一，它用于重复执行一段代码，直到指定的条件不再满足。for 循环有多种变体，包括基本的 for 循环、for...in 循环和 for...of 循环。在使用 for 循环时，应该遵循最佳实践，如使用 let 声明循环变量、缓存数组长度、避免在循环体中修改循环变量等，以提高代码的可读性和性能。