news 2026/9/4 1:58:09

25个每个开发人员都应该掌握的JavaScript 数组方法

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
25个每个开发人员都应该掌握的JavaScript 数组方法

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

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

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

五、排序与反转类

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 中高频使用的数组方法。熟悉它们不仅能让你写出更高效、更优雅的代码,也能在面试和实际项目中更游刃有余。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/9/4 1:55:03

基于Django框架的高校科研成果管理系统设计与实现

简介:本资源是一套完整可用的高校教师科研成果管理系统,基于Python 3.x与Django框架开发,面向计算机、人工智能、自动化等专业的本科生及研究生,适用于毕业设计、课程大作业或教学实践场景,解决科研数据分散、统计低效…

作者头像 李华
网站建设 2026/9/4 1:54:55

自建轻量SQL协作平台:从PopSQL/SeekWell迁移到FastAPI与APScheduler

最近陆续有数据团队在讨论迁移方案:以前依赖的在线 SQL 编辑器与定时调度工具开始调整商业化策略,PopSQL、SeekWell 这一类 SaaS 产品能否长期续费逐渐变成未知数。团队里的 SQL 资产、共享查询、定时报告一旦绑死在某个厂商,真遇到“关停或大…

作者头像 李华
网站建设 2026/9/4 1:54:43

从零搭建自动化发包环境:Shell与Python脚本实战指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

作者头像 李华
网站建设 2026/9/4 1:53:19

STM8S003F UART通信IAR工程模板详解

简介:本资源是面向嵌入式初学者与STM8S开发者的UART通信实践工程,聚焦STM8S003F芯片在IAR EWSTM8环境下的串口驱动开发,解决常见外设初始化、中断收发、波特率配置等入门痛点。压缩包共21个文件,含核心源码(main.c、ua…

作者头像 李华
网站建设 2026/9/4 1:50:46

小团队AI落地四步法:从问题出发,让AI成为生产力组件

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

作者头像 李华