JavaScript 高阶函数：map、filter、reduce 与回调函数

函数也是值

在 JavaScript 中，函数和其他值一样也是值。你可以把它存进变量、放进数组、传给另一个函数，或者从函数中返回它。仅这一点就开启了一整套编程风格：

const square = (n) => n * n;
const operations = [square, (n) => n + 1];

console.log(square);          // the function itself
console.log(operations[0](5)); // call it out of the array

一旦你习惯把函数当作值来看待，高阶函数就不再神秘了。高阶函数就是接收函数作为参数、返回一个函数，或者两者兼有的函数。定义就这么简单。

接收函数作为参数

最常见的形式：一个接收回调并替你执行它的函数。你其实早就在不知不觉中用过这类函数了。

[1, 2, 3].forEach((n) => console.log(n * 10));

setTimeout(() => console.log("later"), 100);

forEach 是高阶函数：它接收你的函数，并对每个元素调用一次。setTimeout 也是高阶函数：它接收你的函数，并在延迟之后调用它。你只需关注做什么，它们负责什么时候做、做几次。

自己写一个也是一样的。下面这个小函数只在条件为真时才执行回调：

function runIf(condition, action) {
    if (condition) action();
}

runIf(2 + 2 === 4, () => console.log("math still works"));
runIf(false, () => console.log("never runs"));

action 是一个参数，只不过它恰好保存的是一个函数。用 action() 调用它，就会执行传进来的那个函数。

你真正会用到的三个：map、filter、reduce

数组自带一些高阶方法，可以取代你原本要写的大部分 for 循环。学会这三个，大量日常代码都会变得更短、更清晰。

map：转换每个元素

const prices = [10, 20, 30];
const withTax = prices.map((price) => price * 1.08);

console.log(withTax);

map 对每个元素调用一次你的函数，并把返回值收集到一个新数组中。长度相同，内容经过转换。原数组不会被修改。

filter：保留符合条件的元素

const users = [
    { name: "Ada", active: true },
    { name: "Boris", active: false },
    { name: "Chen", active: true },
];

const active = users.filter((user) => user.active);
console.log(active);

filter 保留回调返回真值的元素，丢弃其余元素。返回值是一个新数组，可能更短。

reduce：把数组归约成一个值

const numbers = [1, 2, 3, 4];
const total = numbers.reduce((sum, n) => sum + n, 0);

console.log(total);

reduce 是最通用的一个。回调接收当前的累加器和当前元素；你返回什么，什么就成为下一个累加器。第二个参数（这里是 0）是初始值。

你可以把它们链式调用，这正是这种风格的价值所在：

const orders = [
    { item: "book", price: 12, paid: true },
    { item: "pen", price: 3, paid: false },
    { item: "mug", price: 8, paid: true },
];

const revenue = orders
    .filter((o) => o.paid)
    .map((o) => o.price)
    .reduce((sum, p) => sum + p, 0);

console.log(revenue);

从上往下读：保留已付款的订单，取出价格，求和。没有循环，没有可变的计数器，也不用担心差一错误。

从函数中返回函数

这是高阶函数的另一半：一个构建并返回另一个函数的函数：

function multiplyBy(factor) {
    return (n) => n * factor;
}

const double = multiplyBy(2);
const triple = multiplyBy(3);

console.log(double(5));
console.log(triple(5));

multiplyBy(2) 运行一次，交回一个全新的函数。这个新函数仍然记得 factor，这就是闭包，后面会有专门的一页来讲。现在只需记住：用不同的参数调用 multiplyBy，就能从同一个模板得到不同的专用函数。

这种模式随处可见：

function prefixer(prefix) {
    return (message) => `[${prefix}] ${message}`;
}

const warn = prefixer("WARN");
const info = prefixer("INFO");

console.log(warn("disk almost full"));
console.log(info("backup complete"));

一个定义，两个可复用的函数。这比手写 warn 和 info 再让它们保持同步要好得多。

具名函数与内联回调

你可以传入一个内联的箭头函数，也可以按名字传入一个函数。两种方式都可行，选读起来更顺的那种：

const nums = [1, 2, 3, 4, 5];

// Inline: good when the logic is short and used once.
const doubled = nums.map((n) => n * 2);

// By name: good when the logic has a meaningful name or is reused.
const isEven = (n) => n % 2 === 0;
const evens = nums.filter(isEven);

console.log(doubled, evens);

当你传入 isEven（不带括号）时，你交出的是函数本身。如果加上 ()，它就会被立即调用，传进去的是它的结果。这是初学者的常见错误：

nums.filter(isEven);     // correct: passes the function
nums.filter(isEven());   // wrong: calls isEven with no args, passes the result

如果回调超过了几行，就把它提取出来并起个名字。周围的代码通常也会因此更好读。

完整示例

高阶函数在组合小部件时最能发挥作用。假设你有一个商品列表，想要找出价格实惠且有库存的商品名称，并转成大写：

const products = [
    { name: "notebook", price: 4, stock: 12 },
    { name: "laptop", price: 900, stock: 0 },
    { name: "pen", price: 1, stock: 50 },
    { name: "desk", price: 200, stock: 3 },
];

const affordable = (p) => p.price < 50;
const inStock = (p) => p.stock > 0;

const result = products
    .filter(affordable)
    .filter(inStock)
    .map((p) => p.name.toUpperCase());

console.log(result);

每个辅助函数只做一件事，每个数组方法只做一次转换。整个流水线读起来像是对你想要什么的说明，而不是对如何循环的描述。

什么时候不该用它们

高阶方法很好用，但并非在所有场景下都能替代循环：

• 如果需要中途停止，用带 break 的 for 或 for...of，比试图从 forEach 中跳出要清楚。
• 如果在回调中执行异步操作，map 和 forEach 不会等待它。改用带 await 的 for...of，或者 Promise.all 配合 map。
• 如果回调在修改共享状态，你就偏离了这种风格的长处。改用普通循环，或者重构成返回新值的写法。

用在合适的地方，map、filter 和 reduce 能省掉日常代码中大部分循环样板代码。用在所有地方，就会开始损害可读性。选那个最能表达意图的工具。

下一步：对象

函数并不是唯一值得用来构建程序的值。对象是 JavaScript 中把相关数据和行为组织在一起的主力，你刚才过滤和映射的那些数组里，装的大多也是对象。这就是下一页的内容。