JS の compose 関数と pipe 関数の使い方の詳細な説明

JS の compose 関数と pipe 関数の使い方の詳細な説明

作成機能

compose 関数は、ネストされた順序で実行する必要がある関数をフラット化できます。ネストされた実行とは、1 つの関数の戻り値が別の関数のパラメーターとして使用されることを意味します。簡単な要件を考えてみましょう。この要件は非常に単純なので、計算関数で次のように実行できます。

定数計算 = x => (x + 10) * 10;
res = calculate(10);とします。
コンソール.log(res); // 200

しかし、前に説明した関数型プログラミングによれば、複雑なステップをいくつかの単純で再利用可能なステップに分解できるので、加算関数と乗算関数を分離しました。

定数を追加します = x => x + 10;
定数乗算 = x => x * 10;

// 計算は 2 つの関数のネストされた計算に変更され、add 関数の戻り値は multiply 関数のパラメーターとして使用されます。let res = multiply(add(10));
console.log(res); // 結果は依然として200です

上記の計算方法は関数のネストされた実行であり、私たちの compose の役割は、ネストされた実行メソッドをパラメーターとしてフラット化することです。ネストされた実行が発生すると、内部のメソッド、つまり右側のメソッドが最初に実行され、次に左側に戻ります。私たちの compose メソッドも右側のパラメーターから開始されるため、目標は非常に明確です。次のような compose メソッドが必要です。

// パラメータは右から左に実行されるため、multiply が最初に実行され、add が最後に実行されます。let res = compose(multiply, add)(10);

これについて話す前に、使用する必要がある関数を見てみましょう: Array.prototype.reduce

配列プロトタイプの削減

配列のreduceメソッドは累積効果を実現できます。このメソッドは2つのパラメータを受け取ります。1つ目は累積メソッド、2つ目は初期化値です。アキュムレータは 4 つのパラメータを受け取ります。最初のパラメータは最後に計算された値で、2 番目のパラメータは配列の現在の値です。主にこの 2 つのパラメータが使用されます。最後の 2 つのパラメータは一般的には使用されません。これらは現在のインデックスと現在の反復の配列です。

定数arr = [[1, 2], [3, 4], [5, 6]];
// prevRes の初期値は渡された [] であり、各反復後に計算された値になります。const flatArr = arr.reduce((prevRes, item) => prevRes.concat(item), []);

console.log(flatArr); // [1, 2, 3, 4, 5, 6]

Array.prototype.reduceRight

Array.prototype.reduce は左から右に反復処理します。右から左に反復処理する必要がある場合は、Array.prototype.reduceRight を使用します。

定数arr = [[1, 2], [3, 4], [5, 6]];
// prevRes の初期値は渡された [] であり、各反復後に計算された値になります。const flatArr = arr.reduceRight((prevRes, item) => prevRes.concat(item), []);

console.log(flatArr); // [5, 6, 3, 4, 1, 2]

では、この compose メソッドをどのように実装するのでしょうか? Array.prototype.reduceRight を使用する必要があります。

const compose = 関数(){
  // 受信したパラメータを配列に格納します。args == [乗算、加算]
  const args = [].slice.apply(引数);
  関数(x)を返す{
    args.reduceRight((res, cb) => cb(res), x) を返します。
  }
}

// このメソッドを検証してみましょう let calculate = compose(multiply, add);
res = calculate(10);とします。
console.log(res); // 結果は依然として200です

上記の compose 関数は、ES6 を使用するとより簡潔になります。

const compose = (...args) => x => args.reduceRight((res, cb) => cb(res), x);

Redux のミドルウェアは compose を使用して実装されており、webpack の loader の読み込み順序も compose を使用して実装されているため、右から左になります。

パイプ関数

パイプ関数はcompose関数と同じで、パラメータもフラットに配置されますが、順序は左から右になります。実装してみましょう。reduceRight を Reduce に変更するだけです。

