难道你还在用 for 循环遍历数组吗?——2025 年了,JavaScript 早已把「一把梭」进化成了「十八般兵器」!今天,我们用 5 分钟把 JS 数组 20+ 方法 梳理成一份「瑞士军刀」速查表,复制即可用,让你一次选对武器,告别手写循环的史前时代。
🗂 一键对照表:我该用谁?
| 场景 | 最简代码 | 备注 |
|---|---|---|
| 遍历 | arr.forEach(fn) | 不返回新数组 |
| 映射 | arr.map(fn) | 返回同长度新数组 |
| 过滤 | arr.filter(fn) | 返回符合条件的子集 |
| 查找 | arr.find(fn) | 返回第一个匹配元素 |
| 存在性 | arr.some(fn) / arr.every(fn) | 布尔结果 |
| 累计 | arr.reduce(fn, init) | 万能归约 |
| 排序 | arr.sort((a,b)=>a-b) | 原地排序 |
| 倒序 | arr.reverse() | 原地倒序 |
| 拼接 | [...arr1, ...arr2] 或 arr1.concat(arr2) | 生成新数组 |
| 扁平 | arr.flat(depth) | 多维展开 |
| 去重 | [...new Set(arr)] | 一行去重 |
| 删除/插入 | arr.splice(index, deleteCount, ...add) | 原地修改 |
| 切片 | arr.slice(start, end) | 不破坏原数组 |
| 填充 | arr.fill(value, start, end) | 原地填充 |
| 截取尾部 | arr.at(-1) | 负索引 |
🎯 10 个高频实战片段
1. 过滤 + 映射:拿到所有活跃用户姓名
const activeNames = users
.filter(u => u.isActive)
.map(u => u.name);
2. 累计求和
const total = prices.reduce((sum, p) => sum + p, 0);
3. 对象数组去重(按 id)
const unique = [
...new Map(list.map(o => [o.id, o])).values()
];
4. 二维数组拍平
const flat = matrix.flat(); // 1 层
const deepFlat = matrix.flat(Infinity); // 任意深度
5. 查找最大索引
const maxIndex = arr.indexOf(Math.max(...arr));
6. 安全删除(不破坏原数组)
const removed = arr.filter((_, i) => i !== index);
7. 随机打乱
const shuffled = arr.sort(() => Math.random() - 0.5);
8. 分组
const groupBy = arr.reduce((acc, cur) => {
(acc[cur.type] ||= []).push(cur);
return acc;
}, {});
9. 分页
const page = arr.slice((pageNo - 1) * size, pageNo * size);
10. 深拷贝数组(含对象)
const clone = structuredClone(arr);
🧩 组合连招:一行生成“柱状图”
const histogram = data
.reduce((acc, val) => ((acc[val] = (acc[val] || 0) + 1), acc), {});
🏁 1 张总结图(文字版)
遍历 → forEach
映射 → map
过滤 → filter
查找 → find / some / every
累计 → reduce
排序 → sort
倒序 → reverse
拼接 → concat / [...]
扁平 → flat
去重 → Set
把这张贴墙上,下次再写 for 循环,罚自己背一遍!