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

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

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

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

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

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

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

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

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

408

2023.09.04

php中foreach用法
php中foreach用法

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

202

2025.12.04

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

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

432

2023.07.18

堆和栈区别
堆和栈区别

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

600

2023.08.10

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

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

77

2025.09.05

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

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

39

2025.11.16

golang map原理
golang map原理

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

67

2025.11.17

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

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

47

2025.11.27

PHP高性能API设计与Laravel服务架构实践
PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开,重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景,深入分析性能瓶颈定位与优化思路,帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

4

2026.03.04

热门下载

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

精品课程

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

共58课时 | 5.7万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.3万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

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

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