JavaScript数组高阶函数 (filter/map/reduce)

最新推荐文章于 2025-12-04 17:20:28 发布

原创最新推荐文章于 2025-12-04 17:20:28 发布 · 740 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

前端同时被 2 个专栏收录

26 篇文章

订阅专栏

JavaScript

4 篇文章

订阅专栏

本文介绍了JavaScript中的三个重要高阶函数——filter、map和reduce，详细阐述了它们的功能和使用方法，并通过实例展示了如何利用这些函数进行函数式编程。filter用于过滤数组元素，map用于对数组元素进行转换，reduce则用于对数组元素进行累积计算。通过将这三个函数组合使用，可以实现复杂的数据处理逻辑。

所谓高阶函数，就是函数本身需要的参数也是一个函数

filter

过滤出数组中符合条件的元素。回调函数必须返回一个boolean值。

//newNums：过滤出nums中小于100的元素
let newNums = nums.filter(function (n) {
  return n < 100
})

map

依次将数组中每个元素放入回调函数中处理。

//new2Nums：将nums中的元素*2
let new2Nums = nums.map(function (n) {
  return n * 2
})

reduce

依次将数组中每个元素以及上个元素的返回结果放入回调函数中处理。

语法：reduce(回调函数(preValue, n), initValue)，preValue为上一个元素回调函数的返回值，对于第一个元素，preValue的值为initValue；n为每次进行操作的元素值。其中initValue为可选参数，默认为0。

//total：将nums中的所有元素汇总
let total = nums.reduce(function (preValue, n) {
  return preValue + n
}, 0)

函数式编程

将三个函数连写在一起，这种形式就是函数式编程：

let total = nums.filter(function (n) {
  return n < 100
}).map(function (n) {
  return n * 2
}).reduce(function (preValue, n) {
  return preValue + n
}, 0)

用箭头函数的语法简写：

let total = nums.filter(n => n < 100).map(n => n * 2).reduce((preValue, n) => preValue + n)