高阶函数

Frontend SELF ZH
第 37 级, 课程 4
可用

5.1 基本概念

高阶函数是函数式编程的重要方面,广泛用于JavaScript。它们允许我们编写更抽象、更紧凑、更可重用的代码。

什么是高阶函数?

高阶函数(higher-order functions)是指那些接收其他函数作为参数或者返回函数作为结果的函数。它们允许使用函数作为一等公民,这使得创建更抽象和模块化的程序成为可能。

高阶函数的例子

  1. 将函数作为参数传递。
  2. 从其他函数返回函数。

5.2 将函数作为参数传递

使用数组的内置方法

JavaScript 提供了许多用于处理数组的内置方法,这些方法都是高阶函数,比如 forEach(), map(), filter(), reduce() 等等。

1. 方法 forEach()

方法 forEach() 为数组的每个元素执行指定的函数一次。

JavaScript
    
      const numbers = [1, 2, 3, 4, 5];

      numbers.forEach(function(number) {
        console.log(number);
      });
      // 输出: 1 2 3 4 5
    
  

2. 方法 map()

方法 map() 创建一个新数组,其结果是对原数组中的每个元素调用一个提供的函数后的返回值。

JavaScript
    
      const numbers = [1, 2, 3, 4, 5];
      const squaredNumbers = numbers.map(function(number) {
        return number * number;
      });

      console.log(squaredNumbers);
      // 输出: [1, 4, 9, 16, 25]
    
  

3. 方法 filter()

方法 filter() 创建一个新数组,其中包含所有通过所提供函数实现的测试的元素。

JavaScript
    
      const numbers = [1, 2, 3, 4, 5];
      const evenNumbers = numbers.filter(function(number) {
        return number % 2 === 0;
      });

      console.log(evenNumbers);
      // 输出: [2, 4]
    
  

4. 方法 reduce()

方法 reduce() 对数组中的每个元素执行一个提供的函数(从左到右),将其结果汇总为一个单一的值。

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

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

5.3 从其他函数返回函数

高阶函数可以返回其他函数,这样可以创建更灵活和可配置的函数。

1. 柯里化(Currying)

柯里化 是将一个接收多个参数的函数转换成一系列接收单个参数的函数的过程。

柯里化的例子:

JavaScript
    
      function multiply(a) {
        return function(b) {
          return a * b;
        };
      }

      const multiplyByTwo = multiply(2);
      console.log(multiplyByTwo(5)); // 输出: 10

      const multiplyByThree = multiply(3);
      console.log(multiplyByThree(5)); // 输出: 15
    
  

2. 创建可配置的函数

高阶函数允许创建可以通过参数配置的函数。

例子:

JavaScript
    
      function createGreeting(greeting) {
        return function(name) {
          console.log(`${greeting}, ${name}!`);
        };
      }

      const sayHello = createGreeting('Hello');
      sayHello('Alice'); // 输出: Hello, Alice!

      const sayHi = createGreeting('Hi');
      sayHi('Bob'); // 输出: Hi, Bob!
    
  

5.4 实际应用

让我们看看高阶函数的实际应用。

函数 compose()

函数 compose() 允许将多个函数组合成一个函数,该函数将按链条的方式应用它们:

JavaScript
    
      function compose(...functions) {
        return function(initialValue) {
          return functions.reduceRight((value, func) => func(value), initialValue);
        };
      }

      const addOne = x => x + 1;
      const double = x => x * 2;
      const addOneAndDouble = compose(double, addOne);
      console.log(addOneAndDouble(5)); // 输出: 12 (先给5加1,然后将结果加倍)
    
  

异步高阶函数

异步高阶函数允许处理异步操作,例如API请求或计时器的工作:

JavaScript
    
      function fetchData(callback) {
        setTimeout(() => {
          callback('Data received');
        }, 1000);
      }

      function processData(data) {
        console.log(data);
      }

      fetchData(processData);
      // 输出: Data received (1秒后)
    
  
1
任务
Frontend SELF ZH, 第 37 级, 课程 4
已锁定
乘法柯里化
乘法柯里化
1
任务
Frontend SELF ZH, 第 37 级, 课程 4
已锁定
问候函数
问候函数
评论
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION