0

0

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

紅蓮之龍

紅蓮之龍

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

|

191人浏览过

|

来源于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() 做转换(无法改结构)。

动态WEB网站中的PHP和MySQL:直观的QuickPro指南第2版
动态WEB网站中的PHP和MySQL:直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求,仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法,让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能,对常用的、强大的包

下载

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:原生语法,支持 breakcontinuereturn(在函数内),可中断循环
  • forEach():是方法调用,不支持 breakreturn 中断(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);
});

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

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

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

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

409

2023.09.04

php中foreach用法
php中foreach用法

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

225

2025.12.04

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

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

120

2025.10.15

java break和continue
java break和continue

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

261

2025.10.24

java break和continue
java break和continue

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

261

2025.10.24

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

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

738

2023.08.03

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

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

219

2023.09.04

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

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

1561

2023.10.24

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

23

2026.03.06

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 9.3万人学习

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

共26课时 | 1.6万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号