草庐IT

JavaScript 高阶函数

飞仔FeiZai 2023-03-28 原文

一、高阶函数

JavaScript 中的高阶函数是一种接受函数作为输入或返回函数作为输出的函数。它们提供了灵活的方式来处理函数,并允许把函数作为参数或返回值传递。它们是函数式编程的重要组成部分,并且可以提高代码的可读性和可维护性。

高阶函数的一个常见用法是对数组进行操作,例如使用 map()reduce()filter()。这些函数允许您在数组上应用自定义的函数,并对数组的每个元素执行操作。

另一个常见的高阶函数是回调函数。回调函数是一种被传递到另一个函数中的函数,并在某些事件发生时被调用。它们允许您创建代码,该代码在事件发生时自动执行。

另外,高阶函数还可以用于创建抽象概念,例如柯里化组合管道。柯里化是一种将多个参数的函数转换为一系列接受单个参数的函数的技术。组合是将多个函数组合成一个新函数的技术。管道是一种通过将函数的输出作为下一个函数的输入来链接多个函数的技术。

高阶函数也可以与闭包结合使用。闭包是一种函数,它引用了定义它的作用域之外的变量。这使得您可以在函数外访问函数内部的变量,并将变量保存在内存中以供以后使用。

高阶函数是 JavaScript 编程的重要概念,具有很多用途,并且可以提高代码的复杂性。学习如何使用高阶函数,并将其与其他技术结合起来,可以使您的代码更加强大和高效。

 

一个常见的 JavaScript 高阶函数示例是 Array.prototype.map()

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(function(number) {
  return number * 2;
});
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

在这个例子中,我们创建了一个数组,然后使用 map() 函数对数组中的每个元素进行操作。我们传递了一个回调函数,该回调函数接受一个数字,并返回该数字的两倍。

另一个常见的高阶函数示例是 Array.prototype.reduce()

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(function(total, number) {
  return total + number;
}, 0);
console.log(sum); // 15

在这个例子中,我们使用 reduce() 函数对数组中的所有元素进行操作。我们传递了一个回调函数,该回调函数接受当前的总和和数字,并返回新的总和。

这些示例说明了高阶函数的强大功能,以及如何将其与其他技术(例如回调函数)结合起来,以实现复杂的操作。

二、使用高阶函数实现函数柯里化

柯里化是一种高阶函数的技术,可以将多个参数的函数转换为只有一个参数的函数。这可以使我们在需要的时候再传递其他参数,并逐步构建出完整的函数。

以下是 JavaScript 使用高阶函数实现柯里化的示例:

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(null, args);
    } else {
      return function(...args2) {
        return curried.apply(null, args.concat(args2));
      };
    }
  };
}

function add(a, b, c) {
  return a + b + c;
}

const curriedAdd = curry(add);
const add5 = curriedAdd(5);
console.log(add5(10, 15)); // 30

在这个例子中,我们创建了一个 curry() 函数,该函数接受一个函数作为参数,并返回一个新函数。该新函数使用 apply() 方法应用所有参数,如果传递的参数数量不够,则返回一个新的函数,该函数将传递的参数与当前的参数合并。

然后,我们使用 curry() 函数对 add() 函数进行柯里化,并创建了一个只接受一个参数的函数,该参数为 5。我们可以使用此函数来逐步构建出完整的函数,并使用最后两个参数计算结果。

三、使用高阶函数实现组合函数

组合函数是一种将多个函数结合起来以创建新函数的技术。在 JavaScript 中,可以使用高阶函数实现组合函数。

以下是使用高阶函数实现组合函数的示例:

function compose(f, g) {
  return function(x) {
    return f(g(x));
  };
}

function double(x) {
  return x * 2;
}

function add(x) {
  return x + 1;
}

const composed = compose(add, double);
console.log(composed(3)); // 7

在这个例子中,我们创建了一个 compose() 函数,该函数接受任意数量的函数作为参数,并返回一个新函数。

然后,我们使用 compose() 函数将 double()add() 函数组合在一起,并使用组合函数对数字 3 进行计算。因此,先调用 double(3),再调用 add(6),最后得到结果 7。

 

以下是另一种使用高阶函数实现组合函数的示例:

function compose(...fns) {
  return function(arg) {
    return fns.reduceRight((result, fn) => fn(result), arg);
  };
}

function double(x) {
  return x * 2;
}

function add(x) {
  return x + 1;
}

const composed = compose(double, add);
console.log(composed(3)); // 8

在这个例子中,我们创建了一个 compose() 函数,该函数接受任意数量的函数作为参数,并返回一个新函数。该新函数使用 reduceRight() 函数对所有函数进行组合,并对给定的参数进行计算。

然后,我们使用 compose() 函数将 double()add() 函数组合在一起,并使用组合函数对数字 3 进行计算。因此,先调用 add(3),再调用 double(4),最后得到结果 8。

四、使用高阶函数实现管道

 管道是一种将多个函数连接起来以进行顺序计算的技术。在 JavaScript 中,可以使用高阶函数实现管道。

以下是使用高阶函数实现管道的示例:

function pipe(...fns) {
  return function(arg) {
    return fns.reduce((result, fn) => fn(result), arg);
  };
}

function double(x) {
  return x * 2;
}

function add(x) {
  return x + 1;
}

const piped = pipe(add, double);
console.log(piped(3)); // 8

在这个例子中,我们创建了一个 pipe() 函数,该函数接受任意数量的函数作为参数,并返回一个新函数。该新函数使用 reduce() 函数对所有函数进行管道,并对给定的参数进行计算。

然后,我们使用 pipe() 函数将 add()double() 函数管道在一起,并使用管道函数对数字 3 进行计算。因此,先调用 add(3),再调用 double(4),最后得到结果 8。

