JS数组遍历速查手册按6类场景归类:取值处理用map/forEach/for...of;筛选用filter/find/findIndex;聚合用reduce/some/every;查找存在性用includes/indexOf;修改原数组用push/pop/shift/unshift/splice;异步遍历用for...of+await。每种附口诀与陷阱,兼容性标注清晰。

编写一份实用的 JS 数组遍历速查手册,核心是把常用方法按使用场景归类,讲清「做什么、何时用、注意什么」,避免堆砌语法。下面是一个结构清晰、开箱即用的编写思路和内容框架:
明确目标:解决什么问题?
不是罗列所有 API,而是帮开发者在实际开发中快速判断:
- 想改原数组?还是生成新数组?
- 需要中断循环吗?
- 是否关心索引或键名?
- 是否涉及异步操作?
- 兼容性有无硬性要求(如需支持 IE)?
按目的组织方法,不按字母或出现顺序
把最常遇到的 6 类需求作为主干,每类下列出匹配的方法、一句话作用、典型代码片段和关键提醒:
- 取值并处理(不改变原数组):map() —— 返回新数组;forEach() —— 仅执行,无返回值;for...of —— 灵活可控,支持 break/continue
- 筛选元素:filter() —— 返回满足条件的新数组;find() / findIndex() —— 找第一个匹配项及其下标
- 聚合计算:reduce() —— 累加、扁平化、分组等都靠它;some() / every() —— 布尔判定,短路执行
- 查找存在性:includes() —— 判断值是否存在(浅比较);indexOf() / lastIndexOf() —— 返回位置,可兼容老环境
- 修改原数组:push() / pop() / shift() / unshift() / splice() —— 明确副作用,避免误用于纯函数场景
- 遍历 + 异步等待:for...of + await(推荐);避免 forEach + await(不会按序等待)
每种方法配「一句话口诀 + 小陷阱」
帮助记忆和避坑,例如:
- map() 不改变原数组,但若回调里手动改了对象属性,引用对象仍会被影响
- forEach() 中 return 无效,不能用来跳出循环;要用 for 或 for...of
- reduce() 初始值没传时,第一次回调的 prev 是数组第 0 项,容易越界出错
- for...in 会遍历原型链上的可枚举属性,数组慎用;只适合对象
附上兼容性速查栏(一行式)
标注主流方法的最低支持版本,比如:
- map / filter / reduce / find:IE9+
- for...of / includes / flat:IE 完全不支持,需 Babel 或替代写法
- Array.from() / Array.isArray():IE9+(from 在 IE 中需 polyfill)


















