【JS面试题】写一个复合函数

要求

请你编写一个函数，它接收一个函数数组 [f1, f2, f3，…， fn] ，并返回一个新的函数 fn ，它是函数数组的 复合函数 。

[f(x)， g(x)， h(x)] 的 复合函数 为 fn(x) = f(g(h(x))) 。

一个空函数列表的 复合函数 是 恒等函数 f(x) = x 。

你可以假设数组中的每个函数接受一个整型参数作为输入，并返回一个整型作为输出。

示例 1：

输入：functions = [x => x + 1, x => x * x, x => 2 * x], x = 4
输出：65
解释：
从右向左计算…
Starting with x = 4.
2 * (4) = 8
(8) * (8) = 64
(64) + 1 = 65

示例 2：

输出：functions = [x => 10 * x, x => 10 * x, x => 10 * x], x = 1
输入：1000
解释：
从右向左计算…
10 * (1) = 10
10 * (10) = 100
10 * (100) = 1000

示例 3：

输入：functions = [], x = 42
输出：42
解释：
空函数列表的复合函数就是恒等函数

解决方案

概述

函数组合是函数式编程中的一个概念，即一个函数的输出被用作另一个函数的输入。换言之，它是将两个或更多函数链接在一起，以使一个函数的结果成为下一个函数的输入的过程。

例如，这里有两个函数，f(x) 和 g(x)：

const f = x => x + 2;
const g = x => x * 3;

这两个函数的组合，表示为 (f ∘ g)(x)，即首先应用函数 g(x)，然后使用 g(x) 的结果作为 f(x) 的输入。在这种情况下，(f ∘ g)(x) 就是：

const composedFunc = x => f(g(x)); // f(g(x)) = f(3x) = 3x + 2

因此，当我们组合函数 f(x) 和 g(x) 时，得到的函数 (f ∘ g)(x) 接受一个输入 x，将其乘以 3（使用 g(x)），然后再加上 2 （使用 f(x)）。

方法 1：使用迭代的函数组合

概述

函数组合是一个概念，其中我们按指定的顺序将一系列函数应用于输入值。在这个问题中，我们需要组合数组中给定的函数，并创建一个表示它们组合的新函数。应用这些函数的顺序是从右到左的，当函数数组为空时，我们应该返回标识函数，它返回的输入值保持不变。

为了解决这个问题，我们可以从数组的最后一个函数开始反向迭代，并依次将每个函数应用于输入值。我们将从输入值 x 开始，应用数组中的最后一个函数。然后，我们将使用结果作为前一个函数的输入，并继续这个过程，直到我们到达数组中的第一个函数。在应用所有函数后，我们将返回最终的结果。

算法

1. 在 compose 函数内部，返回另一个接受输入值 x 的函数。
2. 检查函数数组的长度是否为零；如果是，则返回标识函数（即返回 x）。
3. 使用值 x 初始化变量 input。
4. 从最后一个索引到第一个索引遍历函数数组。
5. 对数组中的每个函数，将其应用于 input 值并使用结果更新 input 值。
6. 在遍历所有函数之后，将最终输入值作为组合函数的输出返回。

实现

以下是使用常规 for 循环的实现：

var compose = function (functions) {
  return function (x) {
    if (functions.length === 0) return x;
    let input = x;

    for (let i = functions.length - 1; i >= 0; i--) {
      const currFunc = functions[i];

      input = currFunc(input);
    }

    return input;
  };
};

使用 for … of 循环的实现：

var compose = function (functions) {
  return function (x) {
    if (functions.length === 0) return x;
    let input = x;

    for (const func of functions.reverse()) {
      input = func(input);
    }

    return input;
  };
};

方法 2：使用 Array.reduceRight() 的函数组合

概述

在第一种方法中，我们使用迭代的方式从右到左应用函数。不过，我们可以利用 Array.reduceRight() 方法来实现相同的结果。reduceRight() 方法将一个函数应用于累加器和数组中的每个元素（从右到左），以将它们还原为单个值。在这种情况下，我们的累加器将是输入值 x，函数将是数组中函数的组合。

使用 reduceRight() 简化了代码，并提供了更函数式编程风格的解决方案。关键是理解 Array.reduceRight() 方法的工作原理以及如何将其应用于此问题。

算法

1. 在 compose 函数内部，返回另一个接受输入值 x 的函数。
2. 使用 Array.reduceRight() 方法从右到左迭代函数。
3. 对数组中的每个函数，将其应用于累加器（初始为 x）并使用结果更新累加器。
4. 在迭代所有函数后，将最终累加器值作为组合函数的输出返回。

实现

var compose = function(functions) {
    return x => functions.reduceRight((acc, f) => f(acc), x);
};

关键在于理解 Array.reduceRight() 方法的工作原理。
Array.reduceRight() 是内置的 JavaScript 数组方法，用于对数组的每个元素应用一个函数，从右到左进行迭代。它需要两个参数：一个 reducer 函数和一个可选的累加器的初始值。
reducer 函数本身有四个参数：累加器、当前值、当前索引和正在处理的数组。累加器是一个在每次迭代中建立的值，最终在过程结束时返回。在我们的情况下，累加器表示应用组合函数中的函数时的中间结果。

以下是在 compose 函数上下文中 Array.reduceRight() 的工作方式的详细说明：

1. compose 函数接收一个包含函数的数组，并返回一个新的函数，该函数接受输入值 x。
2. 当使用输入值 x 调用组合函数时，它在函数数组上调用 Array.reduceRight()。
   reducer 函数对数组中的每个函数进行迭代，从最右边的元素开始向左移动。累加器最初包含输入值 x。
3. 在每次迭代中，reducer 函数将当前函数应用于累加器，并使用结果更新累加器。
4. 一旦所有函数都已应用，将返回累加器的最终值。

为了说明这个过程，考虑一个简单的例子：

const functions = [x => x * 2, x => x + 1];
const composedFn = compose(functions);
const result = composedFn(3); // 结果应该是 (3 + 1) * 2 = 8

1. compose 函数接收一个包含两个函数的数组：x => x * 2 和 x => x + 1。
2. 当使用输入值 3 调用 composedFn 时，它在函数数组上调用 Array.reduceRight()。
3. reducer 函数从最右边的函数 x => x + 1 开始，将它应用于累加器（最初为 3）。累加器变为 3 + 1 = 4。
4. reducer 函数然后移到下一个函数 x => x * 2，并将其应用于累加器（现在为 4）。累加器变为 4 * 2 = 8。
5. 累加器的最终值 8 被返回作为组合函数的结果。

总之，通过使用 Array.reduceRight()，我们可以用轻松简洁的方式应用函数组合。