五、组合函数和管道的区别

管道和组合函数都是高阶函数的应用,但是它们有着明显的不同:

  1. 实现方式:管道是通过将多个函数连接起来,依次对数据进行处理,而组合函数则是通过将多个函数组合成一个函数。

  2. 计算顺序:管道函数的计算顺序是从左到右而组合函数的计算顺序是从右到左

  3. 结构:管道函数的结构是一维的,每一步的结果都是下一步的输入;而组合函数的结构是二维的,一个函数的结果可以作为另一个函数的输入。

因此,管道和组合函数都是高阶函数的重要应用,在不同的场景中使用它们都有着独特的优势。

 

有关JavaScript 高阶函数的更多相关文章

  1. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

    我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem,所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

  2. ruby-on-rails - 在 ruby​​ 中使用 gsub 函数替换单词 - 2

    我正在尝试用ruby​​中的gsub函数替换字符串中的某些单词,但有时效果很好,在某些情况下会出现此错误?这种格式有什么问题吗NoMethodError(undefinedmethod`gsub!'fornil:NilClass):模型.rbclassTest"replacethisID1",WAY=>"replacethisID2andID3",DELTA=>"replacethisID4"}end另一个模型.rbclassCheck 最佳答案 啊,我找到了!gsub!是一个非常奇怪的方法。首先,它替换了字符串,所以它实际上修改了

  3. ruby - 在 Ruby 中有条件地定义函数 - 2

    我有一些代码在几个不同的位置之一运行:作为具有调试输出的命令行工具,作为不接受任何输出的更大程序的一部分,以及在Rails环境中。有时我需要根据代码的位置对代码进行细微的更改,我意识到以下样式似乎可行:print"Testingnestedfunctionsdefined\n"CLI=trueifCLIdeftest_printprint"CommandLineVersion\n"endelsedeftest_printprint"ReleaseVersion\n"endendtest_print()这导致:TestingnestedfunctionsdefinedCommandLin

  4. ruby - 在 Ruby 中按名称传递函数 - 2

    如何在Ruby中按名称传递函数?(我使用Ruby才几个小时,所以我还在想办法。)nums=[1,2,3,4]#Thisworks,butismoreverbosethanI'dlikenums.eachdo|i|putsiend#InJS,Icouldjustdosomethinglike:#nums.forEach(console.log)#InF#,itwouldbesomethinglike:#List.iternums(printf"%A")#InRuby,IwishIcoulddosomethinglike:nums.eachputs在Ruby中能不能做到类似的简洁?我可以只

  5. C51单片机——实现用独立按键控制LED亮灭(调用函数篇) - 2

    说在前面这部分我本来是合为一篇来写的,因为目的是一样的,都是通过独立按键来控制LED闪灭本质上是起到开关的作用,即调用函数和中断函数。但是写一篇太累了,我还是决定分为两篇写,这篇是调用函数篇。在本篇中你主要看到这些东西!!!1.调用函数的方法(主要讲语法和格式)2.独立按键如何控制LED亮灭3.程序中的一些细节(软件消抖等)1.调用函数的方法思路还是比较清晰地,就是通过按下按键来控制LED闪灭,即每按下一次,LED取反一次。重要的是,把按键与LED联系在一起。我打算用K1来作为开关,看了一下开发板原理图,K1连接的是单片机的P31口,当按下K1时,P31是与GND相连的,也就是说,当我按下去时

  6. ruby-on-rails - 将字符串转换为 ruby​​-on-rails 中的函数 - 2

    我需要一个通过输入字符串进行计算的方法,像这样function="(a/b)*100"a=25b=50function.something>>50有什么方法吗? 最佳答案 您可以使用instance_eval:function="(a/b)*100"a=25.0b=50instance_evalfunction#=>50.0请注意,使用eval本质上是不安全的,尤其是当您使用外部输入时,因为它可能包含注入(inject)的恶意代码。另请注意,a设置为25.0而不是25,因为如果它是整数a/b将导致0(整数)。

  7. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  8. ruby - 在 ruby​​ 中使用 .try 函数和 .map 函数 - 2

    我需要从json记录中获取一些值并像下面这样提取curr_json_doc['title']['genre'].map{|s|s['name']}.join(',')但对于某些记录,curr_json_doc['title']['genre']可以为空。所以我想对map和join()使用try函数。我试过如下curr_json_doc['title']['genre'].try(:map,{|s|s['name']}).try(:join,(','))但是没用。 最佳答案 你没有正确传递block。block被传递给参数括号外的方法

  9. ruby - 是否可以从也在该模块中的类内部调用模块函数 - 2

    在这段Ruby代码中:ModuleMClassC当我尝试运行时出现“'M:Module'的未定义方法'helper'”错误c=M::C.new("world")c.work但直接从另一个类调用M::helper("world")工作正常。类不能调用在定义它们的同一模块中定义的模块函数吗?除了将类移出模块外,还有其他解决方法吗? 最佳答案 为了调用M::helper,你需要将它定义为defself.helper;结束为了进行比较,请查看以下修改后的代码段中的helper和helper2moduleMclassC

  10. ruby - 将运算符传递给函数? - 2

    也许这听起来很荒谬,但我想知道这对Ruby是否可行?基本上我有一个功能...defadda,bc=a+breturncend我希望能够将“+”或其他运算符(例如“-”)传递给函数,这样它就类似于...defsuma,b,operatorc=aoperatorbreturncend这可能吗? 最佳答案 两种可能性:以方法/算子名作为符号:defsuma,b,operatora.send(operator,b)endsum42,23,:+或者更通用的解决方案:采取一个block:defsuma,byielda,bendsum42,23,

随机推荐