ホームページ > 記事 > ウェブフロントエンド > JavaScript 関数プログラミングのコード構成 (compose) を理解する
この記事の内容は、JavaScript 関数型プログラミングにおけるコード構成 (compose) の理解に関するものであり、一定の参考価値がありますので、困っている方は参考にしていただければ幸いです。
関数型プログラミングにおけるコード構成 (compose) を理解するにはどうすればよいですか?
定義: 名前が示すように、関数型プログラミングでは、Compose はいくつかの特徴的な関数をつなぎ合わせて結合することです。真新しい関数
コードの理解:
// 一个将小写转大写的函数 let toUpperCase = (x) => x.toUpperCase(); // 一个在字符后加!的函数 let exclaim = (x) => x + '!'; // 将两个函数组合起来, 这里假设我们实现了compose let shout = compose(toUpperCase,exclaim); shout('js每日一题') // JS每日一题 !, 显示结果里上面两个函数的特点都应用上了
コードの組み合わせには重要な概念があります:ポイントフリー (決してデータに伝えない)、それは関数が次のことを行うことを意味します。どのような種類のデータを操作するかについては言及する必要はありません。
これは少しわかりにくいので、コードを見て理解しましょう
// 我们有一个将字符转换成大写并且将其空格转换为'-'的函数 // 细节的同学应该发现这个函数暴露了一个word形参 // 根据pointfree定义,此函数非pointfree模式 let snakeCase = (word) => word.toUpperCase().replace(/\s+/ig,'-'); // 下面这个函数与上面的功能一致,但我们可以观察到其没有数据暴露,所以其为pointfree模式 let snakeCase = compose(replace(/\s+/ig,'-'),toUpperCase)
ここまで述べましたが、何ができるでしょうか?不要な名前を減らし、コードをシンプルかつ汎用的に保ちます。
以上、compose メソッドがすでに存在すると仮定し、次にそれを実装します
まず、その特性を分析します
// 这样子其实就能满足我们上面示例的要求了 const compose = function(f, g) { return function(x) { return f(g(x)); }; };これで終わりですか?いいえ、構成が表示されます上の例 単純化された compose 実装では 2 つの関数しかサポートしていないため、2 つの関数だけが渡されます。そのため、非常に長いパイプラインをサポートしたい場合は、明らかに上記の compose では十分ではありません。次に、次の compose 実装を見てみましょう。優れたオープン ソース ライブラリ redux
// 摘自 https://github.com/reactjs/redux/blob/master/src/compose.js export default function compose(...funcs) { // 没有传入函数运行直接返回参数 if (funcs.length === 0) { return arg => arg } // 只传入一个函数,就返回其本身 if (funcs.length === 1) { return funcs[0] } // 核心代码其实就是一句reduce, reduce特性就是按顺序执行,并且将结果传递给下一次执行, 这里多说一句, reduce顺序执行多个相依赖的promise也很好用 return funcs.reduce((a, b) => (...args) => a(b(...args))) }
概要
複数の単一機能関数を組み合わせる関数Multiple この関数は一連のデータ (共通) を提供します。パラメータ)#データを記述する必要はありません (ポイントフリー)
#関数は右から左に順番に実行され、結果は次の関数のパラメータとして使用されます この記事はここで終了しています。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトのJavaScript チュートリアル ビデオ
列に注目してください。以上がJavaScript 関数プログラミングのコード構成 (compose) を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。