JavaScript基础教程（三十）for 循环：循环之力，解锁JavaScript for循环的终极指南

基础语法：不止于循环

// 传统for循环 - 精准控制
for (let i = 0; i < 5; i++) {
  console.log(i) // 0,1,2,3,4
}

// 遍历数组的首选方式
const arr = [10, 20, 30]
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]) // 10,20,30
}

for...of：迭代器的现代化选择

// 遍历可迭代对象（数组、字符串、Map、Set）
const list = [1, 2, 3]
for (const value of list) {
  console.log(value) // 1,2,3
}

// 直接获取索引和值
for (const [index, value] of list.entries()) {
  console.log(index, value) // 0 1, 1 2, 2 3
}

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 (let i = 0; i < arr.length; i++) {
  // ...
}

// 优化后：缓存长度提升性能
for (let i = 0, len = arr.length; i < len; i++) {
  // ...
}

掌握break和continue控制流程：

// 使用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
}

异步循环处理

现代JavaScript提供了强大的异步循环支持：

// 使用for循环处理异步任务
async function processArray(array) {
  for (const item of array) {
    await processItem(item) // 按顺序处理每个项目
  }
}

选择正确的循环方式能让代码性能提升数倍。传统for循环在处理大数据量时性能最优，for...of提供了更简洁的语法，而for...in则是遍历对象属性的不二之选。根据实际场景选择合适的循环方式，让你的代码既高效又易于维护。