详解JavaScript 高阶函数


Posted in Javascript onSeptember 14, 2020

高阶函数简介

高阶函数 的英文名叫 Higher-Order Function ,是 函数式编程 中的一种。他的表现形式往往是通过把函数作为参数传入另一个函数,或者将函数作为另一个函数的返回值返回。在实际开发业务中, 高阶函数往往可以抽象我们的代码 ,将我们的命令式编程转换为复用性更高级的函数式编程,从而 提升我们的代码质量 。

下面拿3个面试中常问的高阶函数举例子,希望看完以后能够提升大家对JS的理解,提高我们的代码质量。 chat is cheap,show you my code~

Array.map()

功能介绍

map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。 map() 方法按照原始数组元素顺序依次处理元素。

tips

注意: map() 不会对空数组进行检测。 注意: map() 不会改变原始数组。

实用意义及代码举例

//如果我们需要将一个数组中,每一项元素全都*2,
  //最基础的作法,是刚学JS时的循环遍历,再每一项中执行*2的操作,例如:
  let arr1 = [0,1,2,3,4,5,6];
  let arr2 = [];
  for (let i = 0;i<arr1.length;i++){
    arr2.push(arr1[i]*2)
  }
  console.log(arr2) //[0, 2, 4, 6, 8, 10, 12]
  
  //这样确实可以达到效果,但是这属于命令式编程;
  //换做Map高阶函数的方法实现起来,只需要1行,复用性也会更强。
  
  let arr1 = [0,1,2,3,4,5,6];
  let arr2 = arr1.map((item)=> item*2)
  console.log(arr2) //[0, 2, 4, 6, 8, 10, 12]

总结:

针对数组中每一项都要做的操作,可以实用map方法

Array.reduce()

功能介绍

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
reduce() 可以作为一个高阶函数,用于函数的 compose。

tips:

注意: reduce() 对于空数组是不会执行回调函数的。

实用意义及代码举例

//如果有一个需求,需要我们将数组中每一项求和
  //实用reduce,可以优雅简洁的实现:
  let arr1 = [0,1,2,3,4,5,6];
  let arr2 = arr1.reduce((prev,cur)=>{ //prev代表之前所有项的最终结果,cur代表当前项的值
    return prev+cur
  },0) //这里的0是初始项传入的值,这里写为0
  console.log(arr2) //21 求和完毕
  
  
  //reduce也可以用于数组去重
  let arr1 = [0,1,2,3,4,5,6,5,6,7,6];
  let arr2 = arr1.reduce((prev,cur)=>{
    //当之前所有项不包含当前项元素时,push,否则直接返回之前所有去重项。
    prev.indexOf(cur) === -1 && prev.push(cur);
    return prev
  },[]) //传入空数组作为初始值
  console.log(arr2) //[0, 1, 2, 3, 4, 5, 6, 7]

总结:

针对数组中所有的项累计计算的操作,最终输入一个值,可以使用reduce方法

Array.filter()

功能介绍

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

tips

注意: filter() 不会对空数组进行检测。
注意: filter() 不会改变原始数组。

实用代码举例

//例如,需求为获取数组中所有大于等于4的元素,将他们组成一个数组
  let arr1 = [0,1,2,3,4,5,6,5,6,7,6];
  let arr2 = arr1.filter((item)=>{
    return item >= 4
  },[])
  console.log(arr2) //[4, 5, 6, 5, 6, 7, 6]

总结:

对于数组中每一项的筛选功能,可以使用filter方法

Array.flat()

功能介绍

flat() 方法可以将嵌套数组(多为数组)降维,变成低维数组或者一维数组。(数组摊平展开)

tips

注意: 存在一定兼容性问题,例如IE不兼容

实用代码举例

let arr1 = [0,1,2,3,4,5,[1,2,3],[1,2,[1,2,3,4]],6,7,6];
  let arr2 = arr1.flat(1) //flat中传入需要降维的层数,默认是1,如果有个三维数组他会被降级为二位数组,
  let arr3 = arr1.flat(Infinity) //[0, 1, 2, 3, 4, 5, 1, 2, 3, 1, 2, 1, 2, 3, 4, 6, 7, 6] //如果不管是几维数组,需要得到1维数组的话,可以直接使用Infinity 
  console.log(arr2) //[0, 1, 2, 3, 4, 5, 1, 2, 3, 1, 2, [1,2,3,4], 6, 7, 6]

以上就是详解JavaScript 高阶函数的详细内容,更多关于JavaScript 高阶函数的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
jQuery动画特效实例教程
Aug 29 Javascript
PHP守护进程实例
Mar 06 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 Javascript
AngularJs  Understanding Angular Templates
Sep 02 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
简单的React SSR服务器渲染实现
Dec 11 Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
JS使用for in有序获取对象数据
May 19 Javascript
vue实现简单计算商品价格
Sep 14 #Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 #Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 #Javascript
swiper自定义分页器的样式
Sep 14 #Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 #Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 #Javascript
原生JS实现九宫格抽奖
Sep 13 #Javascript
You might like
修改了一个很不错的php验证码(支持中文)
2007/02/14 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
document.documentElement &amp;&amp; document.documentElement.scrollTop
2007/12/01 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
[04:45]DOTA2-DPC中国联赛正赛 iG vs LBZS 赛后选手采访
2021/03/11 DOTA
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
python制作抖音代码舞
2019/04/07 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
html5的canvas实现3d雪花飘舞效果
2013/12/27 HTML / CSS
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
旅游网创业计划书
2014/01/31 职场文书
2014年大学庆元旦迎新年活动方案
2014/03/09 职场文书
金融保险专业求职信
2014/09/03 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
公司授权委托书范文
2014/09/21 职场文书
个人租房协议书样本
2014/10/01 职场文书
技术入股合作协议书
2014/10/07 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
环卫工人慰问信
2015/02/15 职场文书
Python实现的扫码工具居然这么好用!
2021/06/07 Python
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技