JavaScript高阶函数

86 阅读5分钟

一、前言

JavaScript是一种高级编程语言,它支持高阶函数。高阶函数是指可以接受一个或多个函数作为参数,或者返回一个函数的函数。在JavaScript中,函数是一等公民,这意味着函数可以像变量一样被传递、赋值和使用。这个特点使得JavaScript非常适合使用高阶函数。

二、什么是高阶函数

高阶函数是指可以接受一个或多个函数作为参数,或者返回一个函数的函数。这个定义可能有点抽象,所以让我们看一个例子来帮助我们理解。

eg1:假设有一个函数,他接收两个数字并返回两个数字的和。

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

现在,写一个高阶函数,它接受一个函数作为参数,并将该函数应用于两个数字。这个高阶函数将返回两个数字的结果。

function calculate(a, b, operation) {
    return operation(a, b);
}

最后可以使用calculate计算两个数字的和

calculate(2, 3, add); // Output: 5

在这个例子中,将add函数作为calculate函数的第三个参数传递。calculate函数将调用add函数,并将2和3作为参数传递给它。add函数将返回它们的和,即5。最后,calculate函数将返回5。

eg2:假设有一个函数,它接受一个数字并返回该数字的平方。

  function square(x) {
    return x * x;
  }
  

写一个高阶函数,它接受一个函数作为参数,并将该函数应用于一个数字数组。这个高阶函数将返回一个新的数组,其中包含每个数字的结果。

   function map(array, operation) {
    var result = [];
    for (var i = 0; i < array.length; i++) {
        result.push(operation(array[i]));
    }
    return result;
   }
   

最后可以使用map函数来计算一个数字数组的平方

 var numbers = [1, 2, 3, 4, 5];
 var squares = map(numbers, square); // Output: [1, 4, 9, 16, 25]
 

在这个例子中,将square函数作为map函数的第二个参数传递。map函数将遍历数字数组,并将每个数字传递给square函数。square函数将返回该数字的平方,并将其添加到结果数组中。最后,map函数将返回结果数组。

这两个例子演示了高阶函数的两个常见用途:将函数作为参数传递和返回函数。

三、高阶函数用法

1.函数组合

函数组合是指将多个函数组合成一个函数。

假设有两个函数,一个函数将字符串转换为大写,另一个函数将字符串转换为标题案例(即每个单词的首字母大写)。现在,让我们将这两个函数组合成一个函数,它将字符串转换为大写标题案例。

   function toUpperCase(str) {
        return str.toUpperCase();
   }

    function toTitleCase(str) {
        return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
    }

    function toUpperCaseTitleCase(str) {
        return toTitleCase(toUpperCase(str));
    }
    

这个例子中,定义了一个新函数toUpperCaseTitleCase,它将字符串转换为大写标题案例。我们将toUpperCase函数和toTitleCase函数组合在一起,以实现这个功能。首先,toUpperCaseTitleCase函数将字符串传递给toUpperCase函数,将其转换为大写。然后,它将结果传递给toTitleCase函数,将其转换为标题案例。最后,toUpperCaseTitleCase函数将返回结果。

2.延迟执行

延迟执行是指将函数延迟到稍后执行。

假设有一个函数,它接受一个数字并返回一个新的函数。这个新的函数将接受另一个数字,并返回它们的和。

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

写一个delay函数,它接受一个函数和一个延迟时间(以毫秒为单位)。这个delay函数将返回一个新的函数,它将在延迟时间后执行原始函数。

function delay(func, time) {
    return function() {
        var args = arguments;
        setTimeout(function() {
            func.apply(null, args);
        }, time);
    }
 }
 

现在,可以使用delay函数将add函数延迟执行

 var delayedAdd = delay(add(2), 1000); // Output: undefined
 

在这个例子中,使用delay函数将add函数延迟执行1秒钟。首先调用add函数,并将2作为参数传递。这将返回一个新的函数,它接受一个数字,并返回2 + b的结果。然后,将这个新的函数和1000毫秒的延迟时间传递给delay函数。delay函数将返回一个新的函数,它将在1秒后执行原始函数。最后,将这个新的函数赋值给delayedAdd变量。

四、常见的高阶函数

JavaScript中有许多常见的高阶函数,它们可以帮助我们更轻松地处理数组和对象。以下是一些常见的高阶函数:

map:将一个数组转换为另一个数组,其中每个元素都是原始数组中元素的结果。

var numbers = [1, 2, 3, 4, 5];
var squares = numbers.map(function(x) {
    return x * x;
}); // Output: [1, 4, 9, 16, 25]

filter:将一个数组过滤为另一个数组,其中只包含满足某些条件的元素。

var numbers = [1, 2, 3, 4, 5];
var evenNumbers = numbers.filter(function(x) {
    return x % 2 === 0;
}); // Output: [2, 4]

reduce:将一个数组转换为一个值,其中每个元素都是使用前一个元素和当前元素的结果。

var numbers = [1, 2, 3, 4, 5];
var sum = numbers.reduce(function(acc, x) {
    return acc + x;
}, 0); // Output: 15

forEach:对一个数组中的每个元素执行一个函数,没有返回值。

var numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(x) {
    console.log(x);
 }); // Output: 1 2 3 4 5

五、总结

高阶函数是JavaScript中非常有用的概念。它们允许我们将函数作为参数传递和返回函数,这使得我们可以实现函数的组合、柯里化和延迟执行等功能。在实际开发中,高阶函数可以帮助我们提高代码的灵活性和可复用性。