JavaScript高阶函数有哪些？map与filter详解

本文深入解析了JavaScript中最常用、最实用的两个高阶函数——map和filter，阐明它们作为“以函数为参数”的典型代表，如何在不修改原数组的前提下，分别实现一对一数据转换与条件筛选，生成结构清晰、安全可读的新数组；更通过直观示例和链式组合（如先过滤再映射）展示了二者协同处理真实业务场景（如提取成年用户姓名并转大写）的强大表达力与工程价值，让复杂的数据操作变得简洁、声明式且易于维护。

JavaScript高阶函数是指**以函数为参数，或返回函数的函数**。数组上的 map 和 filter 就是最典型、最常用的两个——它们不修改原数组，而是基于规则生成新数组，让数据处理更清晰、安全、可读。

map：对每个元素做统一转换

map 遍历原数组每一项，把回调函数的返回值收集起来，组成一个等长的新数组。

• 原数组不变，新数组长度一定和原数组相同
• 适合做格式化、计算、提取属性等“一对一映射”操作
• 回调函数接收三个参数：当前元素、索引、原数组（后两者常省略）

示例：

把数字数组全部翻倍

const nums = [2, 4, 6];
const doubled = nums.map(n => n * 2); // [4, 8, 12]

从用户对象中只取姓名

const users = [{name: 'Tom', age: 28}, {name: 'Lily', age: 22}];
const names = users.map(u => u.name); // ['Tom', 'Lily']

filter：按条件筛选出子集

filter 遍历原数组，对每一项执行回调函数；只有返回 true 的元素才会进入新数组。

• 新数组长度 ≤ 原数组长度
• 回调必须明确返回布尔值（true 留下，false 跳过）
• 常用于数据清洗、权限过滤、状态筛选等场景

示例：

挑出所有偶数

const nums = [1, 2, 3, 4, 5, 6];
const evens = nums.filter(n => n % 2 === 0); // [2, 4, 6]

只保留年龄大于 25 的用户

const adults = users.filter(u => u.age > 25); // [{name: 'Tom', age: 28}]

map 和 filter 可以链式组合使用

先 filter 再 map 是常见模式，逻辑清晰、无需中间变量。

示例：获取所有成年用户的姓名大写

const result = users
  .filter(u => u.age > 25)
  .map(u => u.name.toUpperCase()); // ['TOM']

这种写法表达意图直接，也便于后续扩展（比如再加 sort 或 reduce）。

今天关于《JavaScript高阶函数有哪些？map与filter详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！