JS高阶函数原理与用法实例分析
作者:唐宋元明清. 时间:2024-05-09 10:36:21
本文实例讲述了JS高阶函数原理与用法。分享给大家供大家参考,具体如下:
如果您正在学习JavaScript,那么您必须遇到高阶函数这个术语。这听起来复杂,其实不然。
使JavaScript适合函数式编程的原因是它接受高阶函数。
高阶函数在JavaScript中广泛使用。如果你已经用JavaScript编程了一段时间,你可能已经使用它们甚至不知道。
要完全理解这个概念,首先必须了解函数式编程是什么一等函数(first-Class Function)以及的概念。
函数式编程
在大多数简单的术语中,函数编程是一种编程形式,您可以将函数作为参数传递给其他函数,并将它们作为值返回。在函数式编程中,我们根据函数思考和编码。
JavaScript,Haskell,Clojure,Scala和Erlang是实现函数式编程的一些语言。
一等函数
如果您一直在学习JavaScript,您可能听说过JavaScript将函数视为一等公民。那是因为在JavaScript或任何其他函数式编程语言中,函数是对象。
在JavaScript中,函数是一种特殊类型的对象。他们是Function对象。
在JavaScript中,您可以使用其他类型(如对象,字符串或数字)执行的所有操作函数都可以执行。您可以将它们作为参数传递给其他函数(回调函数),将它们分配给变量并传递它们等等。这就是JavaScript中的函数被称为First-Class函数(一等函数)的原因。
高阶函数
高阶函数是对其他函数进行操作的函数,可以将它们作为参数或通过返回它们。简单来说,高阶函数是一个函数,它接收函数作为参数或将函数作为输出返回。
例如Array.prototype.map
,Array.prototype.filter
并且Array.prototype.reduce
是一些高阶功能,内置的语言。
运行高阶函数
让我们看一下内置高阶函数的一些例子,看看它与我们不使用高阶函数的解决方案的比较。
Array.prototype.map
该map()
方法通过调用作为输入数组中每个元素的参数提供的回调函数来创建一个新数组。该map()
方法将从回调函数中获取每个返回值,并使用这些值创建一个新数组。
传递给回调函数map()
方法接受3个参数:element,index,和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程序设计有所帮助。
来源:https://blog.csdn.net/qq_22844483/article/details/83753048
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
SQLServer2019安装教程图文详解
![](https://img.aspxhome.com/file/2023/2/94432_0s.jpg)
详解vue-amap引入高德JS API的原理
![](https://img.aspxhome.com/file/2023/8/123048_0s.jpg)
详解Go语言设计模式之单例模式
![](https://img.aspxhome.com/file/2023/0/105820_0s.png)
Python pysnmp使用方法及代码实例
OpenCV半小时掌握基本操作之色彩空间
![](https://img.aspxhome.com/file/2023/9/123509_0s.gif)
Python爬虫爬取Bilibili弹幕过程解析
![](https://img.aspxhome.com/file/2023/5/95755_0s.png)
Go处理JSON数据的实现
python 自动监控最新邮件并读取的操作
MySQL使用ReplicationConnection导致连接失效解决
![](https://img.aspxhome.com/file/2023/4/65294_0s.jpg)
Windows下Python的Django框架环境部署及应用编写入门
Python 如何操作 SQLite 数据库
MySQL查询出现1055错误的原因及解决方法
![](https://img.aspxhome.com/file/2023/3/126273_0s.png)
js自动闭合html标签(自动补全html标记)
win10下安装Anaconda的教程(python环境+jupyter_notebook)
![](https://img.aspxhome.com/file/2023/2/85232_0s.jpg)
浅谈Express.js解析Post数据类型的正确姿势
![](https://img.aspxhome.com/file/2023/7/122387_0s.png)
Python实现二叉堆
![](https://img.aspxhome.com/file/2023/6/133796_0s.png)
ASP万用分页程序
python实现搜索文本文件内容脚本
![](https://img.aspxhome.com/file/2023/0/131350_0s.png)
Mysql主键和唯一键的区别点总结
![](https://img.aspxhome.com/file/2023/5/128385_0s.jpg)
一篇文章搞懂Python反斜杠的相关问题
![](https://img.aspxhome.com/file/2023/2/97662_0s.png)