JavaScript高阶函数实战：map、filter、reduce的使用与自定义实现

高阶函数（Higher-Order Function）是函数式编程范式在 JavaScript 中的核心体现，也是现代前端工程中处理数组集合数据的基石。简单来说，只要一个函数能够接受另一个函数作为参数，或者将一个函数作为返回值输出，它就符合高阶函数的定义。在 Array.prototype 提供的原生 API 中，map、filter 和 reduce 是使用频次最高、表现力最强的三位代表。掌握它们的语义差异、底层运作机制以及边界防御，能够让我们写出可读性更强、副作用更可控的代码。

一、高阶函数的核心概念与数据流转

传统的命令式循环（如 for、while）要求开发者显式管理循环索引、跳出条件和临时累加变量。这种写法虽然贴近底层执行过程，但在处理多层嵌套或链式变换时容易滋生变量污染和越界错误。高阶函数则采用声明式思路：开发者只需要专注于“对每一个数据项做什么处理”，底层的迭代逻辑、索引步进和边界检查全部封装在函数内部。

当数组调用高阶函数时，调用方传入一个回调函数（Callback Function）。高阶函数负责驱动迭代，并在每一步将当前元素、索引及原始数组注入到回调函数中，根据回调的执行结果完成数据收集或聚合。

二、Array.prototype.map 的使用与实现

1. 语义与实战用法

map 的核心语义是一对一映射。它创建一个新数组，其结果是原数组中的每个元素调用一次提供的回调函数后的返回值。调用 map 之后，新数组的长度必然与原数组完全相等。

// 场景：提取并转换接口返回的用户列表数据
const rawUsers = [
  { id: 101, firstName: "三", lastName: "张", active: true },
  { id: 102, firstName: "四", lastName: "李", active: false }
];

const userDisplayList = rawUsers.map(user => ({
  userId: user.id,
  fullName: `${user.lastName}${user.firstName}`,
  statusText: user.active ? "在线" : "离线"
}));

console.log(userDisplayList);
// 结果:
// [
//   { userId: 101, fullName: "张三", statusText: "在线" },
//   { userId: 102, fullName: "李四", statusText: "离线" }
// ]

2. 自定义实现 myMap

实现符合规范的 myMap 需要处理三个技术细节：

1. 防御检查：判断调用上下文 this 是否有效，以及传入的回调是否为函数；
2. 稀疏数组（Sparse Array）处理：原数组可能存在空槽（如 [1, , 3]），规范要求跳过未赋值的索引；
3. 执行上下文支持：map 允许传入可选的 thisArg，以指定回调执行时的 this 绑定。

Array.prototype.myMap = function(callback, thisArg) {
  // 1. 防御检查：this 必须为对象或数组
  if (this == null) {
    throw new TypeError("Array.prototype.myMap called on null or undefined");
  }
  // 2. 防御检查：callback 必须为可执行函数
  if (typeof callback !== "function") {
    throw new TypeError(callback + " is not a function");
  }

  // 3. 将 this 转为对象，并安全提取长度（遵循规范无符号右移转整型）
  const O = Object(this);
  const len = O.length >>> 0;
  const result = new Array(len);

  // 4. 遍历并构建新数组
  for (let i = 0; i < len; i++) {
    // 检查索引是否是对象本身的实际属性，跳过空槽
    if (i in O) {
      result[i] = callback.call(thisArg, O[i], i, O);
    }
  }

  return result;
};

// 验证测试
const numbers = [1, 2, 3];
const squared = numbers.myMap((x) => x * x);
console.log(squared); // [1, 4, 9]

// 稀疏数组测试
const sparse = [1, , 3];
console.log(sparse.myMap(x => x * 2)); // [2, 空槽, 6]

三、Array.prototype.filter 的使用与实现

1. 语义与实战用法

filter 的核心语义是条件过滤。它接收一个谓词函数（Predicate），根据回调返回结果的真假决定是否在结果数组中保留对应项。返回值为真值（Truthy）的元素被浅拷贝推入新数组，反之被丢弃。输出数组的长度始终小于或等于原始数组。

// 场景：在电商订单中筛选出待支付且未超时的有效订单
const orders = [
  { orderId: "A001", status: "UNPAID", isExpired: false, amount: 260 },
  { orderId: "A002", status: "PAID", isExpired: false, amount: 1200 },
  { orderId: "A003", status: "UNPAID", isExpired: true, amount: 50 },
  { orderId: "A004", status: "UNPAID", isExpired: false, amount: 890 }
];

