JavaScript数组常用迭代方法用法

作者:技术拾光

时间:2026-07-18

浏览:415

JavaScript数组迭代方法各有用途:forEach执行副作用且无返回值;map通过回调生成新数组;filter按条件筛选返回新数组;some检测是否有元素满足条件,every检测是否全部满足,均支持短路;reduce将数组累积为单一值。选择恰当方法可提高代码效率与清晰度。

文章目录
Ja vaScript 数组的迭代方法,各有各的使命:forEach 只管干活,不返回任何东西;map 负责逐项变身,生成一个全新的数组;filter 像筛子,只留下符合条件的项;some 和 every 做布尔判断,还能中途短路;reduce 则把一堆值聚合成一个结果。

JavaScript数组常用迭代方法用法

掌握 Ja vaScript 数组的迭代方法并不困难,关键在于根据不同场景选择合适的工具。每一种方法都有其特定的用途,错误使用反而会增加代码复杂度。接下来逐一详细讲解。

forEach:只遍历,不产出新数组

forEach 最适合执行副作用操作,例如打印日志、发送请求或修改外部变量。它没有返回值,返回 undefined,并且无法中断循环——break 和 return 在此处无效。

  • 回调函数接收三个参数:当前元素、索引和原数组(后两个参数可省略)
  • 遇到稀疏数组的空位会自动跳过,例如 [1, , 3] 中的空位不会触发回调
  • 示例:[2, 4, 6].forEach(n => console.log(n * 2)) 依次输出 4、8、12

map:逐项转换,生成新数组

当你需要将原数组“变形”为一个新数组时,map 是最佳选择。原数组保持不变,新数组长度与原数组相同,每个位置都是经过处理后的结果。

  • 回调函数必须有返回值,否则新数组对应位置会变成 undefined
  • 常见用法是格式化数据,例如从对象数组中提取字段:users.map(u => u.name)
  • 注意:稀疏数组的空位不会被处理,但新数组对应位置仍为 undefined

filter:按条件筛选,返回符合条件的子集

filter 只保留满足条件的项,组成一个新数组。逻辑清晰,代码简洁,非常适合替代手写 for 循环进行筛选。

  • 回调函数返回 true 的项被保留,返回 false 或其他假值则被丢弃
  • 常见应用场景:表单校验、列表搜索、状态过滤,例如 tasks.filter(t => t.done) 只获取已完成的任务
  • 返回的新数组长度可能为 0,原数组完全不受影响

some 和 every:做布尔判断,一句话代替循环检查

这两个方法不生成新数组,而是快速回答“是否存在”或“是否全部”这类问题。

  • some():只要有一个元素满足条件就返回 true,全部不满足则返回 false
  • every():所有元素都满足才返回 true,只要有一个不满足就返回 false
  • 非常适合权限校验、表单完整性检查、数据合规性验证等场景
  • 遇到第一个能确定结果的项即停止遍历,这种短路机制可以节省性能

reduce:聚合计算,把数组“压成一个值”

reduce 功能最强大也最灵活,适用于求和、拼接字符串、扁平化、分组统计、对象转换等复杂归约操作。

  • 接收两个参数:回调函数和可选的初始值(强烈建议显式传入初始值,避免意外错误)
  • 回调函数的参数顺序:累加器、当前项、索引、原数组
  • 如果不传初始值,第一次调用会以第 0 项作为累加器、第 1 项作为当前值;但如果数组为空且没有初始值,则会报错
  • 示例:[1,2,3].reduce((sum, n) => sum + n, 0) 返回 6

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章