高階関数の詳細な分析、JavaScript での関数のカリー化と結合-jsチュートリアル-php.cn

この記事では、JavaScript の関数型プログラミングを理解し、高階関数、カリー化関数、結合関数、および一般的な関数関数を紹介します。皆様のお役に立てれば幸いです。

高階関数の詳細な分析、JavaScript での関数のカリー化と結合

オブジェクト指向プログラミングと関数型プログラミングは、2つの非常に異なるプログラミングパラダイムであり、それぞれに独自のルールと利点と欠点があります。

ただし、JavaScript は常に 1 つのルールに従うわけではなく、これら 2 つのルールのちょうど中間に位置し、クラス、オブジェクト、継承など、通常の OOP 言語のいくつかの側面を提供します。しかし同時に、高階関数やそれらを構成する機能など、関数型プログラミングのいくつかの概念も得られます。

高階関数

3 つの概念のうち最も重要な高階関数から始めます。

高階関数とは、関数が単にコードから定義して呼び出すことができるものではなく、実際に割り当て可能なエンティティとして使用できることを意味します。 JavaScript を使用したことがある場合、これは驚くべきことではありません。定数に匿名関数を割り当てることは非常に一般的です。

const adder = (a, b) => {
  return a + b
}

ログイン後にコピー

上記のロジックは他の多くの言語では有効ではありません。整数のような関数を割り当てることができるのは非常に便利なツールです。実際、この記事で取り上げるトピックのほとんどはこの関数の副産物です。

高階関数の利点: カプセル化動作

高階関数を使用すると、上記のように関数を割り当てるだけでなく、パラメーターの受け渡しとしても使用できます。これにより、複雑な動作をパラメータとして直接渡すことで再利用できる、常に動的なコードベースを作成するための扉が開かれます。

純粋なオブジェクト指向環境で作業し、タスクを完了するためにクラスの機能を拡張したいと想像してください。この場合、その実装ロジックを抽象クラスにカプセル化し、それを一連の実装クラスに拡張することで継承を使用できます。これは完璧な OOP 動作であり、機能します。

再利用可能なロジックをカプセル化するための抽象構造を作成しました
二次構造を作成しました
元のクラスを再利用しました

#ここで、ロジックを再利用したいのですが、再利用可能なロジックを関数に抽出するだけで、この関数がパラメータとして他の関数に渡されます。では、関数を作成しているだけなので、「定型的な」プロセスをいくつか節約できます。

以下のコードは、OOP でプログラムロジックを再利用する方法を示しています。

//Encapsulated behavior封装行为stract class LogFormatter {
  
  format(msg) {
    return Date.now() + "::" + msg
  } 
}

//重用行为
class ConsoleLogger extends LogFormatter {
  
  log(msg) {
    console.log(this.format(msg))
  }  
}

class FileLogger extends LogFormatter {

  log(msg) {
    writeToFileSync(this.logFile, this.format(msg))
  }
}

ログイン後にコピー

2 番目の表現は、ロジックを関数に抽出し、組み合わせて必要なものを簡単に作成できるようにするものです。書式設定機能や書き込み機能を追加し続けて、それらを 1 行のコードで組み合わせることができます。

// 泛型行为抽象
function format(msg) {
  return Date.now() + "::" + msg
}

function consoleWriter(msg) {
  console.log(msg)
}

function fileWriter(msg) {
  let logFile = "logfile.log"
  writeToFileSync(logFile, msg)
}

function logger(output, format) {
  return msg => {
    output(format(msg))
  }
}
// 通过组合函数来使用它
const consoleLogger = logger(consoleWriter, format)
const fileLogger = logger(fileWriter, format)

ログイン後にコピー

どちらのアプローチにも利点があり、どちらも非常に効果的であり、どちらかが最良というわけではありません。このアプローチの柔軟性を示すために、動作 (つまり関数) をプリミティブ型 (整数や文字列など) であるかのように引数として渡す機能があります。

高階関数の利点: 簡潔なコード

この利点の良い例は、

forEach などの Array メソッドです。 、map、reduce など。 C などの非関数型プログラミング言語では、配列要素を反復処理して変換するには、for ループまたはその他のループ構造を使用する必要があります。これには、指定された方法でコードを記述する必要があります。つまり、要件はサイクルが発生するプロセスを記述します。

let myArray = [1,2,3,4]
let transformedArray = []

for(let i = 0; i < myArray.length; i++) {
  transformedArray.push(myArray[i] * 2) 
}

