经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » Java相关 » Java » 查看文章
8个JavaScript中高阶函数的运用分享
来源:jb51  时间:2023/4/19 9:01:01  对本文有异议

函数作为参数传递

高阶函数可以接受一个或多个函数作为参数,这些函数可以在高阶函数中被调用,实现某种特定的功能

  1. function operation(num1, num2, callback) {
  2. let result = callback(num1, num2);
  3. console.log(result);
  4. }
  5.  
  6. function add(num1, num2) {
  7. return num1 + num2;
  8. }
  9.  
  10. operation(2, 3, add); // 输出 5

在上面的例子中,operation 函数接受三个参数,其中第三个参数是一个回调函数 callback,它的作用是对前两个参数进行某种操作,返回操作结果。在调用 operation 函数时,我们将 add 函数作为 callback 参数传入,从而实现了两个数的加法运算

函数作为返回值

高阶函数可以返回一个或多个函数,这些函数可以在其他地方调用,实现某种特定的功能

  1. function multiplyBy(num) {
  2. return function(x) {
  3. return x * num;
  4. }
  5. }
  6.  
  7. let multiplyBy2 = multiplyBy(2);
  8. console.log(multiplyBy2(5)); // 输出 10

在上面的例子中,multiplyBy 函数返回了一个匿名函数,该函数接受一个参数 x,并将其乘以 num 参数。我们将 multiplyBy(2) 赋值给 multiplyBy2 变量,从而得到一个新的函数,该函数可以将其参数乘以 2。最后,我们调用 multiplyBy2(5) ,得到 10

函数柯里化

柯里化是一个将多个参数的函数转换为一系列单参数函数的过程。这种方式可以更方便地传递参数,提高代码的可读性和可维护性

  1. function add(num1) {
  2. return function(num2) {
  3. return num1 + num2;
  4. }
  5. }
  6.  
  7. let add5 = add(5);
  8. console.log(add5(3)); // 输出 8

在上面的例子中,add 函数接受一个参数 num1,并返回一个匿名函数,该函数接受一个参数 num2,并将其与 num1 相加。我们将 add(5) 赋值给 add5 变量,从而得到一个新的函数,该函数可以将其参数与 5 相加。最后,我们调用 add5(3) ,得到 8

函数组合

函数组合是将多个函数组合成一个新函数的过程。这种方式可以将多个操作封装在一起,减少代码的冗余和重复

  1. function add(num) {
  2. return num + 1;
  3. }
  4.  
  5. function multiplyBy2(num) {
  6. return num * 2;
  7. }
  8.  
  9. function compose(f, g) {
  10. return function(x) {
  11. return f(g(x));
  12. }
  13. }
  14.  
  15. let addThenMultiply = compose(multiplyBy2, add);
  16. console.log(addThenMultiply(2)); // 输出 6

在上面的例子中,我们定义了三个函数 addmultiplyBy2composeaddmultiplyBy2 分别实现了加 1 和乘以 2 的操作,compose 函数接受两个函数作为参数,并返回一个新的函数,该函数可以将这两个函数组合在一起。我们将 multiplyBy2add 作为参数传给 compose,得到一个新的函数 addThenMultiply,该函数先将其参数加 1,然后再将结果乘以 2。最后,我们调用 addThenMultiply(2) ,得到 6

面向切面编程

面向切面编程是一种将横切关注点与业务逻辑分离的编程方式。这种方式可以提高代码的可维护性和可扩展性

  1. function logExecutionTime(fn) {
  2. return function() {
  3. console.time('Execution time');
  4. let result = fn.apply(null, arguments);
  5. console.timeEnd('Execution time');
  6. return result;
  7. }
  8. }
  9.  
  10. function add(num1, num2) {
  11. return num1 + num2;
  12. }
  13.  
  14. let timedAdd = logExecutionTime(add);
  15. console.log(timedAdd(2, 3)); // 输出 Execution time: 0.048ms 5

在上面的例子中,我们定义了两个函数 logExecutionTimeaddlogExecutionTime 函数接受一个函数作为参数,并返回一个新的函数,该函数会在执行原函数时记录其执行时间。我们将 add 函数作为参数传给 logExecutionTime,得到一个新的函数 timedAdd,该函数在执行加法操作时会记录其执行时间。最后,我们调用 timedAdd(2, 3) ,得到 5,并在控制台输出执行时间

函数式编程

函数式编程是一种将计算过程看作是函数之间的组合的编程方式。这种方式可以提高代码的可读性和可维护性,减少副作用和状态变量的使用

  1. let numbers = [1, 2, 3, 4, 5];
  2.  
  3. let sum = numbers.reduce(function(acc, num) {
  4. return acc + num;
  5. }, 0);
  6.  
  7. console.log(sum); // 输出 15

