详解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获得下拉框值的代码
Aug 13 Javascript
html a标签-超链接中confirm方法使用介绍
Jan 04 Javascript
解决jquery版本冲突的有效方法
Sep 02 Javascript
JavaScript解析json格式数据简单示例
Dec 09 Javascript
js实现将选中内容分享到新浪或腾讯微博
Dec 16 Javascript
JS在onclientclick里如何控制onclick的执行
May 30 Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 Javascript
element-ui表格合并span-method的实现方法
May 21 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 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
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
react的hooks的用法详解
2020/10/12 Javascript
记录Django开发心得
2014/07/16 Python
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
批处理与python代码混合编程的方法
2016/05/19 Python
python导入模块交叉引用的方法
2019/01/19 Python
python write无法写入文件的解决方法
2019/01/23 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
Python解析多帧dicom数据详解
2020/01/13 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
Python基于Webhook实现github自动化部署
2020/11/28 Python
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
高中生班主任评语
2014/04/25 职场文书
研究生简历自我评
2015/03/11 职场文书
初中团委工作总结
2015/08/13 职场文书
公司管理建议书
2015/09/14 职场文书
redis实现共同好友的思路详解
2021/05/26 Redis
python高温预警数据获取实例
2022/07/23 Python