惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

爱范儿
爱范儿
WordPress大学
WordPress大学
博客园 - 【当耐特】
The Cloudflare Blog
B
Blog
Last Week in AI
Last Week in AI
小众软件
小众软件
量子位
S
SegmentFault 最新的问题
V
Visual Studio Blog
博客园 - 叶小钗
美团技术团队
阮一峰的网络日志
阮一峰的网络日志
Hugging Face - Blog
Hugging Face - Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
宝玉的分享
宝玉的分享
A
About on SuperTechFans
雷峰网
雷峰网
J
Java Code Geeks
Microsoft Azure Blog
Microsoft Azure Blog
腾讯CDC
MongoDB | Blog
MongoDB | Blog
酷 壳 – CoolShell
酷 壳 – CoolShell
Martin Fowler
Martin Fowler

博客园 - lzhdim

C#性能杀手TOP10:你的代码中招了吗? 20260913 - 个人小作品更新 宝马Z4借壳复活!改装版Spider亮相:售价约90万、限量99台 C#开发的ScreenSaver屏保应用 - 开源研究系列文章 - 个人小作品 7个现代C#实战模式:微软精英团队都在用的高效编程技巧 20260831 - 个人小作品更新 C#使用SQLite数据库例子 - 开源研究系列文章 20260830 - 个人小作品更新 20260829 - 个人小作品更新 13、JavaScript事件循环机制 - JavaScript学习系列文章 首款媲美分体水冷的一体水冷!微星CORELIQUID E15 360水冷散热器评测:目前为止 锐龙9 9950X3D最强性能释放 JavaScript常见的内存泄露问题 - JavaScript学习系列文章 C#开发的颜色取色器 - 开源研究系列文章 - 个人小作品 成长环境 - 我的闪存 提高 SQL 语句执行速度的方法 JavaScript安全最佳实践 关闭iPhone一些默认设置,让iPhone更流畅 20260814 - 个人小作品更新 JavaScript对象与元编程 20260812 - 个人小作品更新 JavaScript 模块化系统 Markdown 语法完全指南 C# 通过 Windows API 实现进程内存读写操作 JavaScript 函数进阶课题 C#开发的基于钩子技术监测键鼠事件的例子 - 开源项目研究文章 JavaScript异步编程的演进 近十年最帅风冷!酷冷至尊V8 ACE 3DHP散热器评测:单塔能干翻双塔 20260723 - 个人小作品更新 C# 中读取CPU、硬盘和内存温度 雷柏VT3s MAX鼠标评测:中小手型用户也没有被遗忘 顶尖性能的小号电竞鼠标来了
25个每个开发人员都应该掌握的JavaScript 数组方法
lzhdim · 2026-09-02 · via 博客园 - lzhdim

在前端开发中,数组无疑是最常用的数据结构之一。掌握好 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); 

8. filter()

筛选符合条件的元素

let evens = [1, 2, 3, 4].filter(x => x % 2 === 0); 

9. reduce()

累计器,归并成单一值。

let sum = [1, 2, 3, 4].reduce((acc, cur) => acc + cur, 0); 

10. reduceRight()

从右往左执行 reduce

let reversed = ['a', 'b', 'c'].reduceRight((acc, cur) => acc + cur); 

三、查找与判断类

11.find()

返回符合条件的第一个元素

let found = [1, 2, 3, 4].find(x => x > 2); 

12. findIndex()

返回符合条件的第一个元素索引。

let index = [1, 2, 3, 4].findIndex(x => x > 2); 

13. includes()

判断数组是否包含某个值。

[1, 2, 3].includes(2); // true

14. indexOf()

返回某个值第一次出现的位置

[1, 2, 3, 2].indexOf(2); // 1

15. lastIndexOf()

返回某个值最后一次出现的位置

[1, 2, 3, 2].lastIndexOf(2); // 3

四、转换类

16. join()

将数组转换为字符串

[1, 2, 3].join('-'); // '1-2-3'

17. toString()

返回数组的字符串表示

[1, 2, 3].toString(); // '1,2,3'

18. flat()

扁平化嵌套数组

[1, [2, [3]]].flat(2); // [1, 2, 3]

19. flatMap()

先映射再扁平一层

[1, 2, 3].flatMap(x => [x, x * 2]); 

五、排序与反转类

20. sort()

对数组进行排序(默认按字符串排序)

[3, 1, 2].sort(); // [1, 2, 3]

21. reverse()

反转数组顺序

[1, 2, 3].reverse(); // [3, 2, 1]

六、数组构造与判断类

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); // [1, 2, 3]

25. concat()

合并两个或多个数组

[1, 2].concat([3, 4]); // [1, 2, 3, 4]

写在最后

以上就是我今天想与你分享的 25 个 JavaScript 中高频使用的数组方法。熟悉它们不仅能让你写出更高效、更优雅的代码,也能在面试和实际项目中更游刃有余。