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

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

雨伟小哥_3725

雨伟小哥_3725

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

|

834人浏览过

|

来源于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免费学习笔记(深入)”;

Alibabacloud Sdk Client Initialization For Java
Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载
  • 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

为什么 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工具

更多
AionClaw
AionClaw Hot

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

咔片AIPPT

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

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

超级简历WonderCV

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

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

DeepSeek

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

豆包大模型

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

WorkBuddy

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

相关专题

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

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

1118

2023.09.04

php中foreach用法
php中foreach用法

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

698

2025.12.04

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

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

4847

2023.07.18

堆和栈区别
堆和栈区别

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

2188

2023.08.10

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

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

450

2025.09.05

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

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

323

2025.11.16

golang map原理
golang map原理

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

493

2025.11.17

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

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

263

2025.11.27

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

0

2026.09.30

热门下载

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

精品课程

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

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.6万人学习

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

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