ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript 関数プログラミングのコード構成 (compose) を理解する

JavaScript 関数プログラミングのコード構成 (compose) を理解する

不言
リリース: 2019-03-20 10:02:21
転載
3395 人が閲覧しました

この記事の内容は、JavaScript 関数型プログラミングにおけるコード構成 (compose) の理解に関するものであり、一定の参考価値がありますので、困っている方は参考にしていただければ幸いです。

関数型プログラミングにおけるコード構成 (compose) を理解するにはどうすればよいですか?

定義: 名前が示すように、関数型プログラミングでは、Compose はいくつかの特徴的な関数をつなぎ合わせて結合することです。真新しい関数

コードの理解:

// 一个将小写转大写的函数
let toUpperCase = (x) => x.toUpperCase();

// 一个在字符后加!的函数
let exclaim = (x) => x + '!';

// 将两个函数组合起来, 这里假设我们实现了compose
let shout = compose(toUpperCase,exclaim);

shout('js每日一题') // JS每日一题 !, 显示结果里上面两个函数的特点都应用上了
ログイン後にコピー

pointfree

コードの組み合わせには重要な概念があります:ポイントフリー (決してデータに伝えない)、それは関数が次のことを行うことを意味します。どのような種類のデータを操作するかについては言及する必要はありません。

これは少しわかりにくいので、コードを見て理解しましょう

// 我们有一个将字符转换成大写并且将其空格转换为'-'的函数
// 细节的同学应该发现这个函数暴露了一个word形参
// 根据pointfree定义,此函数非pointfree模式
let snakeCase = (word) => word.toUpperCase().replace(/\s+/ig,'-');

// 下面这个函数与上面的功能一致,但我们可以观察到其没有数据暴露,所以其为pointfree模式
let snakeCase = compose(replace(/\s+/ig,'-'),toUpperCase)
ログイン後にコピー

ここまで述べましたが、何ができるでしょうか?不要な名前を減らし、コードをシンプルかつ汎用的に保ちます。

compose 実装

以上、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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:segmentfault.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート