JavaScript 常见的高阶函数详解
本文介绍 JavaScript 中的高阶函数概念，即接收函数作为参数的函数。重点解析 ES6 新增的 filter、map 和 reduce 三个常用高阶函数的用法与区别，并通过实例展示如何链式调用实现复杂数据处理，同时提及 sort 也是高阶函数。
高阶函数，英文叫 Higher Order function。其定义为一个函数可以接收另一个函数作为参数，这类函数即被称为高阶函数。
示例：
function add(x, y, f) {
return f(x) + f(y);
}
//用代码验证一下：
add(-5, 6, Math.abs); // 11
一、常见的高阶函数
在ES6标准中，数组新增了多种方法，其中map、reduce和filter 均属于高阶函数。此外，常规的sort方法同样也是高阶函数。下文将分别介绍新增的三个方法。
1.1、filter
filter 用于过滤数组，返回满足特定条件的数据并组成新数组，不满足条件的元素将被丢弃。
实例1：取出数组中小于 100 的数据，放到一个新数组中
let grad = [ 102, 188, 55, 66, 200, 800 ]
let arr2 = grad.filter( function(item){
return item <= 100
})
console.log("arr2",arr2)// 55, 66
在上述实例中，filter接收的参数是一个函数，该函数依次作用于每个元素，并根据返回值是true 或false 来决定保留还是丢弃元素。由于只有 55 和 66 满足条件，因此新数组中仅包含这两个元素。
1.2、map
map 的含义是映射。
原数组通过映射生成一个新数组，返回值即为该新数组，原数组保持不变。新数组的长度与原数组一致，不会发生改变。
实例2：给数据每个元素放大 2 倍。
let arr2 = [ 55, 66 ]
let arr3 = arr2.map( item => {
return item*2
})
//返回结果 [ 110, 132 ]
上述实例中，map接收的参数是一个函数，该函数依次作用于每个元素，将元素值放大 2 倍，也可执行任意复杂的操作。
1.3、reduce
reduce 用于对数组进行汇总操作，通常输入一个数组，输出一个单一数据。它常用于求和及计算平均值等场景。
实例3：对上个实例返回的结果进行求和。
let sum = arr3.reduce((tmp,item)=>{
return tmp+item
})
//返回结果 242
重点来了，如果我们想把上边三个实例合并到一起执行，最终我们可以写得有多简单呢？
负责写法：
// 复杂写法
let grad = [102,188,55,66,200,800]
let arr2 = grad.filter(function(item){
return item <= 100
})
let arr3 = arr2.map(item=>{
return item*2
})
let sum = arr3.reduce((tmp,item)=>{
return tmp+item
})
简单写法：
//简单写法
let sum2 = grad
.filter( item => {return item <= 100})
.map(item=>{return item*2})
.reduce((tmp,item)=>{return tmp+item})
到此这篇关于Javascript 常见的高阶函数详情的文章就介绍到这了,更多相关Javascript 常见的高阶函数内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
D3.js 比例尺与坐标轴的配置详解
2026-11-05 16:54:46
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法：concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19