作成機能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.reduceRightArray.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内の他の関連記事もぜひご注目ください! 以下もご興味があるかもしれません:
|
<<: Linux システムで MySQL データベースの解凍バージョンをインストールして構成する方法
>>: MySQLのslave_exec_modeパラメータの詳細な説明
序文vsftp は使いやすく安全な FTP サーバー ソフトウェアです。システムユーザーまたは仮想ユ...
最近では、モバイルデバイスがますます普及しており、ユーザーがスマートフォンやタブレットを使用して W...
序文私は less/sass を書くことに慣れていますが、小さなプログラムを開発するときには、まだ ...
最近、Djangoを学習しているときにデータベースを使用する必要があったため、MySQLで使用するた...
他の人のために解決した問題を記録します。問題の説明MySQLのバージョンは5.7、オペレーティングシ...
1. カスタムテキスト選択 ::選択{ 背景: 赤; 色: 黒; } 2. ビデオコントロールからダ...
目次502 不正なゲートウェイ エラーの発生1. 502 不正なゲートウェイ エラーとは何ですか? ...
1. コマンドの紹介userdel (ユーザー削除) コマンドは、ユーザー アカウントと関連ファイル...
前回の記事では、次のことを紹介しました。 MySQL8.0.20 インストール チュートリアルとイン...
Cocos Creator モジュラースクリプトCocos Creator を使用すると、コードを複...
目次# データ準備後# SQLクエリ率テスト# SQL グループレートテスト# sql ソート率テス...
TensorFlow をディープラーニングに使うとビデオメモリ不足がよく起こるので、GPU 使用状況...
今日は nginx サーバーを使用するのですが、vue プロジェクトをサーバーにデプロイする必要もあ...
この記事では、WindowsでのMySQL 5.7.18のインストールと設定のチュートリアルを参考ま...
目次js 呼び出しメソッドアンドロイド1.jsはネイティブを呼び出す2. ネイティブコールjs iO...