JS高阶函数原理与用法实例分析


Posted in Javascript onJanuary 15, 2019

本文实例讲述了JS高阶函数原理与用法。分享给大家供大家参考,具体如下:

如果您正在学习JavaScript,那么您必须遇到高阶函数这个术语。这听起来复杂,其实不然。

使JavaScript适合函数式编程的原因是它接受高阶函数。

高阶函数在JavaScript中广泛使用。如果你已经用JavaScript编程了一段时间,你可能已经使用它们甚至不知道。

要完全理解这个概念,首先必须了解函数式编程是什么一等函数(first-Class Function)以及的概念。

函数式编程

在大多数简单的术语中,函数编程是一种编程形式,您可以将函数作为参数传递给其他函数,并将它们作为值返回。在函数式编程中,我们根据函数思考和编码。

JavaScript,Haskell,Clojure,Scala和Erlang是实现函数式编程的一些语言。

一等函数

如果您一直在学习JavaScript,您可能听说过JavaScript将函数视为一等公民。那是因为在JavaScript或任何其他函数式编程语言中,函数是对象。

在JavaScript中,函数是一种特殊类型的对象。他们是Function对象。

在JavaScript中,您可以使用其他类型(如对象,字符串或数字)执行的所有操作函数都可以执行。您可以将它们作为参数传递给其他函数(回调函数),将它们分配给变量并传递它们等等。这就是JavaScript中的函数被称为First-Class函数(一等函数)的原因。

高阶函数

高阶函数是对其他函数进行操作的函数,可以将它们作为参数或通过返回它们。简单来说,高阶函数是一个函数,它接收函数作为参数或将函数作为输出返回。

例如Array.prototype.mapArray.prototype.filter并且Array.prototype.reduce是一些高阶功能,内置的语言。

运行高阶函数

让我们看一下内置高阶函数的一些例子,看看它与我们不使用高阶函数的解决方案的比较。

Array.prototype.map

map()方法通过调用作为输入数组中每个元素的参数提供的回调函数来创建一个新数组。该map()方法将从回调函数中获取每个返回值,并使用这些值创建一个新数组。

传递给回调函数map()方法接受3个参数:elementindex,和array

假设我们有一个数组,我们想要创建一个新数组,其中包含第一个数组的每个值的两倍。让我们看看如何使用和不使用高阶函数来解决问题。

不用高阶函数

const arr1 = [1,2,3]; 
const arr2 = [];
for(let i = 0; i <arr1.length; i ++){ 
 arr2.push(arr1 [i] * 2); 
}
//打印[2,4,6] 
console.log(arr2);

使用高阶函数

const arr1 = [1,2,3];
const arr2 = arr1.map (function (item) { 
 return item * 2; 
}
console.log(arr2)

我们可以使用箭头函数语法使其更短

const arr1 = [1, 2, 3];
const arr2 = arr1.map(item => item * 2);
console.log(arr2);

创建我们自己的高阶函数

到目前为止,我们看到了语言中内置的各种高阶函数。现在让我们创建自己的高阶函数。

我们假设JavaScript没有原生map方法。我们可以自己构建它,从而创建我们自己的高阶函数。

假设我们有一个字符串数组,我们希望将此数组转换为整数数组,其中每个元素表示原始数组中字符串的长度。

const strArray = ['JavaScript', 'Python', 'PHP', 'Java', 'C'];
function mapForEach(arr, fn) {
 const newArray = [];
 for(let i = 0; i < arr.length; i++) {
 newArray.push(
  fn(arr[i])
 );
 }
 return newArray;
}
const lenArray = mapForEach(strArray, function(item) {
 return item.length;
});
// prints [ 10, 6, 3, 4, 1 ]
console.log(lenArray);

在上面的例子中,我们创建了一个高阶函数mapForEach,它接受一个数组和一个回调函数fn。此函数循环遍历提供的数组,并在每次迭代时调用函数调用fn内的回调函数newArray.push

回调函数fn接收数组的当前元素并返回该元素的长度,该元素存储在newArray。for循环完成后,newArray返回并分配给lenArray。

结论

我们已经了解了高阶函数和一个内置的高阶函数。我们还学习了如何创建自己的高阶函数。

简而言之,高阶函数是一个函数,它可以接收函数作为参数,甚至可以返回一个函数。高阶函数就像常规函数一样,具有接收和返回其他函数的附加能力,即参数和输出。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jqTransform form表单美化插件使用方法
Jul 05 Javascript
jQuery之尺寸调整组件的深入解析
Jun 19 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
nodeType属性返回被选节点的节点类型介绍
Nov 22 Javascript
第十章之巨幕页头缩略图与警告框组件
Apr 25 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
JavaScript Date对象应用实例分享
Oct 30 Javascript
微信小程序实现刷脸登录
May 25 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 Javascript
JS立即执行函数功能与用法分析
Jan 15 #Javascript
vue-cli 目录结构详细讲解总结
Jan 15 #Javascript
webpack file-loader和url-loader的区别
Jan 15 #Javascript
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 #jQuery
Element输入框带历史查询记录的实现示例
Jan 15 #Javascript
微信小程序实现多选删除列表数据功能示例
Jan 15 #Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 #Javascript
You might like
最令PHP初学者头痛的十四个问题
2006/07/12 PHP
adodb与adodb_lite之比较
2006/12/31 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
php判断表是否存在的方法
2015/06/18 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
限制文本字节数js代码
2007/03/06 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
jQuery中noconflict函数的实现原理分解
2015/02/03 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
图文详解WinPE下安装Python
2016/05/17 Python
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
Python-jenkins模块获取jobs的执行状态操作
2020/05/12 Python
护士进修自我鉴定
2014/02/07 职场文书
会计专业个人自我鉴定
2014/03/21 职场文书
电子专业求职信
2014/06/19 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
政工师工作总结2015
2015/05/26 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
如何利用python实现Simhash算法
2022/06/28 Python