const pendingOrders = orders.filter(order => order.status === "UNPAID" && !order.isExpired);
console.log(pendingOrders);
// 结果仅保留 A001 与 A004 两个订单对象

2. 自定义实现 myFilter

Array.prototype.myFilter = function(callback, thisArg) {
  if (this == null) {
    throw new TypeError("Array.prototype.myFilter called on 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 (callback.call(thisArg, element, i, O)) {
        result.push(element);
      }
    }
  }

  return result;
};

// 验证测试
const values = [10, 25, 30, 45, 5];
const greaterThan20 = values.myFilter(item => item > 20);
console.log(greaterThan20); // [25, 30, 45]

四、Array.prototype.reduce 的使用与深度实战

1. 语义与运作机制

reduce 是数组方法中形态最为灵活的高阶函数，其核心语义是多对一折叠（Fold）。它将数组中的所有项逐步归纳为一个单一结果。这个结果不仅可以是数字或字符串，也可以是一个对象、嵌套 Map，甚至是另一个全新的数组。

reduce 接收两个参数：累加器回调函数 (accumulator, currentValue, currentIndex, array) 和可选的初始值 initialValue。其迭代状态流转遵循严格的交接规则：

2. 实战进阶：结构化分组与管道组合

除了常规的数值累加，reduce 更大的价值在于重构数据形态：

// 实战场景 1：按分类分组（模拟 groupBy）
const inventory = [
  { name: "苹果", type: "水果", quantity: 15 },
  { name: "芹菜", type: "蔬菜", quantity: 8 },
  { name: "香蕉", type: "水果", quantity: 20 },
  { name: "胡萝卜", type: "蔬菜", quantity: 12 }
];

const grouped = inventory.reduce((acc, item) => {
  const key = item.type;
  if (!acc[key]) {
    acc[key] = [];
  }
  acc[key].push(item);
  return acc;
}, {});

console.log(grouped);
// 输出按“水果”与“蔬菜”分类归总的对象结构

3. 自定义实现 myReduce

手写 reduce 的最大难点在于精准处理未传入 initialValue 时的起始索引寻找逻辑，必须在遇到稀疏数组时跳过空槽，定位到第一个真实存在的元素。

Array.prototype.myReduce = function(callback, initialValue) {
  if (this == null) {
    throw new TypeError("Array.prototype.myReduce called on 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;

  // 1. 判断是否传入了 initialValue（判断实参个数）
  if (arguments.length >= 2) {
    accumulator = initialValue;
  } else {
    // 2. 未传 initialValue 时，寻找第一个实际存在的元素作为初始值
    let kPresent = false;
    while (k < len) {
      if (k in O) {
        accumulator = O[k];
        kPresent = true;
        k++;
        break;
      }
      k++;
    }
    // 3. 如果数组为空且没有初始值，按照 ECMAScript 规范抛出 TypeError
    if (!kPresent) {
      throw new TypeError("Reduce of empty array with no initial value");
    }
  }

  // 4. 从当前步进位置 k 继续迭代到末尾
  while (k < len) {
    if (k in O) {
      accumulator = callback(accumulator, O[k], k, O);
    }
    k++;
  }

  return accumulator;
};

// 验证测试
const sum = [1, 2, 3, 4].myReduce((acc, cur) => acc + cur, 0);
console.log(sum); // 10

// 稀疏数组与无初始值测试
const sparseList = [, 10, , 20];
const total = sparseList.myReduce((acc, cur) => acc + cur);
console.log(total); // 30

五、规范级自定义实现的推导与关键边界

实现符合 ECMAScript 规范的原型扩展并非简单地写一个 for 循环，需要严格覆盖以下推导与执行步骤：

六、三大高阶函数选型对比与总结

在面对具体的业务场景时，选用哪一个高阶函数主要取决于输入与输出的关系模型：

为了便于速查与系统梳理，以下表格总结了三者的核心特征：

在实际工程开发中，这三者经常链式组合使用，例如通过 filter 剔除无效数据、通过 map 格式化展示字段，最后通过 reduce 计算金额总和。通过深入理解它们的内部运行机制和边界细节，我们不仅能在日常业务中快速写出优雅直观的代码，在面试和底层技术考察中也能游刃有余地完成规范级的手写实现。