讲师中心 微信公众号
AI工具推荐 视频效率加速

JavaScript数组方法有哪些_如何高效操作数据【教程】

小磊小哥_9411

小磊小哥_9411

发布时间:2026-01-20 22:11:02

|

938人浏览过

|

来源于php中文网

原创

会改变原数组的5个方法是push、pop、unshift、shift、splice、reverse和sort;其中unshift/shift性能差,splice易误用,sort默认字符串排序需传比较函数。

javascript数组方法有哪些_如何高效操作数据【教程】

JavaScript 数组方法本身没有“高效”或“低效”的绝对划分,关键在于选对方法、避开隐式转换和意外副作用。用错 map 做过滤、误用 splice 破坏原数组、在大数组上滥用 sort 默认比较,才是性能和逻辑出问题的根源。

哪些数组方法会改变原数组?必须警惕的 5 个突变操作

这些方法直接修改 Array.prototype 上的原始数组,若后续还依赖原数据,就会出 bug:

  • push / pop:末尾增删 —— 安全,但注意返回值是新长度/被删元素,不是数组本身
  • unshift / shift:开头增删 —— 性能差(需重排所有索引),大数组慎用
  • splice:任意位置增删改 —— 最易误用:第一个参数是起始索引,第二个是删除个数,第三个起才是插入项;不传第二个参数 ≠ 不删除(实际会删到末尾)
  • reverse 和 sort:看似只排序,实则原地修改;sort() 默认按字符串 Unicode 排序,数字数组必须传 (a, b) => a - b
const arr = [3, 1, 4];
arr.sort(); // ❌ 结果是 [1, 3, 4]?不对,是 [1, 3, 4] 看似对,但其实是字符串比:'1' < '3' < '4' → 恰好碰对;换成 [10, 2] 就崩:[10, 2].sort() → [10, 2](因为 '10' < '2')

filter/map/reduce 三件套:什么时候该用哪一个?

它们都不改原数组,但语义和适用场景截然不同:

  • filter:只做「筛选」,返回布尔值,输出数组长度 ≤ 输入数组
  • map:只做「一对一转换」,每个输入项产出一个输出项,输出数组长度 === 输入数组
  • reduce:做「聚合」,把数组逐步压缩成单个值(对象、数字、字符串、甚至新数组),适合求和、分组、扁平化、链式条件判断
const nums = [1, 2, 3, 4];
nums.filter(x => x > 2);     // [3, 4]
nums.map(x => x * 2);        // [2, 4, 6, 8]
nums.reduce((sum, x) => sum + x, 0); // 10
// 扁平化二维数组?别用 map 套 map,用 reduce:
[[1,2], [3,4]].reduce((acc, row) => acc.concat(row), []); // [1,2,3,4]

find/findIndex/includes:查找类方法的兼容性与陷阱

它们都返回「存在性结果」,但行为差异明显,且部分不支持 IE:

用于自动切换项目中适合的node 版本
用于自动切换项目中适合的node 版本

根据 package.json 中的 engines 字段自动检测 Node.js 版本需求,未安装 nvm 时自动安装并切换至对应版本。支持 Windows、macOS、Linux。适用于 Node.js 项目开发、版本切换和环境配置。

下载

立即学习“Java免费学习笔记(深入)”;

  • includes:ES2016,判断值是否存在(支持 NaN,而 indexOf 不行),但无法获取位置
  • find:返回匹配的第一个元素(对象引用),适合找对象;注意它不严格等于 filter(...)[0],因为后者多一次遍历且创建新数组
  • findIndex:返回索引,比 indexOf 强在支持函数判断(比如找 obj.status === 'active')
  • IE 兼容方案:用 some 替代 includes,用 find 的 polyfill 或降级为 for 循环
const users = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}];
users.find(u => u.id === 2);      // {id: 2, name: 'Bob'}
users.findIndex(u => u.name === 'Alice'); // 0
[1, 2, NaN].includes(NaN);        // true ← 这是它比 indexOf 好的关键点

flat() 和 at():新语法虽好,但上线前得看环境

flat 和 at 是近年高频新增方法,写起来简洁,但部署时容易踩兼容性坑:

  • flat:默认只拍一层,flat(Infinity) 才彻底扁平;IE 完全不支持,Chrome 69+、Firefox 62+ 支持;Node.js 11.0+ 开始支持
  • at:支持负索引(arr.at(-1) 取末尾),比 arr[arr.length - 1] 安全(不会因空数组报错);但 Safari 15.4 之前、旧版 Node.js 都不支持
  • 线上项目若需兼容,建议用 Babel 编译,或封装 fallback:arr.at?.(-1) ?? arr[arr.length - 1]
[1, [2, [3]]].flat();        // [1, 2, [3]]
[1, [2, [3]]].flat(2);       // [1, 2, 3]
['a', 'b'].at(-1);           // 'b'
[].at(-1);                   // undefined(安全)

真正影响效率的从来不是方法名长短,而是是否触发隐式类型转换、是否重复遍历、是否创建中间数组。写完一行数组操作,先问自己:它遍历了几次?改了原数组吗?返回的是我真正要的东西,还是还得再加工?

热门AI工具

更多
Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

2786

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

5539

2023.11.06

Chrome开启无痕模式
Chrome开启无痕模式

本专题整合了Chrome无痕模式开启相关内容,阅读专题下面的文章了解更多详细教程。

3947

2026.03.24

sort排序函数用法
sort排序函数用法

sort排序函数的用法:1、对列表进行排序,默认情况下,sort函数按升序排序,因此最终输出的结果是按从小到大的顺序排列的;2、对元组进行排序,默认情况下,sort函数按元素的大小进行排序,因此最终输出的结果是按从小到大的顺序排列的;3、对字典进行排序,由于字典是无序的,因此排序后的结果仍然是原来的字典,使用一个lambda表达式作为key参数的值,用于指定排序的依据。

1138

2023.09.04

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1798

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2804

2023.09.04

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

6164

2023.10.24

字符串介绍
字符串介绍

字符串是一种数据类型,它可以是任何文本,包括字母、数字、符号等。字符串可以由不同的字符组成,例如空格、标点符号、数字等。在编程中,字符串通常用引号括起来,如单引号、双引号或反引号。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

5889

2023.11.24

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

60

2026.10.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn