JavaScript高阶函数实战：map、filter、reduce与自定义封装

高阶函数（Higher-Order Function）是指接收函数作为参数，或者将函数作为返回值的函数。在日常的JavaScript开发中，处理数组集合时使用最多的内置高阶函数是 map、filter 和 reduce。本文将系统梳理这三个核心函数的运作机制与实战组合方式，剖析工业级业务场景中的最佳实践，并从零手写实现符合规范的自定义高阶函数，帮助你建立清晰的函数式数据处理思维。

一、核心高阶函数的运行机制与基础用法

1. map：一对一投影转换

Array.prototype.map 遍历原数组的每一项，将每一项传给传入的回调函数，并将回调函数的返回值组成一个新数组返回。其核心特征是保证返回数组的长度与原数组完全一致。

const products = [
  { id: 101, name: "键盘", price: 299 },
  { id: 102, name: "鼠标", price: 129 },
  { id: 103, name: "显示器", price: 1499 }
];

// 提取商品名称数组
const productNames = products.map(item => item.name);
// 输出: ['键盘', '鼠标', '显示器']

// 对价格打9折并格式化
const discountedList = products.map(item => ({
  ...item,
  price: Number((item.price * 0.9).toFixed(2))
}));

2. filter：子集条件筛选

Array.prototype.filter 通过给定的断言回调函数（Predicate）对原数组各项进行真值测试。当且仅当回调返回真值（truthy）时，当前项才会被保留到新数组中。它不会修改元素本身的结构，只改变集合的容量。

// 筛选出价格大于200且非显示器的商品
const affordablePeripherals = products.filter(item => {
  return item.price > 200 && item.id !== 103;
});
// 输出: [{ id: 101, name: '键盘', price: 299 }]

3. reduce：累加归约与多维聚合

Array.prototype.reduce 是高阶函数中最具表现力的一个。它通过接收一个累加器（accumulator）和当前值（currentValue），将整个数组收敛为一个单一结果。该结果不仅可以是基础类型数字或字符串，还可以是对象、哈希表、甚至是另一个嵌套数组。

// 计算所有商品的单价总和
const totalPrice = products.reduce((accumulator, item) => {
  return accumulator + item.price;
}, 0);
// 输出: 1927

// 按价格区间对商品进行分组归类
const groupedByPrice = products.reduce((acc, item) => {
  const category = item.price >= 500 ? "expensive" : "budget";
  if (!acc[category]) {
    acc[category] = [];
  }
  acc[category].push(item);
  return acc;
}, {});

二、实战：链式调用构建数据处理流水线

在复杂的业务逻辑中，单一方法往往难以直接满足需求。高阶函数返回全新数组的特性为链式调用（Chaining）提供了天然支持。我们可以像工业装配线一样，清晰地分离筛选、映射与汇总阶段。

假设我们有一批电商订单，需要统计特定部门且已完成支付的订单含税总营业额，代码可以写得非常声明化：

const rawOrders = [
  { id: "A1", dept: "3C", status: "PAID", amount: 1200 },
  { id: "A2", dept: "FOOD", status: "PAID", amount: 350 },
  { id: "A3", dept: "3C", status: "REFUNDED", amount: 800 },
  { id: "A4", dept: "3C", status: "PAID", amount: 450 }
];

const TAX_RATE = 0.06; // 6% 税率

const totalRevenue = rawOrders
  // 1. 过滤符合条件的有效订单
  .filter(order => order.dept === "3C" && order.status === "PAID")
  // 2. 映射为含税实际发生额
  .map(order => order.amount * (1 + TAX_RATE))
  // 3. 归约求和
  .reduce((total, taxedAmount) => total + taxedAmount, 0);

console.log(totalRevenue); // 1749

三、深入理解：动手封装自己的高阶函数

为了深刻理解高阶函数的底层边界条件（如稀疏数组跳过、上下文绑定的 this 以及 reduce 在未提供初始值时的首元素提取），我们手动为 Array.prototype 扩展实现。

1. 自定义封装 myMap

Array.prototype.myMap = function(callback, thisArg) {
  if (this == null) {
    throw new TypeError("Cannot read property 'myMap' of null or undefined");
  }
  if (typeof callback !== "function") {
    throw new TypeError(callback + " is not a function");
  }

  const O = Object(this);
  const len = O.length >>> 0; // 转换为无符号32位整数
  const result = new Array(len);

  for (let i = 0; i < len; i++) {
    // 检查属性是否在对象自身或原型链上存在，跳过稀疏数组空洞 (empty slots)
    if (i in O) {
      result[i] = callback.call(thisArg, O[i], i, O);
    }
  }

  return result;
};

2. 自定义封装 myFilter

Array.prototype.myFilter = function(callback, thisArg) {
  if (this == null) {
    throw new TypeError("Cannot read property 'myFilter' of null or undefined");
  }
  if (typeof callback !== "function") {
    throw new TypeError(callback + " is not a function");
  }

  const O = Object(this);
  const len = O.length >>> 0;
  const result = [];

  for (let i = 0; i < len; i++) {
    if (i in O) {
      const element = O[i];
      if (Boolean(callback.call(thisArg, element, i, O))) {
        result.push(element);
      }
    }
  }

  return result;
};

3. 自定义封装 myReduce

Array.prototype.myReduce = function(callback, initialValue) {
  if (this == null) {
    throw new TypeError("Cannot read property 'myReduce' of null or undefined");
  }
  if (typeof callback !== "function") {
    throw new TypeError(callback + " is not a function");
  }

  const O = Object(this);
  const len = O.length >>> 0;
  let k = 0;
  let accumulator;

  // 判断是否显式传入了 initialValue（利用 arguments.length 进行判断）
  if (arguments.length >= 2) {
    accumulator = initialValue;
  } else {
    // 未提供初始值时，寻找数组中第一个有效存在的元素作为初始值
    let kPresent = false;
    while (k < len && !kPresent) {
      if (k in O) {
        accumulator = O[k];
        kPresent = true;
      }
      k++;
    }

    if (!kPresent) {
      throw new TypeError("Reduce of empty array with no initial value");
    }
  }

  for (; k < len; k++) {
    if (k in O) {
      accumulator = callback(accumulator, O[k], k, O);
    }
  }

  return accumulator;
};

4. 进阶封装：函数组合 Compose 与 Pipe

当多个高阶处理函数需要组合时，频繁创建中间数组会造成内存压力。我们可以利用 reduce 自定义封装通用的管道函数 pipe：

// 管道函数：自左向右执行输入函数集合
const pipe = (...functions) => {
  return (input) => {
    return functions.reduce((currentValue, fn) => fn(currentValue), input);
  };
};

// 业务演示
const trimStr = str => str.trim();
const toUpper = str => str.toUpperCase();
const addExclamation = str => `${str}!`;

const formatGreeting = pipe(trimStr, toUpper, addExclamation);
console.log(formatGreeting("   hello javascript   ")); // "HELLO JAVASCRIPT!"

四、避坑指南与最佳实践

五、总结

JavaScript高阶函数不仅仅是一组工具API，更代表了从“指令式编程（描述怎么做）”到“声明式编程（描述要什么）”的思维转变：

• map 聚焦于同构转换，保证一对一映射的纯净性；
• filter 聚焦于维度筛选，保证原对象结构的不可变性；
• reduce 聚焦于状态归约，能够实现从简单求和到复杂抽象管道的所有操作；
• 通过合理自定义封装这三者及其复合管道 pipe，可以在业务中写出更健壮、易测试且高可维护的前端与Node.js代码。