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

本文实例讲述了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相关内容可查看本站专题：《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

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

赞 (0)

相关推荐

  • 关于JavaScript中高阶函数的魅力详解

    前言 一个函数就可以接收另一个函数作为参数,简言之,函数的参数能够接收别的函数,这种函数就称之为高阶函数 JavaScript 的高阶函数跟 Swift 的高阶函数类似 常见的高阶函数有: Map.Reduce.Filter.Sort 高阶函数是指至少满足下列条件之一的函数 1:函数可以作为参数被传递 2:函数可以作为返回值输出 JavaScript语言中的函数显然的是满足了高阶函数的条件,下面我们一起来探寻JavaScript种高阶函数的魅力. 高阶函数实现AOP AOP(面向切面编程)的主要

  • Javascript 是你的高阶函数(高级应用)

    在通常的编程语言中,函数的参数只能是基本类型或者对象引用,返回值也只是基本数据类型或对象引用.但在Javascript中函数作为一等公民,既可以当做参数传递,也可以被当做返回值返回.所谓高阶函数就是可以把函数作为参数,或者是将函数作为返回值的函数.这两种情形在实际开发中有很多应用场景,本文是我在工作学习中遇到的几种应用场景的总结. 回调函数 代码复用是衡量一个应用程序的重要标准之一.通过将变化的业务逻辑抽离封装在回调函数中能够有效的提高代码复用率.比如ES5中为数组增加的forEach方法,遍历

  • javascript之典型高阶函数应用介绍

    缘由 虽然以前也使用过javascript语言,但终究是为了配合后端写的一些零零散散的"代码段",更不能说是javascript项目了.很荣幸的是上个月刚到公司正好碰上项目开始推倒重写,我们team从头开始做架构和实现,目的很清楚,为了改进和超越前面的版本.这是个真正意义上的javascript"项目",当然服务端不是我们team来负责啦.这也是我真正开始全职使用javascript来编程.由于之前在学校对形式化方法这门课程比较感兴趣,而javascript又是函数

  • JavaScript高阶函数_动力节点Java学院整理

    高阶函数英文叫Higher-order function.那么什么是高阶函数? JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数. 一个最简单的高阶函数: function add(x, y, f) { return f(x) + f(y); } 当我们调用add(-5, 6, Math.abs)时,参数x,y和f分别接收-5,6和函数Math.abs,根据函数定义,我们可以推导计算过程为

  • Javascript 高阶函数使用介绍

    高阶函数(higher-order function)-如果一个函数接收的参数为或返回的值为函数,那么我们可以将这个函数称为高阶函数.众所周知,JavaScript是一种弱类型的语言:JavaScript的函数既不对输入的参数,也不对函数的输出值作强定义和类型检查,那么函数可以成为参数,也可以成为输出值,这就体现了JavaScript对高阶函数的原生支持. 一.参数为函数的高阶函数: function funcTest(f){ //简易判断一下实参是否为函数 if((typeof f)=="fu

  • Javascript中的高阶函数介绍

    这是一个有趣的东西,这或许也在说明Javascript对象的强大.我们要做的就是在上一篇说到的那样,输出一个Hello,World,而输入的东西是print('Hello')('World'),而这就是所谓的高阶函数. 高阶函数 高阶看上去就像是一种先进的编程技术的一个深奥术语,一开始我看到的时候我也这样认为的. Javascript的高阶函数 然而,高阶函数只是将函数作为参数或返回值的函数.以上面的Hello,World作为一个简单的例子. 复制代码 代码如下: var Moqi = func

  • javascript之典型高阶函数应用介绍二

    前言 在前一篇文章javascript之典型高阶函数中主要实现了几个典型的functional函数.文章最后也提出了疑问,为啥那样的实现与F#之类的函数式语言"不太一样"呢?今天来试试更"函数式"的实现. 另一种实现 同样地,尝试对之前实现的函数做一些改动,把for循环去掉.如何去掉呢?这里先要引入一个集合的归纳法定义: 一个集合要么是空集,要么是一个数与一个集合组成的数对从定义可以看到,每一个集合都可以看作为一个数和一个集合的对.例如:{1,2,4,5} 可以认为

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

    本文实例讲述了JS高阶函数原理与用法.分享给大家供大家参考,具体如下: 如果您正在学习JavaScript,那么您必须遇到高阶函数这个术语.这听起来复杂,其实不然. 使JavaScript适合函数式编程的原因是它接受高阶函数. 高阶函数在JavaScript中广泛使用.如果你已经用JavaScript编程了一段时间,你可能已经使用它们甚至不知道. 要完全理解这个概念,首先必须了解函数式编程是什么一等函数(first-Class Function)以及的概念. 函数式编程 在大多数简单的术语中,函

  • JS数据双向绑定原理与用法实例分析

    JS数据双向绑定原理与用法实例分析

    本文实例讲述了JS数据双向绑定原理与用法.分享给大家供大家参考,具体如下: 通常在前端开发过程中,经常遇到需要绑定两个甚至多个元素之间的值,比如将input的值绑定到一个h1上,改变input的值,h1的文字也自动更新. <h1 id="title">Hello</h1> <input type="text" id="a" /> 首先是在界面上更改input的值,需要监听input的"input&qu

  • mysql自定义函数原理与用法实例分析

    本文实例讲述了mysql自定义函数原理与用法.分享给大家供大家参考,具体如下: 本文内容: 什么是函数 函数的创建 函数的调用 函数的查看 函数的修改 函数的删除 首发日期:2018-04-18 什么是函数: 函数存储着一系列sql语句,调用函数就是一次性执行这些语句.所以函数可以降低语句重复.[但注意的是函数注重返回值,不注重执行过程,所以一些语句无法执行.所以函数并不是单纯的sql语句集合.] mysql函数有自己的自定义函数(已经定义好了的函数),想了解更多的可以参考我的另一篇博文:mys

  • 分享5个JS 高阶函数

    分享5个JS 高阶函数

    目录 1.前言 2.递归 3.回调函数 3.1匿名回调函数 3.2带参数的回调函数 3.3回调函数的优缺点 4.自调函数 5.为值的函数 6.闭包 1.前言 在JavaScript中,函数实际上也是一个数据,也就是说函数也可以赋值给一个变量.本篇文章就来介绍一些JavaScript中的高阶函数的用法. 2.递归 所谓的递归,就是指函数自己调用自己:用一个故事来说呢就是:从前有座山,山里有座庙,庙里有个老和尚,正在给小和尚讲故事呢!故事是什么呢?"从前有座山,山里有座庙,庙里有个老和尚,正在给小和

  • js回调函数原理与用法案例分析

    本文实例讲述了js回调函数原理与用法.分享给大家供大家参考,具体如下: 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应. 函数指针是指向函数的指针变量. 因此"函数指针"本身首先应是指针变量,只不过该指针变量指向函数. 函数指针有两个用途:调用函数和做函数的参数. 作用:

  • js构造函数constructor和原型prototype原理与用法实例分析

    本文实例讲述了js构造函数constructor和原型prototype原理与用法.分享给大家供大家参考,具体如下: 所有引用类型(函数,数组,对象)都拥有__proto__属性(隐式原型) 所有函数拥有prototype属性(显式原型)(仅限函数) 原型对象:拥有prototype属性的对象,在定义函数时就被创建 __proto__, prototype和constructor 下面这三个属性的定义非常重要,始终贯穿在原型中. prototype:此属性只有构造函数才有,它指向的是当前构造函数

  • JS严格模式原理与用法实例分析

    本文实例讲述了JS严格模式原理与用法.分享给大家供大家参考,具体如下: 使用 "use strict" 指令 "use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增. 它不是一条语句,但是是一个字面量表达式,在 JavaScript 旧版本中会被忽略. 支持严格模式的浏览器: Internet Explorer 10 +. Firefox  4+ Chrome  13+. Safari 5.1+. Opera 12+.

  • JS函数this的用法实例分析

    本文实例讲述了JS函数this的用法.分享给大家供大家参考.具体如下: 在js中写函数时,很多用到this. this究竟是什么,this是个关键字,是个指针,指向执行环境作用域,也称之为上下文. 先说下函数吧,个人理解是函数是在语言中重复调用的代码块. 在JS里,把函数赋值给对象的属性时,称之为方法 如: var m={}; m.title='title'; m.show=function(){ alert(this.title) } m.show() 就是把函数作为对象m的方法来调用 这样的

  • js函数和this用法实例分析

    本文实例讲述了js函数和this用法.分享给大家供大家参考,具体如下: js的所有代码都是由funtion组成,funtion即函数的类型. 一.函数有两种写法 -----1.定义式 function test() { //定义一个函数 console.log("function test called!!"); } -----2.变量式 var test2 = function () { console.log("var test2 function called!!&qu

  • JS 自执行函数原理及用法

    js自执行函数,听到这个名字,首先会联想到函数.接下来,我来定义一个函数: function aaa(a,b){ return sum = a + b } 定义了一个名为aaa的函数,在里面可以计算两个数的和.如果想执行它,就必须得调用它,并且还得给它传参: var aa = aaa(1,2) 这样就实现了一个函数的定义与调用,通过console.log我们可以看到sum实现了两个数的相加. 自执行函数是什么?自执行函数就是当它被定义出来,就会自动执行的函数.不需要调用,传参也很方便.就上面的函

随机推荐