javascript怎样操作数组_它有哪些高阶函数?

星晨姑娘_8945

星晨姑娘_8945

2026-01-15

544人浏览

原创

map、filter、reduce、slice、concat不改变原数组;push、pop、shift、unshift、splice、sort、reverse会修改原数组;ES2023新增toSorted()和toReversed()可安全替代sort/reverse。

javascript怎样操作数组_它有哪些高阶函数?

JavaScript 数组的高阶函数不是“语法糖”,而是实际开发中替代 for 循环的核心工具;用错或混用 map、filter、reduce 会导致副作用、性能浪费或逻辑错误。

哪些函数会改变原数组?哪些不会?

这是最常踩坑的点:多数高阶函数(map、filter、reduce、slice、concat)不修改原数组,返回新数组;但 push、pop、shift、unshift、splice、sort、reverse 会直接修改原数组。

比如:

const arr = [3, 1, 4];
arr.sort(); // ❌ 原地排序,arr 变成 [1, 3, 4]
[3, 1, 4].toSorted(); // ✅ 返回新数组,ES2023 新增,不改原数组
  • sort 和 reverse 是少数几个「高阶语义但破坏性行为」的内置方法,务必留意
  • 想安全排序,优先用 [...arr].sort((a,b) => a - b) 或 arr.toSorted()(注意兼容性)
  • splice 虽然功能强(增删改),但它不是高阶函数——它不接收回调,也不返回新数组,只返回被删除的元素

map、filter、reduce 的核心区别和误用场景

它们都接收回调函数,但语义和返回值完全不同:

  • map:一对一转换,输入 n 项 → 输出 n 项新数组;不能跳过元素,也不能合并结果
  • filter:条件筛选,输入 n 项 → 输出 ≤ n 项新数组;回调返回真值才保留该元素
  • reduce:聚合计算,输入 n 项 → 输出 1 个值(可以是数组、对象、数字等);必须提供初始值(acc),否则首项自动当初始值,易出错

常见误用:

const nums = [1, 2, 3];
nums.map(x => x * 2).filter(x => x > 3); // ✅ 正确:先映射再过滤
nums.filter(x => x > 3).map(x => x * 2); // ❌ 返回空数组,后续 map 无意义

另一个典型错误:reduce 忘记返回 acc:

Java调试
Java调试

通过 JDWP 实现 Java 远程调试:连接远程 JVM、设置断点、单步执行代码、查看变量值、获取调用栈。适用于需要调试远程 Java 应用、排查运行时状态、追踪代码执行流程的场景。 术语注解 JDWP:Java Debug Wire Protocol,Java 调试有线协议(Java 远程调试底层通信协议) remote JVM:远程 Java 虚拟机 step through code:代码单步调试(步入 / 步过 / 步出调试) inspect variables:变量查看 / 变量检视 stac

下载
nums.reduce((acc, x) => { acc.push(x * 2); }); // ❌ acc 是 undefined,下一轮崩溃

正确写法:

nums.reduce((acc, x) => { acc.push(x * 2); return acc; }, []); // ✅ 或更简洁:nums.map(x => x * 2)

还有哪些实用但被低估的数组方法?

除了三大件,这些方法在真实项目中高频出现且不可替代:

  • find 和 findIndex:按条件取第一个匹配项或索引,比 filter(...)[0] 更高效、语义更清晰
  • some 和 every:布尔判断,替代手写循环 + break;some 遇真即停,every 遇假即停
  • flat 和 flatMap:处理嵌套数组;flatMap(fn) ≡ map(fn).flat(),但更高效(只遍历一次)
  • at:支持负索引(arr.at(-1) 取末尾),比 arr[arr.length - 1] 安全(不报错)

示例:

const users = [{id: 1, active: true}, {id: 2, active: false}];
users.some(u => u.active); // true
users.find(u => u.id === 2); // {id: 2, active: false}
[[1, 2], [3]].flat(); // [1, 2, 3]
['a', 'b'].flatMap(x => [x, x]); // ['a', 'a', 'b', 'b']

高阶函数的关键不在“会不会用”,而在“能不能一眼判断该用哪个”;多数 bug 来自把 reduce 当 map 用,或在不需要遍历全部时用了 filter。多看控制台打印的返回值类型,比背 API 文档更管用。

Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南

相关专题

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

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

2023.09.04

1158

7

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

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

2025.10.15

3140

7

java break和continue
java break和continue

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

2025.10.24

827

6

length函数用法
length函数用法

length函数用于返回指定字符串的字符数或字节数。可以用于计算字符串的长度,以便在查询和处理字符串数据时进行操作和判断。 需要注意的是length函数计算的是字符串的字符数,而不是字节数。对于多字节字符集,一个字符可能由多个字节组成。因此,length函数在计算字符串长度时会将多字节字符作为一个字符来计算。更多关于length函数的用法,大家可以阅读本专题下面的文章。

2023.09.19

1947

6

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

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

2025.09.05

690

5

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

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

2025.11.16

343

7

golang map原理
golang map原理

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

2025.11.17

553

20

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

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

2025.11.27

303

6

热门下载

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

精品课程

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

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习