异常教程

js 遍历数组（超详细）

更新时间:

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

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

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

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

在 JavaScript 开发中，数组是数据存储和操作的核心容器之一。无论是处理用户输入、解析 API 响应，还是实现复杂算法，开发者都需要频繁地遍历数组以完成特定任务。然而，对于编程初学者而言，如何高效、优雅地遍历数组并执行操作，常常是一个需要深入理解的难点。本文将从基础到进阶，结合生动的比喻和实际案例，系统讲解 JavaScript 中的数组遍历方法，帮助读者掌握这一核心技能。

一、传统遍历方法：基础但灵活的循环

1.1 for 循环：逐项访问的“线性扫描”

for 循环是最基础的遍历方式，其核心逻辑是通过索引逐个访问数组元素。可以将其想象为在图书馆书架前逐本查看书籍：

const books = ["JavaScript 权威指南", "算法图解", "设计模式"];  
for (let i = 0; i < books.length; i++) {  
  console.log(`第 ${i + 1} 本书：${books[i]}`);  
}

特点：

  • 精确控制遍历过程，可随时修改索引或终止循环。
  • 适合需要操作索引或与外部变量交互的场景。

1.2 while 和 do-while 循环：动态条件下的“循环门”

当遍历逻辑依赖动态条件时，while 或 do-while 循环更具灵活性：

let i = 0;  
while (i < books.length) {  
  console.log(books[i]);  
  i++; // 必须显式更新索引，否则会导致死循环  
}

注意：需手动维护索引变量，稍有不慎可能导致逻辑错误。

二、ES6 新增方法：简洁且功能丰富的“工具箱”

2.1 forEach()：无返回值的“遍历者”

ES6 引入的 forEach() 方法简化了遍历代码，但不返回新数组，适合执行副作用操作（如打印或修改外部变量）：

books.forEach((book, index) => {  
  console.log(`索引 ${index} 的书籍：${book}`);  
});

比喻：如同请快递员逐个送货，无需关心包裹去向，只需确保每一步操作正确即可。

2.2 map()：生成新数组的“变形工厂”

当需要对每个元素进行转换并返回新数组时，map() 是最佳选择：

const prices = [29.99, 49.90, 35.50];  
const discountedPrices = prices.map(price => price * 0.8);  
console.log(discountedPrices); // [23.992, 39.92, 28.4]

关键点：

  • 永远返回与原数组长度相同的数组。
  • 避免在 map() 中修改原数组，否则可能导致不可预测的结果。

2.3 filter()：条件筛选的“智能筛子”

filter() 可根据条件筛选元素，返回符合条件的新数组：

const expensiveBooks = books.filter((book, index) => index % 2 === 0);  
// 假设 books 长度为3，则返回索引0和2的元素

进阶用法：结合闭包或外部状态实现动态条件判断。

2.4 reduce()：聚合计算的“数据熔炉”

reduce() 将数组元素归约成单一值，常用于求和、计数或对象合并：

const total = prices.reduce((acc, current) => acc + current, 0);  
console.log(total); // 115.39

核心逻辑：

  • acc（累加器）保存中间结果。
  • 初始值可自定义，若省略则默认为数组第一个元素。

2.5 其他方法：some()、every() 和 find()

  • some()：检测数组中是否存在至少一个元素满足条件。
  • every()：检测所有元素是否均满足条件。
  • find()：返回第一个满足条件的元素。
const foundBook = books.find(book => book.includes("算法"));  
console.log(foundBook); // "算法图解"

三、进阶技巧：组合与扩展

3.1 结合回调函数与箭头函数

通过高阶函数（如 map 和 filter）的组合，可实现复杂逻辑：

const expensiveBooks = books  
  .filter((_, index) => index % 2 === 0) // 筛选偶数索引  
  .map(book => ({ title: book, price: 29.99 })); // 转换为对象数组

3.2 处理多维数组：递归与 flatMap

对于嵌套数组，flatMap() 可简化层级：

const nested = [[1, 2], [3, 4], [5, 6]];  
const flattened = nested.flatMap(arr => arr); // [1,2,3,4,5,6]

四、性能优化与常见陷阱

4.1 时间复杂度：O(n) 的线性操作

所有遍历方法的时间复杂度均为 O(n)，但实际性能可能因具体实现而异。例如：

  • for 循环通常比 forEach() 更快，因其无需维护额外的函数上下文。
  • 避免在遍历过程中修改原数组长度，否则可能导致元素跳过或重复。

4.2 常见错误与解决方案

  • 错误1：忘记返回值： 
    // 错误示例：期望返回新数组，但实际返回 undefined  
const doubled = [1,2,3].map(num => num * 2); // 正确写法  
const wrong = [1,2,3].map(num => num * 2); // 错误写法（未赋值）
  • 错误2：作用域问题： 
    const arr = [1,2,3];  
arr.forEach(() => console.log(this)); // 输出 window 对象（非严格模式）

    解决方案：使用箭头函数绑定外部 this，或通过参数传递上下文。

五、实战案例：电商购物车功能

5.1 计算总价与优惠价

const cart = [  
  { name: "T恤", price: 59.9, quantity: 2 },  
  { name: "背包", price: 129.9, quantity: 1 }  
];  

const total = cart.reduce((acc, item) => acc + item.price * item.quantity, 0);  

// 应用满减优惠  
const discountedTotal = total >= 200 ? total * 0.9 : total;

5.2 过滤库存不足的商品

const availableItems = cart.filter(item => item.quantity > 0);

六、未来展望：ES 新特性与最佳实践

随着 ES 标准的演进，开发者可期待更简洁的遍历语法（如管道操作符 |>）。当前最佳实践包括：

  • 优先使用数组方法：代码更易读且减少 bug。
  • 避免多层嵌套循环：可通过 map 和 filter 组合替代。
  • 性能敏感场景：优先选择 for 循环或 WebAssembly 优化。

结论

掌握 JavaScript 遍历数组的方法，是构建高效代码和解决实际问题的基础。从传统的 for 循环到 ES6 的 map 和 reduce，开发者可根据需求灵活选择工具。通过结合案例、理解性能差异并避免常见陷阱，读者能够编写出既简洁又可靠的代码。随着实践的深入，这些方法将成为应对复杂项目的核心技能。

（全文约 1680 字）

最新发布

查看更多文章