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 相关文章推荐
刷新时清空文本框内容的js代码
Apr 23 Javascript
ajax 缓存 问题 requestheader
Aug 01 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
浅谈Javascript变量作用域问题
Dec 16 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 Javascript
分享javascript计算时间差的示例代码
Mar 19 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
Dec 26 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 Javascript
js实现简易聊天对话框
Aug 17 Javascript
vue实现拖拽效果
Dec 23 Javascript
如何基于viewport vm适配移动端页面
Nov 13 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 日志缩略名的创建函数代码
2010/05/26 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
AngularJS基础学习笔记之简单介绍
2015/05/10 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
JavaScript判断变量名是否存在数组中的实例
2017/12/28 Javascript
layui之select的option叠加问题的解决方法
2018/03/08 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
js实现抽奖功能
2020/11/24 Javascript
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
django用户登录验证的完整示例代码
2019/07/21 Python
python实现XML解析的方法解析
2019/11/16 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
露营世界:Camping World
2017/02/02 全球购物
农行实习自我鉴定
2013/09/22 职场文书
路政管理专业推荐信
2013/11/11 职场文书
安全责任书范文
2014/03/12 职场文书
小区文明倡议书
2014/05/16 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
老人院义工活动感想
2015/08/07 职场文书
Oracle中DBLink的详细介绍
2022/04/29 Oracle
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers