0

0

如何掌握JavaScript数组操作方法【教程】

幻影之瞳

幻影之瞳

发布时间:2026-01-17 18:35:02

|

814人浏览过

|

来源于php中文网

原创

会直接修改原数组的方法有 push()、pop()、shift()、unshift()、splice()、sort() 和 reverse();其余如 map()、filter()、find()、forEach()、reduce() 等均不改变原数组。

如何掌握javascript数组操作方法【教程】

JavaScript 数组方法不是靠背出来的,而是靠在真实场景里反复试错、对比、替换才真正掌握的。你不需要记住全部 30+ 个方法,但必须清楚哪些方法会改原数组、哪些返回新数组、哪些必须配合 return 才有效。

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

这是最容易引发 bug 的地方:你以为生成了新数组,结果原数据被悄悄改了。

  • push()pop()shift()unshift() —— 都会改变原数组长度和内容
  • splice() —— 最危险的一个,既能删又能插还能替,只要调用就改原数组
  • sort()reverse() —— 看似“只排序”,实则原地操作;[3, 1, 2].sort() 得到的是 [1, 2, 3],但原数组已变

如果你需要保留原始数组,必须先拷贝:

const newArr = [...oldArr]; // 或 oldArr.slice()
,再对 newArr 调用这些方法。

map()filter()find() 的关键区别在哪?

它们都遍历、都不改原数组,但返回值类型和语义完全不同,混用会导致逻辑断裂。

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

  • map() —— 输入多少项,输出多少项(一一映射),返回新数组;漏写 return 会得到一堆 undefined
  • filter() —— 返回满足条件的元素组成的新数组,长度 ≤ 原数组;回调函数必须返回布尔值
  • find() —— 只返回第一个匹配项(不是数组!),没找到返回 undefined;适合“找某个用户”“找默认配置”这类场景

示例对比:

const nums = [1, 2, 3, 4];<br>nums.map(x => x * 2);    // [2, 4, 6, 8]<br>nums.filter(x => x > 2); // [3, 4]<br>nums.find(x => x === 3); // 3

天工大模型
天工大模型

中国首个对标ChatGPT的双千亿级大语言模型

下载

为什么 forEach() 不能替代 map()

很多人用 forEach() 手动 push 来模拟 map(),这既啰嗦又容易出错。

  • forEach() 没有返回值(返回 undefined),它只是“执行副作用”,比如发请求、改 DOM、打印日志
  • 想生成新数组,就该用 map();想遍历并做些事,才用 forEach()
  • forEach() + 外部数组变量,会引入可变状态,不利于调试和测试

反模式:

const doubled = [];<br>[1, 2, 3].forEach(x => doubled.push(x * 2)); // 不必要地复杂
正确写法:
const doubled = [1, 2, 3].map(x => x * 2); // 清晰、不可变、可链式

reduce() 的初始值到底要不要传?

不传初始值是常见错误源头:当数组为空时直接报错;当只有一项时,accumulator 是第一项,currentValue 是第二项——很容易索引错乱。

  • 统计、拼接、扁平化、分组等聚合操作,强烈建议显式传入初始值(如 0''[]{}
  • 初始值类型必须和预期返回值一致;reduce((sum, x) => sum + x, 0) 安全,reduce((sum, x) => sum + x) 在空数组时抛 TypeError
  • 嵌套结构处理(如把 [{id:1},{id:2}] 转成 {1: {}, 2: {}})必须传对象初始值

示例:

const items = [];<br>items.reduce((acc, x) => ({...acc, [x.id]: x}), {}); // 返回 {},安全<br>items.reduce((acc, x) => ({...acc, [x.id]: x})); // 报错:Reduce of empty array with no initial value

真正卡住人的从来不是语法,而是“这个方法到底动不动原数组”“它返回的是单个值还是数组”“我是不是该用 some() 而不是 find()”。多看 MDN 上每个方法的「返回值」和「是否会改变原数组」两栏,比抄十遍例子有用得多。

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

WorkBuddy
WorkBuddy

腾讯云推出的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用法的相关介绍,阅读专题下面的文章了解更多详细教程。

267

2025.12.04

堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

443

2023.07.18

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

605

2023.08.10

golang map内存释放
golang map内存释放

本专题整合了golang map内存相关教程,阅读专题下面的文章了解更多相关内容。

77

2025.09.05

golang map相关教程
golang map相关教程

本专题整合了golang map相关教程,阅读专题下面的文章了解更多详细内容。

40

2025.11.16

golang map原理
golang map原理

本专题整合了golang map相关内容,阅读专题下面的文章了解更多详细内容。

67

2025.11.17

java判断map相关教程
java判断map相关教程

本专题整合了java判断map相关教程,阅读专题下面的文章了解更多详细内容。

47

2025.11.27

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

76

2026.03.11

热门下载

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

精品课程

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

共58课时 | 6万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

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

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