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

javascript数组如何操作_常用方法有哪些【教程】

小磊小哥_9411

小磊小哥_9411

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

|

211人浏览过

|

来源于php中文网

原创

会直接修改原数组的方法有push()、pop()、shift()、unshift()、splice()、sort()、reverse()、fill()和copyWithin();filter/map/reduce均返回新数组;find/findIndex/includes/indexOf适用于不同查找场景;for...of支持中断,forEach不支持。

javascript数组如何操作_常用方法有哪些【教程】

JavaScript 数组操作的核心不是背方法列表,而是理解哪些方法会改原数组、哪些返回新数组、哪些适合遍历、哪些适合查找——选错方法会导致隐性 bug 或性能浪费。

哪些数组方法会直接修改原数组?

这类方法副作用明显,容易在不经意间破坏数据源,尤其在 React/Vue 等响应式场景中引发渲染异常。

  • push()、pop()、shift()、unshift():增删首尾元素,返回新长度或被删元素
  • splice():万能修改器,可删、可插、可替,返回被删除的元素数组
  • sort():默认按字符串 Unicode 排序,[10, 2, 30].sort() 得到 [10, 2, 30](不是 [2, 10, 30]),必须传比较函数:arr.sort((a, b) => a - b)
  • reverse():就地翻转,不返回新数组

⚠️ 注意:fill() 和 copyWithin() 也改原数组,但使用频率低,容易被忽略其副作用。

filter / map / reduce 怎么选?

这三个是函数式编程主力,都返回新数组(不改原数组),但语义和用途截然不同。

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

  • filter():筛选。只保留满足条件的元素,返回等长或更短的新数组。例如:[1,2,3,4].filter(x => x % 2 === 0) → [2, 4]
  • map():转换。每个元素按规则映射为新值,返回等长新数组。例如:['a','b'].map(x => x.toUpperCase()) → ['A','B']
  • reduce():聚合。把数组“压成”一个值(可以是对象、数字、字符串甚至新数组)。例如:[1,2,3].reduce((sum, x) => sum + x, 0) → 6;想扁平化二维数组?arr.reduce((acc, row) => acc.concat(row), [])

别用 map() 做筛选(会留下 undefined),也别用 filter() 做转换(无法改结构)。

Java注释规范Skills
Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式,或要求按照代码注释规范处理 Java 文件时,使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则,并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括:补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载

find / findIndex / includes / indexOf 有什么区别?

都是查找类方法,但返回值类型和匹配逻辑差异大,混用会导致类型错误或逻辑漏洞。

  • find():返回第一个满足条件的元素值,没找到返回 undefined
  • findIndex():返回第一个满足条件的索引,没找到返回 -1
  • includes():返回 true/false,支持 NaN 检测(indexOf() 对 NaN 返回 -1)
  • indexOf():返回首次出现的索引,严格相等(===),对 NaN 失效

查是否存在用 includes() 最安全;要拿元素本身用 find();要改该位置的值,得先 findIndex() 再赋值。

for...of 和 forEach 哪个更适合日常遍历?

两者都用于遍历,但控制流能力完全不同,不能简单互换。

  • for...of:原生语法,支持 break、continue、return(在函数内),可中断循环
  • forEach():是方法调用,不支持 break 或 return 中断(return 只退出当前回调,不影响后续迭代)

需要提前退出(比如找到目标就停)、或需要捕获异常并 continue,必须用 for...of。仅做无条件遍历且逻辑简单时,forEach() 可读性略高。

const arr = [1, 2, 3, 4, 5];
// ✅ 正确:可中断
for (const item of arr) {
  if (item === 3) break;
  console.log(item); // 输出 1, 2
}
<p>// ❌ 无效:return 不会中断 forEach
arr.forEach(item => {
if (item === 3) return; // 下面的 log 还是会执行 4 和 5
console.log(item);
});

真正容易被忽略的是:所有高阶方法(map、filter 等)内部都创建新数组,大数据量时内存开销明显;而 for 或 for...of 是零分配。性能敏感场景别无脑链式调用。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
豆包大模型

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

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

DeepSeek

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

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

WorkBuddy

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

Seko
Seko Hot

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

相关专题

更多
sort排序函数用法
sort排序函数用法

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

1138

2023.09.04

php中foreach用法
php中foreach用法

本专题整合了php中foreach用法的相关介绍,阅读专题下面的文章了解更多详细教程。

798

2025.12.04

java中break的作用
java中break的作用

本专题整合了java中break的用法教程,阅读专题下面的文章了解更多详细内容。

2920

2025.10.15

java break和continue
java break和continue

本专题整合了java break和continue的区别相关内容,阅读专题下面的文章了解更多详细内容。

807

2025.10.24

java break和continue
java break和continue

本专题整合了java break和continue的区别相关内容,阅读专题下面的文章了解更多详细内容。

807

2025.10.24

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()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2844

2023.09.04

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

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

6164

2023.10.24

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

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

100

2026.10.22

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.3万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.5万人学习

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

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