8个JavaScript中高阶函数的运用分享

目录
  • 函数作为参数传递
  • 函数作为返回值
  • 函数柯里化
  • 函数组合
  • 面向切面编程
  • 函数式编程
  • 闭包
  • 复杂的例子

函数作为参数传递

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

function operation(num1, num2, callback) {
    let result = callback(num1, num2);
    console.log(result);
}

function add(num1, num2) {
    return num1 + num2;
}

operation(2, 3, add); // 输出 5

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

函数作为返回值

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

function multiplyBy(num) {
    return function(x) {
        return x * num;
    }
}

let multiplyBy2 = multiplyBy(2);
console.log(multiplyBy2(5)); // 输出 10

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

函数柯里化

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

function add(num1) {
    return function(num2) {
        return num1 + num2;
    }
}

let add5 = add(5);
console.log(add5(3)); // 输出 8

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

函数组合

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

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

function multiplyBy2(num) {
    return num * 2;
}

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

let addThenMultiply = compose(multiplyBy2, add);
console.log(addThenMultiply(2)); // 输出 6

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

面向切面编程

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

function logExecutionTime(fn) {
    return function() {
        console.time('Execution time');
        let result = fn.apply(null, arguments);
        console.timeEnd('Execution time');
        return result;
    }
}

function add(num1, num2) {
    return num1 + num2;
}

let timedAdd = logExecutionTime(add);
console.log(timedAdd(2, 3)); // 输出 Execution time: 0.048ms 5

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

函数式编程

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

let numbers = [1, 2, 3, 4, 5];

let sum = numbers.reduce(function(acc, num) {
    return acc + num;
}, 0);

console.log(sum); // 输出 15

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

闭包

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

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

闭包的使用场景包括:

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

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

复杂的例子

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

// 定义一个数组,包含一些数字
let numbers = [1, 2, 3, 4, 5];

// 定义一个函数,用于将数组中的每个元素加上一个指定的值
function add(amount) {
    return function(num) {
        return num + amount;
    }
}

// 定义一个函数,用于将数组中的每个元素乘以一个指定的值
function multiplyBy(factor) {
    return function(num) {
        return num * factor;
    }
}

// 定义一个函数,用于将数组中的所有元素相加
function sum(numbers) {
    return numbers.reduce(function(acc, num) {
        return acc + num;
    }, 0);
}

// 定义一个函数,用于记录函数执行时间
function logExecutionTime(fn) {
    return function() {
        console.time('Execution time');
        let result = fn.apply(null, arguments);
        console.timeEnd('Execution time');
        return result;
    }
}

// 定义一个函数,用于组合多个函数
function compose() {
    let fns = Array.prototype.slice.call(arguments); // 将参数转换为数组
    return function(x) {
        return fns.reduceRight(function(acc, fn) {
            return fn(acc);
        }, x);
    }
}

// 将数组中的每个元素加上 1,再将结果乘以 2,最后计算所有元素的和
let result = compose(logExecutionTime(sum), multiplyBy(2), add(1))(numbers);
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高阶函数的资料请关注我们其它相关文章!

(0)

相关推荐

  • Javascript 高阶函数使用介绍

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

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

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

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

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

  • Javascript中的高阶函数介绍

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

  • JavaScript中常见的高阶函数总结

    目录 前言 map函数 reduce函数 filter函数 sort every方法 find方法 findIndex方法 foreach方法 总结 前言 一个函数可以接受另一个函数作为参数,就把这个函数叫做高阶函数. 一个最简单的高阶函数: function add(x, y, f) { return f(x) + f(y); } //当调用add(-5, 6, Math.abs)时,参数x,y和f分别接收-5,6和函数Math.abs,根据函数定义,可以推导计算过程为: //x = -5;

  • 从柯里化分析JavaScript重要的高阶函数实例

    目录 前情回顾 百变柯里化 缓存传参 缓存判断 缓存计算 缓存函数 防抖与节流 lodash 高阶函数 结语 前情回顾 我们在前篇 <从历史讲起,JavaScript 基因里写着函数式编程> 讲到了 JavaScript 的函数式基因最早可追溯到 1930 年的 lambda 运算,这个时间比第一台计算机诞生的时间都还要早十几年.JavaScript 闭包的概念也来源于 lambda 运算中变量的被绑定关系. 因为在 lambda 演算的设定中,参数只能是一个,所以通过柯里化的天才想法来实现接

  • 8个JavaScript中高阶函数的运用分享

    目录 函数作为参数传递 函数作为返回值 函数柯里化 函数组合 面向切面编程 函数式编程 闭包 复杂的例子 函数作为参数传递 高阶函数可以接受一个或多个函数作为参数,这些函数可以在高阶函数中被调用,实现某种特定的功能 function operation(num1, num2, callback) { let result = callback(num1, num2); console.log(result); } function add(num1, num2) { return num1 +

  • 详解JavaScript 高阶函数

    高阶函数简介 高阶函数 的英文名叫 Higher-Order Function ,是 函数式编程 中的一种.他的表现形式往往是通过把函数作为参数传入另一个函数,或者将函数作为另一个函数的返回值返回.在实际开发业务中, 高阶函数往往可以抽象我们的代码 ,将我们的命令式编程转换为复用性更高级的函数式编程,从而 提升我们的代码质量 . 下面拿3个面试中常问的高阶函数举例子,希望看完以后能够提升大家对JS的理解,提高我们的代码质量. chat is cheap,show you my code~ Arr

  • 详解Python中高阶函数(map,filter,reduce,sorted)的使用

    目录 什么是高阶函数 自定义一个高阶函数 常用的内置高阶函数 map函数 参数说明 功能 实例 filter函数 功能 实例 reduce函数 功能 实例 sorted函数 参数说明 功能 实例 sort和sorted 总结 什么是高阶函数 高阶函数就是能够把函数当成参数传递的函数就是高阶函数,换句话说如果一个函数的参数是函数,那么这个函数就是一个高阶函数. 高阶函数可以是你使用def关键字自定义的函数,也有Python系统自带的内置高阶函数. 自定义一个高阶函数 我们下面的例子中,函数 sen

  • 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 语言中内置了一些高阶函数,比如 Array.prototype.map,Array.prototype.filter 和 Array.

  • javaScript中push函数用法实例分析

    本文实例讲述了javaScript中push函数用法.分享给大家供大家参考.具体分析如下: javaScript 中的 push 方法,将新元素添加到一个数组中,并返回数组的新长度值. arrayObj.push([item1   [item2   [.   .   .   [itemN   ]]]]) 参数 arrayObj,必选项.一个   Array   对象. item,   item2,.   .   .   itemN, 可选项.该   Array   的新元素. 说明 push 

随机推荐