在前端开发中,数组无疑是最常用的数据结构之一。掌握好 JavaScript 提供的各种数组方法,能够极大地提升我们处理数据的效率与代码的可读性。
无论是增删改查、排序过滤,还是转换映射,数组方法几乎覆盖了所有场景。
本文将系统梳理 25 个常用的 JavaScript 数组方法,配以简洁示例,帮助你快速上手并灵活运用。
一、基本操作类
1. push()
向数组末尾添加一个或多个元素
let arr = [1, 2];arr.push(3); // [1, 2, 3]
2. pop()
删除数组末尾的元素并返回它
let arr = [1, 2, 3];arr.pop(); // 3, arr: [1, 2]
3. shift()
删除数组开头的元素并返回它。
let arr = [1, 2, 3];arr.shift(); // 1, arr: [2, 3]
4. unshift()
向数组开头添加一个或多个元素。
let arr = [2, 3];arr.unshift(1); // [1, 2, 3]
5.splice()
增删改数组元素。
let arr = [1, 2, 3, 4];arr.splice(1, 2, 'a', 'b'); // [1, "a", "b", 4]
二、遍历与映射类
6. forEach()
对数组的每个元素执行函数(无返回值)
[1, 2, 3].forEach(x => console.log(x));
7. map()
对每个元素执行函数并返回新数组
let doubled = [1, 2, 3].map(x => x * 2); // [2, 4, 6]
8. filter()
筛选符合条件的元素
let evens = [1, 2, 3, 4].filter(x => x % 2 === 0); // [2, 4]
9. reduce()
累计器,归并成单一值。
let sum = [1, 2, 3, 4].reduce((acc, cur) => acc + cur, 0); // 10
10. reduceRight()
从右往左执行 reduce
let reversed = ['a', 'b', 'c'].reduceRight((acc, cur) => acc + cur); // 'cba'
三、查找与判断类
11.find()
返回符合条件的第一个元素
let found = [1, 2, 3, 4].find(x => x > 2); // 3
12. findIndex()
返回符合条件的第一个元素索引。
let index = [1, 2, 3, 4].findIndex(x => x > 2); // 2
13. includes()
判断数组是否包含某个值。
[
14. indexOf()
返回某个值第一次出现的位置
[
15. lastIndexOf()
返回某个值最后一次出现的位置
[
四、转换类
16. join()
将数组转换为字符串
[
17. toString()
返回数组的字符串表示
[
18. flat()
扁平化嵌套数组
[
19. flatMap()
先映射再扁平一层
[1, 2, 3].flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]
五、排序与反转类
20. sort()
对数组进行排序(默认按字符串排序)
[
21. reverse()
反转数组顺序
[
六、数组构造与判断类
22. Array.isArray()
判断是否为数组
Array.isArray([1, 2, 3]); // true
23. Array.from()
将类数组对象转为数组
Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']
24. Array.of()
操作前,请先验证。此方法可防止代码本身出问题。
Array.of(1, 2, 3); //
25. concat()
合并两个或多个数组
[1, 2].concat([3, 4]); // [1, 2, 3, 4]
写在最后
以上就是我今天想与你分享的 25 个 JavaScript 中高频使用的数组方法。熟悉它们不仅能让你写出更高效、更优雅的代码,也能在面试和实际项目中更游刃有余。
![]() |
Austin Liu 刘恒辉
Project Manager and Software Designer E-Mail:lzhdim@163.com Blog:https://lzhdim.cnblogs.com 欢迎收藏和转载此博客中的博文,但是请注明出处,给笔者一个与大家交流的空间。谢谢大家。 |




浙公网安备 33010602011771号