JavaScript数组方法_高阶函数实现-js教程-PHP中文网

JavaScript数组方法_高阶函数实现

夢幻星辰

发布： 2025-11-29 21:21:06

原创

670人浏览过

map、filter、reduce 是 JavaScript 数组高阶函数，用于映射、筛选和累积计算，不修改原数组，返回新数组或值，支持链式调用，结合箭头函数使代码更简洁清晰。

javascript数组方法_高阶函数实现

JavaScript中的数组高阶函数能极大简化数据处理逻辑。它们不改变原数组，而是返回新数组或结果值，配合箭头函数使用更简洁。以下是几个常用高阶函数的实现原理和使用方式。

map：映射生成新数组

map 方法对数组每个元素应用一个函数，并返回由结果组成的新数组。

例如将数组中每个数字平方：

const nums = [1, 2, 3];
const squared = nums.map(x => x * x); // [1, 4, 9]

其内部实现逻辑类似于：

<font face="monospace">
function map(arr, fn) {
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    result.push(fn(arr[i], i, arr));
  }
  return result;
}
</font>

登录后复制

filter：筛选符合条件的元素

filter 返回一个新数组，包含所有使回调函数返回 true 的元素。

立即学习“Java免费学习笔记（深入）”；

比如筛选出偶数：

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

手动实现方式如下：

站长俱乐部购物系统

功能介绍：1、模块化的程序设计，使得前台页面设计与程序设计几乎完全分离。在前台页面采用过程调用方法。在修改页面设计时只需要在相应位置调用设计好的过程就可以了。另外，这些过程还提供了不同的调用参数，以实现不同的效果；2、阅读等级功能，可以加密产品，进行收费管理；3、可以完全可视化编辑文章内容，所见即所得；4、无组件上传文件，服务器无需安装任何上传组件，无需支持FSO，即可上传文件。可限制文件上传的类

查看详情

<font face="monospace">
function filter(arr, fn) {
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    if (fn(arr[i], i, arr)) {
      result.push(arr[i]);
    }
  }
  return result;
}
</font>

登录后复制

reduce：累积计算最终值

reduce 将数组“压缩”为一个值，常用于求和、扁平化等操作。

如计算数组总和：

const values = [1, 2, 3, 4];
const sum = values.reduce((acc, cur) => acc + cur, 0); // 10

自定义实现思路：

<font face="monospace">
function reduce(arr, fn, initialValue) {
  let acc = initialValue;
  for (let i = 0; i < arr.length; i++) {
    acc = fn(acc, arr[i], i, arr);
  }
  return acc;
}
</font>

登录后复制