在上面的例子中,我们使用了 JavaScript 内置的 reduce 函数,实现了对数组中所有数字的求和。reduce 函数接受两个参数:一个回调函数和一个初始值。回调函数接受两个参数:累加器和当前元素,返回值会被作为下一次调用回调函数时的累加器参数。在这个例子中,我们使用匿名函数作为回调函数,实现了将累加器和当前元素相加的操作。最后,我们将初始值设为 0,得到了数组中所有数字的和

闭包

闭包是指一个函数可以访问其定义时的作用域中的变量和参数。这种方式可以实现局部变量的封装和保护,提高代码的安全性和稳定性

在上面的例子中,我们使用了闭包来实现函数柯里化函数作为返回值。具体来说,我们定义了一个函数 add,它接受一个参数 num1,并返回一个匿名函数,该函数接受一个参数 num2,并将其与 num1 相加。这样,我们就可以将 add(5) 赋值给变量 add5,得到一个新的函数,该函数可以将其参数与 5 相加

闭包的使用场景包括:

  • 封装变量:闭包可以将变量封装在函数内部,避免全局变量的污染和冲突。
  • 保护变量:闭包可以将变量保护起来,避免其被外部访问和修改,提高代码的安全性和稳定性。
  • 实现模块化:闭包可以将一组相关的函数和变量封装在一个函数内部,形成一个模块,提高代码的可维护性和可扩展性。
  • 实现柯里化和函数组合:闭包可以将函数柯里化和函数组合的实现变得更加简单和直观。
  • 实现面向对象编程:闭包可以将函数作为对象的方法,实现面向对象编程的方式。

总之,闭包是 JavaScript 中非常重要的概念,它可以帮助我们更好地组织代码,提高代码的可读性、可维护性和可扩展性。但是,过度使用闭包也可能会导致代码的复杂性和性能问题,因此需要谨慎使用。

复杂的例子

以下是一个更复杂的例子,它结合了多个高阶函数的概念,包括函数作为参数传递、函数作为返回值、函数柯里化、函数组合和面向切面编程

  1. // 定义一个数组,包含一些数字
  2. let numbers = [1, 2, 3, 4, 5];
  3.  
  4. // 定义一个函数,用于将数组中的每个元素加上一个指定的值
  5. function add(amount) {
  6. return function(num) {
  7. return num + amount;
  8. }
  9. }
  10.  
  11. // 定义一个函数,用于将数组中的每个元素乘以一个指定的值
  12. function multiplyBy(factor) {
  13. return function(num) {
  14. return num * factor;
  15. }
  16. }
  17.  
  18. // 定义一个函数,用于将数组中的所有元素相加
  19. function sum(numbers) {
  20. return numbers.reduce(function(acc, num) {
  21. return acc + num;
  22. }, 0);
  23. }
  24.  
  25. // 定义一个函数,用于记录函数执行时间
  26. function logExecutionTime(fn) {
  27. return function() {
  28. console.time('Execution time');
  29. let result = fn.apply(null, arguments);
  30. console.timeEnd('Execution time');
  31. return result;
  32. }
  33. }
  34.  
  35. // 定义一个函数,用于组合多个函数
  36. function compose() {
  37. let fns = Array.prototype.slice.call(arguments); // 将参数转换为数组
  38. return function(x) {
  39. return fns.reduceRight(function(acc, fn) {
  40. return fn(acc);
  41. }, x);
  42. }
  43. }
  44.  
  45. // 将数组中的每个元素加上 1,再将结果乘以 2,最后计算所有元素的和
  46. let result = compose(logExecutionTime(sum), multiplyBy(2), add(1))(numbers);
  47. console.log(result); // 输出 Execution time: 0.131ms 30

详细解释:

  • 在上面的例子中,我们首先定义了一个包含一些数字的数组 numbers。然后,我们定义了三个函数 addmultiplyBysumaddmultiplyBy 分别返回一个匿名函数,该函数接受一个数字参数,并将其加上或乘以另一个数字。sum 函数使用 JavaScript 内置的 reduce 函数,计算数组中所有数字的和
  • 接下来,我们定义了一个函数 logExecutionTime,用于记录函数执行时间。该函数接受一个函数作为参数,并返回一个新的函数,该函数在执行原函数时记录其执行时间
  • 然后,我们定义了一个函数 compose,用于组合多个函数。该函数接受任意数量的函数作为参数,并返回一个新的函数,该函数可以将这些函数组合在一起,并按照从右到左的顺序依次调用它们。在 compose 函数内部,我们使用了 Array.prototype.slice.call(arguments) 将参数列表转换为数组,并使用 reduceRight 函数依次调用这些函数
  • 最后,我们使用函数柯里化和函数组合,将 logExecutionTimesummultiplyByadd 函数组合在一起,实现了将数组中的每个元素加上 1,再将结果乘以 2,最后计算所有元素的和。我们将 numbers 数组作为参数传给该函数,得到了最终的结果,并在控制台输出了执行时间

以上就是8个JavaScript的高阶函数的运用分享的详细内容,更多关于JavaScript高阶函数的资料请关注w3xue其它相关文章!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号