前端人必看！数组是JS开发中最常用的数据结构，没有之一✨
很多开发者写数组操作，还在死磕for循环写几十行冗余代码，要么用错方法导致bug频发，要么不知道哪个方法更高效——其实ES6+早已贴心提供了40个数组方法，覆盖遍历、筛选、修改、转换等所有场景，学会它们，编码效率直接翻倍，面试也能轻松拿捏面试官！
今天这篇文章，结合实战场景，把40个数组方法逐一拆解，每个方法都配「核心特点+可复制代码+避坑提示」，从基础到进阶，小白能看懂，老手能查漏补缺，收藏这一篇，再也不用东拼西凑找资料！
核心提醒：很多人觉得“不用学完40个”，但实际开发中，选对方法能少写50%代码！比如筛选数据用filter，批量转换用map，累加计算用reduce，找元素用find——精准匹配场景，才是高效开发的关键👇
一、基础遍历类（3个）—— 替代for循环，简洁不冗余
核心作用：遍历数组元素，执行指定操作，告别手动维护索引的麻烦，代码可读性拉满，是日常开发使用频率最高的一类方法。
1. Array.forEach() —— 基础遍历神器
核心特点：遍历数组，对每个元素执行回调函数，无返回值；第一个参数始终是当前元素，还可接收索引、原数组作为可选参数。
避坑提示：无法通过break中断遍历，若需中断，可改用for...of循环；回调函数自身可修改原数组，需谨慎使用。
// 基础用法：遍历并打印每个元素
const array = ['a', 'b', 'c'];
array.forEach((e) => console.log(e));
// 输出结果：a、b、c（依次打印）
// 进阶用法：获取元素+索引
array.forEach((e, index) => {
console.log(`索引${index}：${e}`);
});
// 输出结果：索引0：a、索引1：b、索引2：c
2. Array.keys() —— 遍历数组索引
核心特点：返回一个数组迭代器对象，包含数组所有元素的索引，可通过for...of循环遍历获取所有索引。
const array = ['a', 'b', 'c', 'd'];
const iterator = array.keys();
// 遍历所有索引
for (const key of iterator) {
console.log(key);
}
// 输出结果：0、1、2、3
3. Array.values() —— 遍历数组值
核心特点：返回一个数组迭代器对象，包含数组所有元素的值，可通过for...of循环遍历获取所有元素，与forEach功能互补。
const array = ['a', 'b', 'c', 'd'];
const iterator = array.values();
// 遍历所有元素值
for (const key of iterator) {
console.log(key);
}
// 输出结果：a、b、c、d
二、筛选查找类（7个）—— 精准定位元素，告别手动判断
核心作用：根据指定条件，快速查找、筛选数组中的元素或索引，替代繁琐的if-else判断，减少代码冗余，提升开发效率。
4. Array.map() —— 批量转换数组
核心特点：遍历数组，对每个元素执行回调函数，返回一个新数组（长度与原数组一致），不改变原数组，常用于数据格式转换。
避坑提示：若回调函数无返回值，新数组会充满undefined，务必确保每个元素都有返回值。
// 基础用法：将数组中每个元素乘以2
const array = [1, 4, 9, 16];
const map1 = array.map((x) => x * 2);
console.log(map1); // 输出：[2, 8, 18, 32]
console.log(array); // 输出：[1, 4, 9, 16]（原数组未改变）
// 实战用法：提取接口数据中的指定字段
const users = [{name: '张三'}, {name: '李四'}, {name: '王五'}];
const userNames = users.map(user => user.name);
console.log(userNames); // 输出：['张三', '李四', '王五']
5. Array.filter() —— 筛选符合条件的元素
核心特点：遍历数组，返回一个新数组，包含所有满足回调函数条件的元素，不改变原数组，常用于数据筛选、去重预处理。
// 基础用法：筛选长度大于6的单词
const words = ['spray', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter((word) => word.length > 6);
console.log(result); // 输出：['exuberant', 'destruction', 'present']
// 实战用法：筛选有库存的商品
const products = [
{ name: '手机', price: 5999, inStock: true },
{ name: '电脑', price: 8999, inStock: false },
{ name: '耳机', price: 799, inStock: true }
];
const inStockProducts = products.filter(product => product.inStock);
console.log(inStockProducts); // 输出：[{name: '手机', ...}, {name: '耳机', ...}]
6. Array.find() —— 查找首个符合条件的元素
核心特点：遍历数组，返回首个满足回调函数条件的元素（返回元素本身）；若找不到，返回undefined，适合查找单个目标元素。
const array = [5, 12, 8, 130, 44];
// 查找第一个大于10的元素
console.log(array.find((e) => e > 10)); // 输出：12
// 实战用法：查找指定id的用户
const users = [{id: 1, name: '张三'}, {id: 2, name: '李四'}];
const targetUser = users.find(user => user.id === 2);
console.log(targetUser); // 输出：{id: 2, name: '李四'}
7. Array.findIndex() —— 查找首个符合条件的元素索引
核心特点：与find()功能类似，区别在于返回首个满足条件的元素索引；若找不到，返回-1，常用于需要获取元素位置的场景。
const array = [5, 12, 8, 130, 44];
// 查找第一个大于45的元素索引
console.log(array.findIndex((e) => e > 45)); // 输出：3（元素130的索引）
8. Array.indexOf() —— 查找指定元素的索引
核心特点：查找数组中第一个目标元素的索引，若找不到返回-1；可设置第二个参数，指定起始查询位置，适合精确查找已知元素。
const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(beasts.indexOf('bison')); // 输出：1（第一个bison的索引）
console.log(beasts.indexOf('bison', 2)); // 输出：4（从索引2开始查找的第一个bison）
console.log(beasts.indexOf('giraffe')); // 输出：-1（找不到该元素）
9. Array.lastIndexOf() —— 从末尾查找指定元素
核心特点：与indexOf()相反，从数组末尾开始搜索，返回第一个目标元素的索引；若找不到返回-1，适合查找元素最后出现的位置。
const array = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(array.lastIndexOf('bison')); // 输出：4（最后一个bison的索引）
console.log(array.lastIndexOf('camel')); // 输出：2（camel的索引）
10. Array.includes() —— 判断元素是否存在
核心特点：判断数组是否包含指定元素，返回true/false，语法简洁，替代传统的indexOf() !== -1，可读性更高。
避坑提示：与some()区别：includes()直接判断元素是否存在，some()判断是否有元素满足自定义条件。
const array = [1, 30, 39, 29, 10, 13];
console.log(array.includes(30)); // 输出：true
console.log(array.includes(100)); // 输出：false
三、数组修改类（8个）—— 增删改查，灵活操作数组
核心作用：直接修改数组（或返回修改后的结果），涵盖元素添加、删除、替换、排序等操作，满足日常数组修改的所有需求，注意区分“是否改变原数组”。
11. Array.push() —— 末尾添加元素
核心特点：往数组末尾添加一个或多个元素，改变原数组，返回添加后数组的新长度。
const array = ['ant', 'duck', 'bison'];
// 添加单个元素
const count = array.push('cows');
console.log(count); // 输出：4（添加后的数组长度）
console.log(array); // 输出：["ant", "duck", "bison", "cows"]
// 批量添加元素
array.push('cat', 'dog');
console.log(array); // 输出：["ant", "duck", "bison", "cows", "cat", "dog"]
12. Array.unshift() —— 开头添加元素
核心特点：往数组开头添加一个或多个元素，改变原数组，返回添加后数组的新长度。
const array = [1, 10, 13];
// 批量添加元素到开头
console.log(array.unshift(4, 5)); // 输出：5（添加后的数组长度）
console.log(array); // 输出：[4, 5, 1, 10, 13]
13. Array.pop() —— 删除末尾元素
核心特点：删除数组最后一个元素，改变原数组，返回被删除的元素；若数组为空，返回undefined。
const array = ['ant', 'duck', 'bison'];
console.log(array.pop()); // 输出：bison（被删除的元素）
console.log(array); // 输出：["ant", "duck"]
// 继续删除
array.pop();
console.log(array); // 输出：["ant"]
14. Array.shift() —— 删除开头元素
核心特点：删除数组第一个元素，改变原数组，返回被删除的元素；若数组为空，返回undefined。
const array = [1, 6, 10, 13];
const firstElement = array.shift();
console.log(firstElement); // 输出：1（被删除的元素）
console.log(array); // 输出：[6, 10, 13]
15. Array.splice() —— 万能修改方法
核心特点：可实现“添加、删除、替换”三种功能，改变原数组；返回被删除的元素组成的数组，若未删除元素则返回空数组。
语法：array.splice(起始索引, 删除个数, 要添加的元素)
const array = ['ant', 'bison', 'camel', 'duck', 'bison'];
// 1. 插入元素（不删除）：在索引1处插入'Feb'
array.splice(1, 0, 'Feb');
console.log(array); // 输出：["ant", "Feb", "bison", "camel", "duck", "bison"]
// 2. 替换元素：在索引4处删除1个元素，插入'May'
array.splice(4, 1, 'May');
console.log(array); // 输出：["ant", "Feb", "bison", "camel", "May", "bison"]
// 3. 删除元素：在索引1处删除1个元素
array.splice(1, 1);
console.log(array); // 输出：["ant", "bison", "camel", "May", "bison"]
16. Array.sort() —— 数组排序
核心特点：对数组元素进行排序，改变原数组；默认按字符串Unicode码排序，数字排序需手动传入比较函数。
// 字符串排序（默认）
const array1 = ['ant', 'bison', 'camel', 'duck'];
array1.sort();
console.log(array1); // 输出：["ant", "bison", "camel", "duck"]
// 数字排序（需传入比较函数）
const array2 = [3, 1, 4, 1, 5, 9];
// 升序排序
array2.sort((a, b) => a - b);
console.log(array2); // 输出：[1, 1, 3, 4, 5, 9]
// 降序排序
array2.sort((a, b) => b - a);
console.log(array2); // 输出：[9, 5, 4, 3, 1, 1]
17. Array.reverse() —— 数组反转
核心特点：反转数组中元素的顺序，改变原数组，语法简单，常用于需要倒序排列的场景。
const array = ['ant', 'bison', 'camel', 'duck'];
array.reverse();
console.log(array); // 输出：["duck", "camel", "bison", "ant"]
18. Array.fill() —— 填充数组
核心特点：用指定内容填充数组，改变原数组；可指定填充的起始索引和结束索引（不包含结束索引），不指定则填充整个数组。
const array = [1, 6, 10, 13];
// 填充索引2-4（不包含4）为0
console.log(array.fill(0, 2, 4)); // 输出：[1, 6, 0, 0]
// 填充索引1及以后为5
console.log(array.fill(5, 1)); // 输出：[1, 5, 5, 5]
// 填充整个数组为6
console.log(array.fill(6)); // 输出：[6, 6, 6, 6]
四、数组转换类（7个）—— 格式转换，适配不同场景
核心作用：将数组转换为其他格式（字符串、迭代器、新数组等），或从其他格式转为数组，满足数据展示、传递等不同需求，大多不改变原数组。
19. Array.toString() —— 数组转字符串
核心特点：将数组转为字符串，元素用逗号分隔，不改变原数组；简单直接，但无法自定义分隔符。
const array = [1, 6, 'a', '1a'];
console.log(array.toString()); // 输出：'1,6,a,1a'
20. Array.join() —— 自定义分隔符转字符串
核心特点：将数组用指定符号连接成字符串，不改变原数组；省略分隔符则用逗号分隔，可自定义任意分隔符（空字符串、横线等）。
const array = ['ant', 'duck', 'bison'];
console.log(array.join()); // 输出：ant,duck,bison（默认逗号分隔）
console.log(array.join('')); // 输出：antduckbison（无分隔符）
console.log(array.join('-')); // 输出：ant-duck-bison（横线分隔）
21. Array.concat() —— 合并数组
核心特点：合并两个或多个数组，返回一个新数组，不改变原数组；可替代扩展运算符（...），语法更简洁。
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3); // 输出：['a', 'b', 'c', 'd', 'e', 'f']
console.log(array1); // 输出：['a', 'b', 'c']（原数组未改变）
22. Array.slice() —— 截取数组
核心特点：截取数组中的指定片段，返回一个新数组，不改变原数组；可指定起始索引和结束索引（不包含结束索引），支持负数索引（从末尾开始计数）。
const array = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(array.slice(2)); // 输出：["camel", "duck", "bison"]（从索引2开始截取）
console.log(array.slice(2, 4)); // 输出：["camel", "duck"]（截取索引2-4，不包含4）
console.log(array.slice(-2)); // 输出：["duck", "bison"]（从倒数第二个开始截取）
console.log(array.slice()); // 输出：原数组（相当于浅拷贝）
23. Array.from() —— 类数组转数组
核心特点：将类数组（如字符串、DOM集合、JSON）转为真正的数组，返回新数组；最简单的应用是克隆数组，还可传入回调函数处理元素。
// 字符串转数组
console.log(Array.from('foo')); // 输出：["f", "o", "o"]
// 克隆数组并处理元素
console.log(Array.from([1, 2, 3], x => x + x)); // 输出：[2, 4, 6]
// JSON（类数组）转数组
const json = { '0': 'a', '1': 'b', '2': 'c', length: 3 };
console.log(Array.from(json)); // 输出：['a', 'b', 'c']
24. Array.of() —— 创建新数组
核心特点：创建一个新的Array实例，将传入的参数作为数组元素；与new Array()区别：Array.of(3)创建[3]，new Array(3)创建长度为3的空数组。
console.log(Array.of('foo', 2, 'bar', true)); // 输出：["foo", 2, "bar", true]
console.log(Array.of()); // 输出：[]（空数组）
console.log(Array.of(3)); // 输出：[3]
console.log(new Array(3)); // 输出：[empty × 3]（空数组，长度为3）
25. Array.entries() —— 生成键值对迭代器
核心特点：返回一个新的数组迭代器对象，包含数组中每个索引的键/值对（[索引, 元素]），可通过for...of循环遍历。
const array = ['a', 'b', 'c', 'd'];
const iterator = array.entries();
for (const key of iterator) {
console.log(key[0], key[1]);
}
// 输出结果：0 "a"、1 "b"、2 "c"、3 "d"
五、高级操作类（10个）—— 复杂场景必备，提升编码上限
核心作用：应对更复杂的数组操作（累加、扁平化、批量处理等），是前端进阶的关键，学会这些，能轻松处理复杂数据逻辑，面试加分项！
26. Array.reduce() —— 万能累加器
核心特点：从左到右遍历数组，通过回调函数将数组元素“累积”为一个值（数字、对象、数组等），不改变原数组，功能最灵活，可替代sum、map+filter等组合用法。
语法：array.reduce((累加器, 当前值, 索引, 原数组) => {}, 初始值)
// 1. 基础用法：数组求和
const array = [1, 2, 3, 4];
const initialValue = 0;
const sumWithInitial = array.reduce(
(accumulator, currentValue) => accumulator + currentValue,
initialValue
);
console.log(sumWithInitial); // 输出：10
// 2. 进阶用法：数组转对象（按id分组）
const users = [{id: 1, name: '张三'}, {id: 2, name: '李四'}];
const userMap = users.reduce((acc, user) => {
acc[user.id] = user;
return acc;
}, {});
console.log(userMap); // 输出：{1: {id:1, name:'张三'}, 2: {id:2, name:'李四'}}
27. Array.reduceRight() —— 反向累加
核心特点：与reduce()功能一致，区别在于从数组末尾开始遍历累加，最终返回一个单个值，适合需要反向处理数组的场景。
const array = [2, 3, 4, 5, 6, 7, 8, 9];
const sumWithInitial = array.reduceRight((pv, cv) => {
console.log(`当前值: ${cv}, 上一次累积值: ${pv}`);
return 2 * cv;
});
console.log(sumWithInitial); // 输出：36（从9开始反向计算：2*9=18 → 2*8=16 → ...最终结果36）
28. Array.flat() —— 数组扁平化
核心特点：将嵌套数组（多维数组）展开，返回一个新数组，不改变原数组；默认展开1层，可传入数字指定展开层数（Infinity表示无限层）。
// 基础用法：展开1层嵌套数组
const array = [0, 1, 2, [3, 4]];
const result = array.flat();
console.log(result); // 输出：[0, 1, 2, 3, 4]
// 进阶用法：展开多层嵌套数组
const array2 = [0, 1, [2, [3, [4, 5]]]];
console.log(array2.flat(2)); // 输出：[0, 1, 2, 3, [4, 5]]（展开2层）
console.log(array2.flat(Infinity)); // 输出：[0, 1, 2, 3, 4, 5]（无限层展开）
29. Array.flatMap() —— 映射+扁平化
核心特点：先对数组每个元素执行map()操作，再对结果执行flat()操作（默认展开1层），返回一个新数组，不改变原数组，简化map+flat的组合写法。
const array = [2, 3, 4];
// 对每个元素映射，再扁平化
const result = array.flatMap(num => (num === 2 ? [2, 2] : 1));
console.log(result); // 输出：[2, 2, 1, 1]
// 等价于：array.map(...).flat(1)
30. Array.copyWithin() —— 数组内部拷贝
核心特点：从数组的指定位置拷贝元素，粘贴到数组的另一个指定位置，改变原数组；语法：array.copyWithin(粘贴位置, 拷贝起始位置, 拷贝结束位置)。
const array = ['a', 'b', 'c', 'd', 'e'];
// 从索引3拷贝1个元素（d），粘贴到索引0
console.log(array.copyWithin(0, 3, 4)); // 输出：["d", "b", "c", "d", "e"]
// 从索引3拷贝所有元素（d、e），粘贴到索引1
console.log(array.copyWithin(1, 3)); // 输出：["d", "d", "e", "d", "e"]
31. Array.at() —— 按索引获取元素
核心特点：根据指定索引获取数组中的元素，支持负数索引（从末尾开始计数），语法比array[index]更灵活，可避免负数索引返回undefined的问题。
const array = [5, 12, 8, 130, 44];
console.log(array.at(2)); // 输出：8（索引2对应的元素）
console.log(array.at(-1)); // 输出：44（倒数第一个元素）
console.log(array.at(-3)); // 输出：8（倒数第三个元素）
32. Array.findLast() —— 查找最后一个符合条件的元素
核心特点：与find()功能类似，区别在于从数组末尾开始查找，返回最后一个满足条件的元素；若找不到，返回undefined。
const array = [5, 12, 8, 130, 44];
// 查找最后一个大于45的元素
const found = array.findLast(el => el > 45);
console.log(found); // 输出：130
33. Array.fromAsync() —— 异步类数组转数组
核心特点：将异步类数组（如异步迭代器、Promise数组）转为数组，返回一个新的Promise实例，其履行值是转换后的新数组，适合异步场景。
// 示例：将异步迭代器转为数组
async function getArray() {
const asyncIterator = (async function* () {
yield 1;
yield 2;
yield 3;
})();
const array = await Array.fromAsync(asyncIterator);
console.log(array); // 输出：[1, 2, 3]
}
getArray();
34. Array.with() —— 替换指定索引元素
核心特点：将数组中指定索引的元素替换为目标值，返回一个新数组，不改变原数组，语法简洁，替代splice()的替换功能（无需改变原数组）。
const arr = [1, 2, 3, 4, 5];
// 将索引2的元素替换为6
console.log(arr.with(2, 6)); // 输出：[1, 2, 6, 4, 5]
console.log(arr); // 输出：[1, 2, 3, 4, 5]（原数组未改变）
35. Array.toSorted() —— 排序不改变原数组
核心特点：与sort()功能一致，对数组元素进行排序，但不改变原数组，返回排序后的新数组，避免sort()修改原数组的副作用。
const array = ['ant', 'bison', 'camel', 'duck'];
const sortedMonths = array.toSorted();
console.log(sortedMonths); // 输出：["ant", "bison", "camel", "duck"]（排序后）
console.log(array); // 输出：['ant', 'bison', 'camel', 'duck']（原数组未改变）
36. Array.toLocaleString() —— 本地化字符串转换
核心特点：将数组转为本地化字符串，元素用逗号分隔，不改变原数组；与toString()区别：会根据当前地区的语言和格式规则转换（如数字、日期格式）。
const array = [1234, new Date(), 'hello'];
// 本地化转换（根据当前地区格式）
console.log(array.toLocaleString());
// 输出示例：1,234, 2026/4/13 10:30:00, hello
37. Array.isArray() —— 判断是否为数组
核心特点：判断一个值是否为数组，返回true/false；注意：若值是TypedArray实例（如Int16Array），始终返回false，是最可靠的数组判断方法。
console.log(Array.isArray([1, 3, 5])); // 输出：true
console.log(Array.isArray('[]')); // 输出：false（字符串不是数组）
console.log(Array.isArray(new Array(5))); // 输出：true（new Array创建的是数组）
console.log(Array.isArray(new Int16Array([15, 33]))); // 输出：false（TypedArray实例）
38. Array.valueOf() —— 返回数组本身
核心特点：返回数组本身，不做任何修改和转换，常用于确保变量是数组类型，避免类型转换错误。
const fruits = ['a', 'b', 'c', 'd'];
console.log(fruits.valueOf()); // 输出：["a", "b", "c", "d"]（返回数组本身）
39. Array.some() —— 判断是否有元素满足条件
核心特点：遍历数组，只要有一个元素满足回调函数条件，就返回true；所有元素都不满足，返回false，常用于“判断是否存在符合条件的元素”。
const array = [1, 2, 3, 4, 5];
// 判断数组中是否有偶数
const even = (el) => el % 2 === 0;
console.log(array.some(even)); // 输出：true
40. Array.every() —— 判断所有元素是否满足条件
核心特点：与some()相反，遍历数组，所有元素都满足回调函数条件，才返回true；只要有一个元素不满足，返回false，常用于“校验所有元素是否符合规则”。
const array = [1, 30, 39, 29, 10, 13];
// 判断所有元素是否都小于20
console.log(array.every((item) => item < 20)); // 输出：false（30、39大于20）
二、面试+实战高频避坑总结（必记）
很多开发者用错数组方法，不是不会用，而是没分清“是否改变原数组”“适用场景”，整理了4个高频避坑点，记牢少踩bug！
-
改变原数组的方法（10个）：push、unshift、pop、shift、splice、sort、reverse、fill、copyWithin
-
不改变原数组的方法（30个）：除上述10个外，其余30个均不改变原数组，可放心使用
-
高频混淆方法：map（返回等长新数组）vs filter（返回筛选后数组）、some（有一个满足即true）vs every（所有满足才true）、slice（不改变原数组）vs splice（改变原数组）
-
高效组合用法：map+filter（先转换再筛选）、flatMap（映射+扁平化）、reduce（替代sum、数组转对象等）
三、最后说几句掏心窝的话
40个数组方法看似多，但不用死记硬背——日常开发中，高频使用的也就10个左右（forEach、map、filter、push、splice、slice、reduce、find、includes、sort），剩下的可作为储备，用到时翻这篇文章即可。
前端开发的核心是“高效编码”，选对数组方法，能帮你少写冗余代码、减少bug，还能提升代码可读性——这篇文章整理了所有方法的实战代码和避坑点，建议收藏，面试前过一遍，开发时直接复制使用！
如果觉得有用，记得点赞+收藏，关注我，后续更新更多前端干货，一起从新手进阶成资深开发者💪
登录