聊聊 Javascript 常见的高阶函数

开发 前端
高阶函数,英文叫 Higher Order function。一个函数可以接收另外一个函数作为参数,这种函数就叫做高阶函数。

[[422538]]

高阶函数,英文叫 Higher Order function。一个函数可以接收另外一个函数作为参数,这种函数就叫做高阶函数。

示例:

  1. function add(x, y, f) { 
  2.  return f(x) + f(y); 
  3.  
  4. //用代码验证一下: 
  5. add(-5, 6, Math.abs); // 11 

一、常见的高阶函数

ES6中数组新增了几种方法,其中 map、reduce、filter 几个都是高阶函数,除此,普通的sort也是高阶函数。分别介绍下新增的三个方法。

1.1、filter

filter 是过滤数组,返回满足条件的数据,组成一个新的数组返回,不满足条件的被丢弃。

实例1:取出数组中小于 100 的数据,放到一个新数组中

  1. let grad = [ 102, 188, 55, 66, 200, 800 ] 
  2. let arr2 = grad.filter( function(item){ 
  3.  return item <= 100 
  4. }) 
  5. console.log("arr2",arr2)// 55, 66 

 上述实例中,filter传入的参数是一个函数,传入的函数依次作用于每个元素,然后根据返回值是 true 或 false 决定保留还是丢弃元素。因为只有 55 66 两个满足条件,所以新的数组中只有这两个元素。

1.2、map

map 是映射的意思。

原数组被映射成一个新的数组,返回值是一个新数组,不改变原来的数组。新的数组与原数组的长度是不会改变的。

实例2:给数据每个元素放大 2 倍。

  1. let arr2 = [ 55, 66 ] 
  2. let arr3 = arr2.map( item => { 
  3.  return item*2 
  4. }) 
  5. //返回结果 [ 110, 132 ] 

 上述实例,map接收的参数是一个函数,该函数依次作用于每个元素,对元素放大了2倍,也可以对其进行任意的复杂操作。

1.3、reduce

reduce 是对数组进行汇总的,往往进去一个数组,出来是一个数据。经常用于求和和计算平均值。

实例3:对上个实例返回的结果进行求和。

  1. let sum = arr3.reduce((tmp,item)=>{ 
  2.  return tmp+item 
  3. }) 
  4. //返回结果 242 

 重点来了,如果我们想把上边三个实例合并到一起执行,最终我们可以写得有多简单呢?

  1. // 复杂写法 
  2. let grad = [102,188,55,66,200,800] 
  3. let arr2 = grad.filter(function(item){ 
  4.  return item <= 100 
  5. }) 
  6. let arr3 = arr2.map(item=>{ 
  7.  return item*2 
  8. }) 
  9. let sum = arr3.reduce((tmp,item)=>{ 
  10.  return tmp+item 
  11. }) 
  12.  
  13. //简单写法 
  14. let sum2 = grad 
  15.            .filter( item => {return item <= 100}) 
  16.           .map(item=>{return item*2}) 
  17.           .reduce((tmp,item)=>{return tmp+item}) 

 

责任编辑:姜华 来源: 今日头条
相关推荐

2021-05-28 08:52:45

Hive分析函数

2022-08-24 14:14:58

JavaScript函数

2021-01-22 07:48:07

JavaScript 高阶函数闭包

2021-10-09 07:10:30

JavaScriptBigIn函数

2022-01-04 06:50:12

数据摘要方法

2023-11-28 09:19:12

2022-02-09 11:02:16

JavaScript前端框架

2015-04-08 10:27:43

JavaScript字符串操作函数

2021-10-17 22:40:51

JavaScript开发 框架

2021-01-07 07:53:10

JavaScript内存管理

2022-03-17 08:34:47

TypeScript项目类型

2022-02-07 21:49:19

串行通信UART

2022-01-04 12:19:12

自动驾驶系统开发

2022-03-30 09:01:37

CSS属性函数

2017-01-22 21:13:48

Android移动开发高阶函数

2019-07-23 15:04:54

JavaScript调用栈事件循环

2021-06-02 09:01:19

JavaScript 前端异步编程

2020-11-09 07:25:20

函数 JavaScript数据

2023-05-06 07:27:47

2022-10-24 00:03:26

GolangNew函数
点赞
收藏

51CTO技术栈公众号