const パイプ = 関数(){
  const args = [].slice.apply(引数);
  関数(x)を返す{
    args.reduce((res, cb) => cb(res), x) を返します。
  }
}

// パラメータの順序を左から右に変更します。let calculate = pipe(add, multiply);
res = calculate(10);とします。
console.log(res); // 結果は依然として200です

ES6 ライティング:

const パイプ = (...args) => x => args.reduce((res, cb) => cb(res), x)

以上がJSにおけるcompose関数とpipe関数の使い方の詳しい説明です。JSについてさらに詳しく知りたい方は、123WORDPRESS.COM内の他の関連記事もぜひご注目ください!

以下もご興味があるかもしれません:
  • Node.jsパイプはソースコード解析を実装します
  • Node.jsのストリームとパイプのメカニズムの原理と実装を理解する
  • JavaScript Reduceの詳しい説明
  • JavaScript Array.reduce ソースコードの詳細な説明
  • JavaScript における Reduce() の 5 つの基本的な使用例
  • JS配列reduce()メソッドの原理と使い方の分析
  • JS配列Reduceメソッドの機能と使い方の詳しい説明
  • JS配列メソッドreduceの使用例の分析
  • JavaScript の Reduce と ReduceRight の説明

<<:  Linux システムで MySQL データベースの解凍バージョンをインストールして構成する方法

>>:  MySQLのslave_exec_modeパラメータの詳細な説明

推薦する

vsftpd ユーザーが ssh 経由でログインすることを禁止する方法

序文vsftp は使いやすく安全な FTP サーバー ソフトウェアです。システムユーザーまたは仮想ユ...

レスポンシブWebデザイン学習(1) - 画面サイズと使用率の決定

最近では、モバイルデバイスがますます普及しており、ユーザーがスマートフォンやタブレットを使用して W...

WeChatアプレットを少なく使う方法(最適な方法)

序文私は less/sass を書くことに慣れていますが、小さなプログラムを開発するときには、まだ ...

Navicat を MySQL に接続するときに発生する 2059 エラーの解決方法

最近、Djangoを学習しているときにデータベースを使用する必要があったため、MySQLで使用するた...

MySQL設定ファイルを変更できない問題の解決方法(Win10)

他の人のために解決した問題を記録します。問題の説明MySQLのバージョンは5.7、オペレーティングシ...

あまり一般的ではないが便利な CSS 属性操作の完全ガイド

1. カスタムテキスト選択 ::選択{ 背景: 赤; 色: 黒; } 2. ビデオコントロールからダ...

フロントエンド例外 502 不正なゲートウェイの原因と解決策

目次502 不正なゲートウェイ エラーの発生1. 502 不正なゲートウェイ エラーとは何ですか? ...

Linux userdel コマンドの使用法

1. コマンドの紹介userdel (ユーザー削除) コマンドは、ユーザー アカウントと関連ファイル...

ソースコードから MySQL 8.0.20 をコンパイルしてインストールする詳細なチュートリアル

前回の記事では、次のことを紹介しました。 MySQL8.0.20 インストール チュートリアルとイン...

CocosCreator 学習モジュールスクリプト

Cocos Creator モジュラースクリプトCocos Creator を使用すると、コードを複...

Linux での NVIDIA GPU 使用状況の監視の詳細な説明

TensorFlow をディープラーニングに使うとビデオメモリ不足がよく起こるので、GPU 使用状況...

nginx で Vue プロジェクトをデプロイする方法

今日は nginx サーバーを使用するのですが、vue プロジェクトをサーバーにデプロイする必要もあ...

Windows での MySQL 5.7.18 のインストールと設定のチュートリアル

この記事では、WindowsでのMySQL 5.7.18のインストールと設定のチュートリアルを参考ま...

jsBridgeの動作メカニズムを1つの記事で学ぶ

目次js 呼び出しメソッドアンドロイド1.jsはネイティブを呼び出す2. ネイティブコールjs iO...