ログイン後にコピー

上記のコードは主に次のことを行います:

i を宣言します。これは myArray のインデックスとして使用されます。その値の範囲は、0 から myArray
の各値に対して、myArray の長さです。値は i の位置で乗算され、transformedArray 配列に追加されます。

const double = x => x * 2;

let myArray = [1,2,3,4];
let transformedArray = myArray.map(double);

ログイン後にコピー

最初の方法と比較して、この方法は読みやすく、ロジックが 2 つの関数 (

map

と ##) に隠されているためです。 #double) なので、それらがどのように機能するかを理解することを心配する必要はありません。最初の例では、関数内の乗算ロジックを非表示にすることもできますが、トラバーサルロジックが存在する必要があるため、不必要な読み取り障害が追加されます。 カリー化

関数カリー化

は、複数のパラメーターを受け入れる関数を、単一のパラメーター (オリジナル関数 (original function) 1 つのパラメーターを受け取り、残りのパラメーターを受け入れて結果を返す新しい関数を返します。例を見てみましょう:

function adder(a, b) {
  return a + b
}

// 变成
const add10 = x => adder(a, 10)

ログイン後にコピー

さて、値の範囲に 10

を追加したいだけの場合は、毎回の代わりに

add10 を呼び出すことができます。どちらも同じ 2 番目の引数を使用して adder を呼び出します。この例はばかばかしいように思えるかもしれませんが、カレーの理想を体現しています。

你可以将柯里化视为函数式编程的继承，然后按照这种思路再回到logger的示例，可以得到以下内容：

function log(msg, msgPrefix, output) {
  output(msgPrefix + msg)
} 

function consoleOutput(msg) {
  console.log(msg)
}

function fileOutput(msg) {
  let filename = "mylogs.log"
  writeFileSync(msg, filename)
}

const logger = msg => log(msg, ">>", consoleOutput);
const fileLogger = msg => log(msg, "::", fileOutput);

ログイン後にコピー

log的函数需要三个参数，而我们将其引入仅需要一个参数的专用版本中，因为其他两个参数已由我们选择。

注意，这里将log函数视为抽象类，只是因为在我的示例中，不想直接使用它，但是这样做是没有限制的，因为这只是一个普通的函数。如果我们使用的是类，则将无法直接实例化它。

组合函数

函数组合就是组合两到多个函数来生成一个新函数的过程。将函数组合在一起，就像将一连串管道扣合在一起，让数据流过一样。

在计算机科学中，函数组合是将简单函数组合成更复杂函数的一种行为或机制。就像数学中通常的函数组成一样，每个函数的结果作为下一个函数的参数传递，而最后一个函数的结果是整个函数的结果。

这是来自维基百科的函数组合的定义，粗体部分是比较关键的部分。使用柯里化时，就没有该限制，我们可以轻松使用预设的函数参数。

代码重用听起来很棒，但是实现起来很难。如果代码业务性过于具体，就很难重用它。如时代码太过通用简单，又很少人使用。所以我们需要平衡两者，一种制作更小的、可重用的部件的方法，我们可以将其作为构建块来构建更复杂的功能。

在函数式编程中，函数是我们的构建块。每个函数都有各自的功能，然后我们把需要的功能(函数)组合起来完成我们的需求，这种方式有点像乐高的积木，在编程中我们称为组合函数。

看下以下两个函数：

var add10 = function(value) {
    return value + 10;
};
var mult5 = function(value) {
    return value * 5;
};

ログイン後にコピー

上面写法有点冗长了，我们用箭头函数改写一下：

var add10 = value => value + 10;
var mult5 = value => value * 5;

ログイン後にコピー

现在我们需要有个函数将传入的参数先加上 10 ，然后在乘以 5，如下：

var mult5AfterAdd10 = value => 5 * (value + 10)

ログイン後にコピー

尽管这是一个非常简单的例子，但仍然不想从头编写这个函数。首先，这里可能会犯一个错误，比如忘记括号。第二，我们已经有了一个加 10 的函数 add10 和一个乘以 5 的函数 mult5 ，所以这里我们就在写已经重复的代码了。

使用函数 add10，mult5 来重构 mult5AfterAdd10 ：

var mult5AfterAdd10 = value => mult5(add10(value));

ログイン後にコピー

我们只是使用现有的函数来创建 mult5AfterAdd10，但是还有更好的方法。

在数学中， f ∘ g 是函数组合，叫作“f 由 g 组合”，或者更常见的是 “f after g”。因此 (f ∘ g)(x) 等效于f(g(x)) 表示调用 g 之后调用 f。

在我们的例子中,我们有 mult5 ∘ add10 或 “add10 after mult5”,因此我们的函数的名称叫做 mult5AfterAdd10。由于Javascript本身不做函数组合，看看 Elm 是怎么写的:

add10 value =
    value + 10
mult5 value =
    value * 5
mult5AfterAdd10 value =
    (mult5 << add10) value

ログイン後にコピー

在 Elm 中 << 表示使用组合函数，在上例中 value 传给函数 add10 然后将其结果传递给 mult5。还可以这样组合任意多个函数:

f x =
   (g << h << s << r << t) x

ログイン後にコピー

这里 x 传递给函数 t，函数 t 的结果传递给 r，函数 t 的结果传递给 s，以此类推。在Javascript中做类似的事情，它看起来会像 g(h(s(r(t(x)))))，一个括号噩梦。

常见的函数式函数(Functional Function)

函数式语言中3个常见的函数：Map,Filter,Reduce。

如下JavaScript代码：

 for (var i = 0; i < something.length; ++i) {
    // do stuff
 }

ログイン後にコピー

这段代码存在一个很大的问题，但不是bug。问题在于它有很多重复代码(boilerplate code)。如果你用命令式语言来编程，比如Java，C#，JavaScript，PHP，Python等等，你会发现这样的代码你写地最多。这就是问题所在。

现在让我们一步一步的解决问题，最后封装成一个看不见 for 语法函数：

先用名为 things 的数组来修改上述代码：

var things = [1, 2, 3, 4];
for (var i = 0; i < things.length; ++i) {
    things[i] = things[i] * 10; // 警告：值被改变!
}
console.log(things); // [10, 20, 30, 40]

ログイン後にコピー

这样做法很不对，数值被改变了！

在重新修改一次：

var things = [1, 2, 3, 4];
var newThings = [];
for (var i = 0; i < things.length; ++i) {
    newThings[i] = things[i] * 10;
}
console.log(newThings); // [10, 20, 30, 40]

ログイン後にコピー

这里没有修改things数值，但却却修改了newThings。暂时先不管这个，毕竟我们现在用的是 JavaScript。一旦使用函数式语言，任何东西都是不可变的。

现在将代码封装成一个函数，我们将其命名为 map，因为这个函数的功能就是将一个数组的每个值映射(map)到新数组的一个新值。

var map = (f, array) => {
    var newArray = [];
    for (var i = 0; i < array.length; ++i) {
        newArray[i] = f(array[i]);
    }
    return newArray;
};

ログイン後にコピー

函数 f 作为参数传入，那么函数 map 可以对 array 数组的每项进行任意的操作。

现在使用 map 重写之前的代码：

var things = [1, 2, 3, 4];
var newThings = map(v => v * 10, things);

ログイン後にコピー

这里没有 for 循环！而且代码更具可读性，也更易分析。

现在让我们写另一个常见的函数来过滤数组中的元素:

var filter = (pred, array) => {
    var newArray = [];
for (var i = 0; i < array.length; ++i) {
        if (pred(array[i]))
            newArray[newArray.length] = array[i];
    }
    return newArray;
};

ログイン後にコピー

当某些项需要被保留的时候，断言函数 pred 返回TRUE，否则返回FALSE。

使用过滤器过滤奇数:

var isOdd = x => x % 2 !== 0;
var numbers = [1, 2, 3, 4, 5];
var oddNumbers = filter(isOdd, numbers);
console.log(oddNumbers); // [1, 3, 5]

ログイン後にコピー

比起用 for 循环的手动编程，filter 函数简单多了。最后一个常见函数叫reduce。通常这个函数用来将一个数列归约(reduce)成一个数值，但事实上它能做很多事情。

在函数式语言中，这个函数称为 fold。

var reduce = (f, start, array) => {
    var acc = start;
    for (var i = 0; i < array.length; ++i)
        acc = f(array[i], acc); // f() 有2个参数
    return acc;
});

ログイン後にコピー

reduce函数接受一个归约函数 f，一个初始值 start，以及一个数组 array。

这三个函数，map,filter,reduce能让我们绕过for循环这种重复的方式，对数组做一些常见的操作。但在函数式语言中只有递归没有循环，这三个函数就更有用了。附带提一句，在函数式语言中，递归函数不仅非常有用，还必不可少。