什么是高阶函数_JavaScript中map和filter怎么用

狼影 2026-01-13 00:00:00 次阅读

高阶函数是接收函数为参数或返回函数的函数；map用于逐个转换数组元素并返回等长新数组，filter用于按条件保留元素并返回新数组，二者均不修改原数组且支持链式调用。

高阶函数就是把函数当参数传进去、或者返回值是函数的函数。JavaScript 里 map 和 filter 都是典型的高阶函数——它们不直接操作数据，而是接收一个函数作为逻辑“配方”，再按这个配方处理数组。

map 是用来“逐个转换”的，不是“筛选”

map 的核心行为是：对数组每个元素调用传入的函数，**原长度不变，返回新数组**。常见误解是拿它来删元素，结果反而留下 undefined。

传入函数必须有返回值，否则对应位置变成 undefined
原始数组完全不受影响（纯函数式，无副作用）
如果想同时做转换 + 筛选，别硬套 map，先 filter 再 map 更清晰

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2); // [2, 4, 6]
const withIndex = numbers.map((n, i) => `${i}:${n}`); // ['0:1', '1:2', '2:3']

filter 是用来“条件保留”的，空数组也是合法结果

filter 接收一个判断函数（谓词），只留下让该函数返回 true 的元素。注意：它不改变原数组，也不关心你返回什么类型——只要能转成布尔值就行。

判断函数参数是 (item, index, array)，常用第一个就够了
返回 falsy 值（false、0、''、null、undefined、NaN）就过滤掉
如果所有元素都不满足条件，返回空数组 []，不是 null 或 undefined

const words = ['apple', 'banana', 'cherry'];
const longWords = words.filter(w => w.length > 6); // ['banana', 'cherry']
const evens = [1, 2, 3, 4].filter(n => n % 2 === 0); // [2, 4]

map 和 filter 经常链式调用，但别滥用嵌套

它们返回的都是新数组，天然支持链式调用。但要注意：每次调用都新建数组，大数据量时可能影响性能；逻辑复杂时，拆成变量更易读、易调试。

简单转换+筛选：直接链式没问题，比如 arr.filter(x => x > 0).map(x => x * 2)
中间需要复用结果？存成变量，避免重复计算
判断逻辑变长（比如多条件 or 多步处理）？优先写成独立函数，再传给 filter 或 map

const data = [1, -2, 3, -4, 5];
// ✅ 清晰
const positiveDoubled = data.filter(n => n > 0).map(n => n * 2);
// ⚠️ 可读性差，且多建一次数组
const bad = data.map(n => n > 0 ? n * 2 : null).filter(n => n !== null);