异常教程

js for（长文讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在 JavaScript 开发中，for 循环是控制程序流程的核心工具之一。它像一把瑞士军刀，能够灵活应对从简单遍历到复杂迭代的多种场景。无论是处理数组、对象，还是实现异步操作，掌握不同 for 结构的特性和使用场景，将显著提升代码的效率和可读性。本文将从基础语法到高级技巧，结合实际案例，帮助开发者系统化理解 js for 的全貌。

一、基础 for 循环：循环的起点

1.1 基础语法与执行逻辑

最基本的 for 循环由三部分构成：初始化、条件判断、迭代操作。其语法结构如下：

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

执行流程：

  1. 初始化：定义循环变量并赋值（如 let i = 0）。
  2. 条件判断：检查条件是否为 true，若不满足则退出循环。
  3. 执行循环体：运行代码块中的内容。
  4. 迭代操作：更新循环变量（如 i++）。
  5. 重复步骤 2-4，直到条件为 false。

示例：遍历数字 1 到 5 的平方：

for (let i = 1; i <= 5; i++) {  
  console.log(`数字 ${i} 的平方是 ${i * i}`);  
}  
// 输出：  
// 数字 1 的平方是 1  
// ...  
// 数字 5 的平方是 25

1.2 典型应用场景

  • 固定次数的重复操作：如遍历已知长度的数组。
  • 数学计算或算法实现：例如计算斐波那契数列前 N 项。

二、for...in 循环：探索对象的隐秘角落

2.1 对象属性遍历的利器

for...in 循环专门用于遍历对象的可枚举属性。其语法简洁：

for (变量 in 对象) {  
  // 变量是属性名，对象[变量]是属性值  
}

示例：遍历用户信息对象：

const user = {  
  name: "Alice",  
  age: 25,  
  city: "New York"  
};  

for (const key in user) {  
  console.log(`属性名：${key}，值：${user[key]}`);  
}  
// 输出：  
// 属性名：name，值：Alice  
// 属性名：age，值：25  
// 属性名：city，值：New York

2.2 注意事项与优化技巧

  • 继承属性：默认遍历对象自身和原型链上的可枚举属性，可通过 hasOwnProperty() 过滤原型属性。
  • 属性名顺序：对象属性的遍历顺序可能与定义顺序不一致（ES5 之前无严格保证，ES6 后新增属性按插入顺序排列）。

优化示例：排除原型属性：

for (const key in user) {  
  if (user.hasOwnProperty(key)) {  
    console.log(`用户属性：${key} = ${user[key]}`);  
  }  
}

三、for...of 循环：数组与迭代器的优雅共舞

3.1 专为可迭代对象设计

for...of 是 ES6 引入的新特性，专门用于遍历数组、字符串、Map、Set 等可迭代对象。其语法简洁直观：

for (变量 of 可迭代对象) {  
  // 变量是当前元素的值  
}

示例：遍历数组元素：

const fruits = ["苹果", "香蕉", "橙子"];  
for (const fruit of fruits) {  
  console.log(fruit);  
}  
// 输出：  
// 苹果  
// 香蕉  
// 橙子

3.2 与 for...in 的对比

  • for...in 遍历对象属性的键，而 for...of 遍历数组或可迭代对象的值。
  • 性能差异：遍历数组时，for...of 更高效，因其直接访问元素值，无需通过键查找。

比喻：

  • for...in 像是“钥匙管理员”，负责列举所有“钥匙”（属性名）。
  • for...of 像是“仓库保管员”，直接取出每个“货物”（元素值）。

四、for 循环的高级用法与扩展

4.1 结合数组方法的双重威力

for 循环可与 map()、filter() 等数组方法结合，实现复杂逻辑。例如，筛选并处理数组元素：

const numbers = [1, 2, 3, 4, 5];  
const evenSquares = [];  

for (const num of numbers) {  
  if (num % 2 === 0) {  
    evenSquares.push(num * num);  
  }  
}  
console.log(evenSquares); // 输出：[4, 16]

4.2 异步操作的挑战与解决方案

传统 for 循环在处理异步任务时容易陷入“回调地狱”。ES2017 引入的 for...await 结构，可优雅解决此问题：

async function fetchUsers() {  
  const userIds = [1, 2, 3];  
  const users = [];  

  for (const id of userIds) {  
    const user = await fetchUserById(id); // 假设是异步函数  
    users.push(user);  
  }  
  return users;  
}

五、常见误区与最佳实践

5.1 变量作用域陷阱

在传统 for 循环中，若循环体内定义的变量未声明作用域（如未使用 let），可能导致意外行为：

for (var i = 0; i < 3; i++) {  
  setTimeout(() => console.log(i), 100);  
}  
// 输出：3, 3, 3（因 var 声明的变量作用域为函数外）

解决方案：使用 let 限制块级作用域：

for (let i = 0; i < 3; i++) {  
  setTimeout(() => console.log(i), 100);  
}  
// 输出：0, 1, 2

5.2 性能优化技巧

  • 避免在循环体内执行耗时操作：如数据库查询或复杂的计算，可考虑拆分或异步化。
  • 提前计算条件：将循环条件的计算移到循环外部，减少重复计算。

六、实战案例：综合应用 for 循环

6.1 场景：购物车总价计算

假设需要根据商品列表计算总价，其中部分商品有折扣：

const cart = [  
  { name: "笔记本", price: 20, discount: 0.8 },  
  { name: "笔", price: 1.5 },  
  { name: "文件夹", price: 5, discount: 0.9 },  
];  

let total = 0;  

for (const item of cart) {  
  const price = item.price * (item.discount || 1);  
  total += price;  
}  
console.log(`总价：${total.toFixed(2)} 元`); // 输出：总价：20.5 元

6.2 代码分析

  • 遍历对象数组：使用 for...of 遍历商品列表。
  • 条件处理：通过 item.discount || 1 确保无折扣时默认为 1。
  • 变量复用：通过 total 累加总价，体现 for 循环的“累计”特性。

结论

js for 循环家族（for、for...in、for...of、for...await）是 JavaScript 开发中的“多面手”，其核心价值在于通过结构化的方式解决重复性任务。开发者需根据场景选择最合适的工具：

  • 基础 for：固定次数的迭代。
  • for...in：遍历对象属性。
  • for...of：处理可迭代对象的值。
  • for...await：异步任务的顺序执行。

掌握这些工具的用法与限制，结合实际案例练习，能显著提升代码质量和开发效率。建议读者从简单案例入手，逐步挑战复杂场景，最终将 for 循环内化为编程思维的一部分。

最新发布

查看更多文章