🤯还在手写 for 循环?这 20 个数组神技一行搞定,最后一个直接封神!

59 阅读2分钟

难道你还在用 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 循环,罚自己背一遍!