怎么说呢，

前端人必看！数组是JS开发中最常用的数据结构，没有之一✨

很多开发者写数组操作，还在死磕for循环写几十行冗余代码，要么用错方法导致bug频发。要么不知道哪个方法更高效——其实ES6+早已贴心提供了40个数组方法，覆盖遍历、筛选、修改、转换等所有场景，学会它们，编码效率直接翻倍，面试也能轻松拿捏面试官！

今天这篇文章，结合实战场景，把40个数组方法逐一拆解。每个方法都配「主要特点+可复制代码+避坑提示」，从基础到进阶，小白能看懂，老手能查漏补缺，收藏这一篇，再也不用东拼西凑找资料！

从主要提醒来看。很多人觉得“不用学完40个”，但实际开发中，选对方法能少写50%代码！比如筛选数据用filter，批量转换用map，累加计算用reduce，找元素用find——精准匹配场景，才是高效开发的关键👇

一、基础遍历类—— 替代for循环。简洁不冗余

从主要作用来看，遍历数组元素，执行指定操作，告别手动维护索引的麻烦，代码可读性拉满，是日常开发使用频率最高的一类方法。

. Array.forEach —— 基础遍历工具

主要特点遍历数组。对每个元素执行回调函数，无返回值；第一个参数始终是当前元素，还可接收索引、原数组作为可选参数。

避坑提示无法通过break中断遍历。若需中断，可改用for...of循环；其实，回调函数自身可修改原数组，需谨慎使用。

// 基础用法：遍历并打印每个元素
const array =;array.forEach => console.log);老实说，// 输出结果：a、b、c
// 进阶用法：获取元素+索引
array.forEach => {
console.log;})，// 输出结果：索引0：a、索引1：b、索引2：c

. Array.keys —— 遍历数组索引

主要特点返回一个数组迭代器对象。包含数组所有元素的索引，可通过for...of循环遍历获取所有索引。

const array =;const iterator = array.keys;// 遍历所有索引
for {
console.log;}
// 输出结果：

. Array.values —— 遍历数组值

const array =;const iterator = array.values;// 遍历所有元素值
for {
console.log;}
// 输出结果：

二、筛选查找类—— 精准定位元素。告别手动判断

主要作用这方面，根据指定条件，快速查找、筛选数组中的元素或索引，替代繁琐的if-else判断，减少代码冗余，提高开发效率。

. Array.map —— 批量转换数组

主要特点遍历数组。对每个元素执行回调函数返回一个新数组，不改变原阵列，用于数据格式转换。

避坑提示若回调函数无返回值，新阵列会充满

// 基础用法：将阵列中每个元件乘以2
const array =;const map1 = array.map => x * 2);console.log，按理说，// 输出：
console.log;// 输出：
// 实战用法：提取接口数据中的指定字段
const users =;老实说，const userNames = users.map;console.log，// 输出:

. Array.filter —— 筛选符合条件的元件

主要特点遍历阵列返回新阵列包含满足回调函数条件的元件。 不改变原阵列，用于数据筛选或去重预处理。

// 基础用法：筛选长度大于6的单词
const words =;const result = words.filter => word.length> 6);console.log，// 输出:
// 实战用法：筛选有库存的商品
const products =;const inStockProducts = products.filter;console.log，// 输出:

. Array.find —— 查找首个符合条件的元件

主要特点 : 遍历阵列返回首个满足回调函数条件之元件；若无，则返回

const array =;// 查找第一个大于10之元件
console.log => e>10));// 输出：

// 实战 用法 ：查找 指定id 的使用者 const users =;const targetUser=users.find;console.log，//输出:{id :5。name :'李四'}

错误 语句 Array.find 返回的是 找到 的 第一个 元素，而不是其下标。在寻找某条记录时如果你只需要该记录本身，就可以直接使用 find。

---

.Array.findIndex – 找出第一条符合条件的数据下标

html

js const demo9=document.getElementById;const arr=，arr.findIndex=> item=== “Hello” );demo9.innerHTML= “The index is” +arr.findIndex=> item=== “Hello” );

说明

• 返回 第一个 匹配项 下标
• 如果没匹配到则 -1

---

.Array.indexOf – 根据键名/键值搜索

`` js var demo10=document.getElementById;var arr=，demo10.innerHTML= `

${arr.indexOf}

`;怎么说呢，

说明

• 仅支持精确匹配
• 对 NaN 不生效

---

.Array.lastIndexOf – 从末尾向前搜索

js var arr=;var demo11=document.getElementById;demo11.innerHTML=`Last Index Of Hello is ${arr.lastIndexOf}`;

说明

与 indexOf 相反，从右侧开始往左搜索

---

三、多种类型转换

方法	功能	是否改动原型
toString	转为字符串	否
join	自定义分隔符转字符串	否
concat	合并两个/多个阵列	否
slice	截取子集	否
from	类阵列转真实阵列	否
of	构造新陣列	否

---

.Array.toString — 数组转字符串

html

` js let demo13=document.getElementById;let arr=，demo13.innerHTML=`String:${arr.toString}`;

.Array.join — 自定义分隔符转字符串

四、高级工具

以下工具属于更高阶，但也是日常工作中不可忽视的关键功能：

• .reduce,reduceRight: 数组聚合
• .flat。flatMap: 多维展开/映射 + 扁平化
• .copyWithin: 内部拷贝
• .at: 支持负数访问

这些工具都是 ES2020+ 新增，但已

---

五 小结 & 面试主要

面试常见题目

• 给定数字列表，实现“求和”“去重”“最大/最小值”的实现方式？
  • 至于推荐答案，《reduce》→ 求和/最大/最小；《filter》→ 去重；话说回来，
• 如何在不破坏原数� 的情况下将二维列表扁平化？说起来，
  • 再看推荐答案。《flat》或《flatMap》；

高效组合技巧

• map + filter → 转换后再过滤
• reduce → 替代 sum / 分组 / 聚合 等多种用途

---

六 最终说几句掏心窝的话

40 个陣列方法看似多。但不用死记硬背——日常开发中，高频使用的是大约十几个。剩下的方法可以作为储备，在遇到特定需求时快速翻阅此文即可。

前端开发强调“高效编码”。选择正确陣列工具不仅能减少冗余代码，还能降低 bug 的出现概率并提高可读性。希望这份整理对你们有所帮助，一起把前端技术做得更好💪

---