详解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 相关文章推荐
JavaScript对象链式操作代码(jquery)
Jul 04 Javascript
用JavaScript实现动画效果的方法
Jul 20 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
原生js实现网易轮播图效果
Apr 10 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
JavaScript实现的选择排序算法实例分析
Apr 14 Javascript
详解Vue组件实现tips的总结
Nov 01 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 Javascript
webpack常用配置总览(小结)
Nov 18 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
html5中sharedWorker实现多页面通信的示例代码
May 07 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截取中文字符串的问题
2006/07/12 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
2018/08/31 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
Python数据结构与算法之字典树实现方法示例
2017/12/13 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
python中partial()基础用法说明
2018/12/30 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
2019/10/23 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
环保宣传标语
2014/06/12 职场文书
医院标语大全
2014/06/23 职场文书
爱心捐书活动总结
2014/07/05 职场文书
节能环保演讲稿
2014/08/28 职场文书
先进员工事迹材料
2014/12/20 职场文书
先进个人推荐材料
2014/12/29 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
主持人开场白台词
2015/05/29 职场文书
第一军规观后感
2015/06/12 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
Win10系统下配置Java环境变量
2021/06/13 Java/Android
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python