Javascript 中循环的使用

JavaScript 提供了多种循环结构来处理重复任务，最常见的包括 for、while 和 do...while 循环，以及高级的 for...in、for...of 循环和数组的 forEach、map 等方法。合理使用这些循环结构可以提高代码的效率和可读性。

1. 基础用法

1.1 `for` 循环

for 循环是最常用的循环结构之一，适合已知循环次数的情况。

javascript 复制代码

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

1.2 `while` 循环

while 循环适用于在满足条件时重复执行代码块。

javascript 复制代码

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

1.3 `do...while` 循环

do...while 循环至少执行一次代码块，然后在满足条件时继续执行。

javascript 复制代码

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

2. 高级操作

2.1 `for...in` 循环

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

javascript 复制代码

const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
  console.log(key, obj[key]);
}

2.2 `for...of` 循环

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

javascript 复制代码

const arr = [1, 2, 3];
for (let value of arr) {
  console.log(value);
}

2.3 `forEach` 方法

数组的 forEach 方法提供了一种更简洁的遍历方式。

javascript 复制代码

const arr = [1, 2, 3];
arr.forEach((value, index) => {
  console.log(index, value);
});

2.4 `map` 方法

map 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数。

javascript 复制代码

const arr = [1, 2, 3];
const doubled = arr.map(x => x * 2);
console.log(doubled); // [2, 4, 6]

3. 副作用与注意事项

3.1 无限循环

忘记更新循环变量可能导致无限循环。

javascript 复制代码

// 错误示例：忘记更新 i
for (let i = 0; i < 5;) {
  console.log(i);
}

3.2 修改循环变量

在循环中修改循环变量可能导致意外行为。

javascript 复制代码

// 错误示例：在循环中修改循环变量
for (let i = 0; i < 5; i++) {
  console.log(i);
  i--; // 会导致无限循环
}

3.3 使用 `break` 和 `continue`

break 用于跳出循环，continue 用于跳过当前迭代。

javascript 复制代码

for (let i = 0; i < 10; i++) {
  if (i === 3) continue; // 跳过 i=3
  if (i === 7) break;    // 在 i=7 时跳出循环
  console.log(i);
}

4. 推荐方案

优先使用 for...of ：对于数组和可迭代对象，优先使用 for...of 循环，因为它更简洁且不易出错。

javascript 复制代码

const arr = [1, 2, 3];
for (let value of arr) {
  console.log(value);
}

使用函数式方法 ：对于数组操作，优先使用 map、filter、reduce 等函数式方法，它们更易读且不易产生副作用。

javascript 复制代码

const arr = [1, 2, 3];
const doubled = arr.map(x => x * 2);

避免修改循环变量：在循环中避免修改循环变量，以防止意外行为。
合理使用 break 和 continue ：在适当情况下使用 break 和 continue 来控制循环流程，但要避免过度使用导致代码难以理解。

Javascript 中循环的使用