• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Javascript 常见的高阶函数详情

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

示例:

function add(x, y, f) {
 return f(x) + f(y);
}

//用代码验证一下:
add(-5, 6, Math.abs); // 11

一、常见的高阶函数

ES6中数组新增了几种方法,其中 mapreducefilter 几个都是高阶函数,除此,普通的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 常见的高阶函数内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
vue3封装轮播图组件的方法发布时间:2022-02-05
下一篇:
深入理解Vue的插件机制与install详细发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap