array.prototype.deducerightを使用したJavaScriptの関数構成

近年、JavaScriptの機能的なプログラミングがますます人気が高まっています。頻繁に出版された原則（不変など）のいくつかはランタイムの回避策を必要としますが、言語の関数の一流の処理は、この基本的な原始によって駆動される構成可能なコードのサポートを証明しています。他の関数から関数を動的に組み合わせる方法を導入する前に、簡単にレビューしましょう。

キーポイント

JavaScriptの関数の組み合わせは、より単純な関数を組み合わせて複雑な関数を作成し、それによりコードの再利用性とモジュール性を改善することができます。このアプローチは、コードの理解、デバッグ、テストを簡素化し、「繰り返さない」（ドライ）（ドライ）の原則を促進し、冗長性を削減します。
Advanced-Order関数（1つ以上の関数をパラメーターとして使用するか、結果として1つの関数を返すことができます）は、JavaScriptの関数の組み合わせの重要な部分です。それらは、既存の関数を組み合わせることにより、新しい関数を作成するために使用されます。
javaScriptは、関数を値として処理し、より大きなコンテキスト固有のジョブの簡単な組み合わせを可能にします。高次関数を使用すると、定義と呼び出しが分離されます。これにより、オブジェクト指向プログラミングによって課される厳格な階層的制約から開発者を解放できます。
関数の組み合わせは、ReactやVueなどのJavaScriptフレームワークと使用できます。 Reactでは、コンポーネントを組み合わせて複雑なユーザーインターフェイスを構築することは一般的なパターンです。同様に、VueのMixinシステムは、関数の組み合わせの形態と見なすことができます。

関数とは何ですか？ 実際、関数は、副作用または返品値を実行するための一連の命令的な手順を実行できるようにする

手順

です。たとえば、

この関数がFirstNameおよびLastNameプロパティを備えたオブジェクトで呼び出された場合、GetFullNameは2つの対応する値を含む文字列を返します。

function getFullName(person) {
  return `${person.firstName} ${person.surname}`;
}

arrow関数syntax：

const character = {
  firstName: 'Homer',
  surname: 'Simpson',
};

const fullName = getFullName(character);

console.log(fullName); // => 'Homer Simpson'

をサポートしていることは注目に値します。

getfullname関数には1（つまり、単一のパラメーター）があり、1つの返品ステートメントしかないことを考えると、この式を簡素化できます。

これらの3つの表現の方法は異なりますが、最終的には同じ目的を達成しています。

const getFullName = (person) => {
  return `${person.firstName} ${person.surname}`;
};

nameプロパティからアクセスできるgetFullNameという関数を作成します。

const getFullName = person => `${person.firstName} ${person.surname}`;

パラメーターの人を受け入れます。

firstname and person.lastnameを含む計算された文字列を返します。スペースで区切られています。

• return値を介した関数を組み合わせます
関数の戻り値を宣言に割り当てることに加えて（例：const person = getPerson（）;）、それらを使用して他の機能のパラメーターを埋めるか、一般にJavaScriptが許可する値を提供することもできます。ロギングとセッションの副作用を実行する関数があるとします：

ネストされた呼び出しを使用して、GetPersonの返品価値についてこれらの操作を行うことができます：

function getFullName(person) {
  return `${person.firstName} ${person.surname}`;
}

必要なパラメーターを関数に呼びかけた方法に応じて提供する必要があるため、最も内側の関数が最初に呼び出されます。したがって、上記の例では、GetPersonの返品値がログに渡され、ログの返品値がストアに転送されます。関数呼び出しを組み合わせてステートメントを構築することにより、最終的にアトミックビルディングブロックから複雑なアルゴリズムを構築できますが、これらの呼び出しをネストすることは、10の機能を組み合わせたい場合にどのようになりますか？

const character = {
  firstName: 'Homer',
  surname: 'Simpson',
};

const fullName = getFullName(character);

console.log(fullName); // => 'Homer Simpson'

幸いなことに、エレガントな一般的な実装を使用できます。関数の配列を高次関数に簡素化することができます。

Array.prototype.reduce

を使用した累積アレイ

累積配列

配列プロトタイプの削減方法は、配列インスタンスを取得し、を単一の値として蓄積します。番号配列を合計する場合は、次の方法を使用できます。 このコードセグメントでは、numbers.Reduceは2つのパラメーターを受け入れます。各反復で呼び出されるコールバック関数と、コールバック関数によって返される値に渡される合計パラメーターの初期値があります。次のイテレーションは合計に渡されます。上記の呼び出しを調べてさらに分解するには：

const getFullName = (person) => {
  return `${person.firstName} ${person.surname}`;
};

コールバック関数は5回実行されます

初期値を提供するため、最初の呼び出しで合計は0になります
最初の呼び出しは0 2を返し、2回目のコールで合計が2に解決します
• この後続のコール2 3によって返された結果は、3回目の呼び出しなどで合計パラメーターに提供されます。
• コールバック関数は、array.prototype.reduceを呼び出す現在のインデックスとアレイインスタンスを表す他の2つのパラメーターを受け入れますが、最初の2つは最も重要で、通常は次のように呼ばれます。
• アキュムレータ - 最後のイテレーションコールバック関数によって返される値。最初の反復では、これは初期値に解決し、初期値が指定されていない場合、アレイ内の最初のアイテムに解決します。

currentValue - 現在の反復の配列値。

Array.Prototype.Reduce

を使用して関数を組み合わせます
• アレイを単一の値に単純化する方法を理解したので、この方法を使用して既存の関数を新しい関数に組み合わせることができます：
RESTパラメーター構文（...）を使用してアレイに任意の数のパラメーターをキャストしているため、消費者は各コールサイトの新しい配列インスタンスを明示的に作成する必要がないことに注意してください。構成も別の関数を返します。これにより、初期値（initialArg）を受け入れる高次関数を構成します。したがって、これは、必要に応じて新しい再利用可能な機能を組み合わせることができるため、重要です。

では、他の関数を単一の高次関数に組み合わせるにはどうすればよいですか？ このコードでは

：

• 人宣言は{firstName： 'homer'、incide： 'simpson'}
に解決します。
• 上記の人の表現は、ブラウザのコンソールに出力されます
• 人はJSONにシリアル化され、その後のsessionStorage
を書きます

コールオーダーの重要性 Composingユーティリティを使用して任意の数の関数を組み合わせて、コードをより簡潔で抽象化させる機能。ただし、インラインコールを再検討することにより、1つのポイントを強調できます。

人々は、これを私たちの作曲関数でコピーするのが自然だと思うかもしれません：

function getFullName(person) {
  return `${person.firstName} ${person.surname}`;
}

この場合、なぜfnested（4）=== fcomposed（4）falseに解決するのですか？最初に内部呼び出しを解釈する方法を強調したことを覚えているかもしれませんfcomposed returns 9。 Fのネストされたバリアントまたは組み合わせのバリアントの呼び出し順序を単純に逆転させることができますが、ネストされた呼び出しを反映するコンポーシングの特異性を考えると、左から左の順序で機能を減らす方法が必要です.Reducerightはこれを提供します：

const character = {
  firstName: 'Homer',
  surname: 'Simpson',
};

const fullName = getFullName(character);

console.log(fullName); // => 'Homer Simpson'

この実装では、fnested（4）とfcomposed（4）の両方が10に解決します。ただし、我々のgetPersonefects関数は誤って定義されていますが、内部機能の順序を逆にすることができます。私たちの以前の方法は非常に一般的であることがわかりましたが、しばしば

パイプ

const getFullName = (person) => {
  return `${person.firstName} ${person.surname}`;
};

：

と呼ばれています パイプ関数を使用することにより、getPersonsideEffectsで必要な左から右への順序を保持します。パイプラインは、この順序で概説した理由でRXJの主要なコンポーネントになりました。

const getFullName = person => `${person.firstName} ${person.surname}`;

継承の代替としての関数の組み合わせ

前の例では、無限の複数の関数をより大きく、再利用可能なターゲット指向ユニットに組み合わせる方法を見てきました。関数の組み合わせのもう1つの利点は、継承グラフの剛性から解放することです。このように表現できるクラスの階層に基づいて、ロギングとストレージの動作を再利用するとします

長さとは別に、このコードの直接的な問題は、別のクラスがログアブルを拡張するために継承を悪用することです。潜在的により深刻な問題は、競合の名前を命名することです

function getFullName(person) {
  return `${person.firstName} ${person.surname}`;
}

Mystateをインスタンス化してストアメソッドを呼び出す場合は、mystate.prototype.storeでsuper.store（）に呼び出しを追加しない限り、ストア可能なストアメソッドに電話しませんが、これは状態でタイトを作成します。 、保存可能な間の壊れやすいカップリング。これは、他の場所で紹介したように、エンティティシステムまたはポリシーパターンを使用して軽減できますが、表現システムのより広範な分類法を継承する利点にもかかわらず、関数の組み合わせは、メソッド名のコードに依存せずに共有する平らで簡潔な方法を提供します。

概要

JavaScriptは関数を値として処理し、式を生成し、より大きなコンテキスト固有のジョブを簡単に組み合わせることができます。このタスクを関数アレイの累積的なものとして考えると、必須のネストされた呼び出しの必要性がなくなり、高次関数を使用すると、定義と呼び出しが分離されます。さらに、オブジェクト指向プログラミングによって課される厳格な階層的制約を取り除くことができます。

JavaScriptの関数の組み合わせに関するFAQ JavaScriptの関数の組み合わせの意味は何ですか？ 関数の組み合わせは、JavaScriptと大規模な機能プログラミングの基本概念です。開発者は、より単純な機能を組み合わせて複雑な関数を作成し、それによりコードの再利用性とモジュール性を改善することができます。このアプローチにより、コードは理解しやすく、デバッグ、テストが容易になります。また、コードベースの冗長性を減らすために、「自分自身を繰り返さないでください」（乾燥）の原則を奨励します。

関数の組み合わせは、高次関数の概念にどのように関連していますか？

高次関数は、JavaScriptの関数の組み合わせの重要な部分です。高次関数は、1つ以上の関数をパラメーターとして使用したり、結果として関数を返したり、両方の操作を同時に実行できる関数です。関数の組み合わせでは、既存の関数を組み合わせることにより、高次関数を使用して新しい関数を作成することがよくあります。

JavaScriptの関数の組み合わせの実用的な例を提供できますか？

もちろん、簡単な例を考えてみましょう。ダブルとインクリメントの2つの機能があるとします。ダブルは数字を取り、2を掛け、インクリメントは入力に1を追加します。これら2つの関数を組み合わせて、数字を2倍にして結果を増加させる新しい関数を作成できます。

JavaScriptの関数の組み合わせと関数チェーンの違いは何ですか？

関数の組み合わせと関数チェーンは、JavaScriptの関数を結合する2つの異なる方法です。関数の組み合わせには、ある関数の出力を別の関数に入力として渡すことが含まれます。一方、関数チェーンには、各関数が以前の関数の結果を呼び出す複数の関数を順番に呼び出すことが含まれます。どちらの手法も同様の結果を達成できますが、機能の組み合わせは機能プログラミングの原則に沿っています。

const character = {
  firstName: 'Homer',
  surname: 'Simpson',
};

const fullName = getFullName(character);

console.log(fullName); // => 'Homer Simpson'

関数の組み合わせは、コードテストとデバッグにどのように役立ちますか？

関数の組み合わせにより、1つだけのことを行い、うまくいく小さな純粋な関数の作成が容易になります。これらの機能は、大規模なモノリシック機能よりもテストおよびデバッグが簡単です。各関数は独立しているため、コードの残りの部分について心配することなく、個別にテストできます。これにより、コードのバグを見つけて修正しやすくなります。

関数の組み合わせは、JavaScriptの非同期関数と可能ですか？

はい、JavaScriptの非同期関数と関数の組み合わせを使用できます。ただし、非同期関数の出力が入力として次の関数に正しく渡されることを確認する必要があるため、これにはさらに注意が必要です。これには通常、PromiseまたはAsync/Waing Syntaxを使用することが含まれます。

JavaScriptで関数の組み合わせを使用する潜在的な欠点や課題は何ですか？

機能の組み合わせには多くの利点がありますが、不適切に使用すると複雑さをもたらす可能性があります。たとえば、深くネストされた関数呼び出しを読み取り、理解するのが難しい場合があります。さらに、複合関数が純粋な関数ではない場合（つまり、副作用があります）、予期しない結果につながる可能性があります。したがって、関数を慎重に組み合わせて使用​​し、それらを優れたコーディングプラクティスと組み合わせることが重要です。

関数の組み合わせは、JavaScriptのカレーの概念とどのように関係していますか？

Curriizationは、複数のパラメーターを持つ関数が一連の関数に変換されるJavaScriptの手法であり、各関数には1つのパラメーターのみがあります。関数の組み合わせでカリーを使用して、より柔軟で再利用可能な機能を作成できます。実際、LodashやRamdaなどの一部のユーティリティライブラリは、カレー機能と組み合わせ機能の両方を提供しています。

関数の組み合わせは、ReactやVueなどのJavaScriptフレームワークで役立ちますか？

はい、機能の組み合わせは、ReactやVueなどのJavaScriptフレームワークで使用できます。実際、Reactでは、コンポーネントを組み合わせて複雑なユーザーインターフェイスを構築することは一般的なパターンです。同様に、VueのMixinシステムは、関数の組み合わせの形態と見なすことができます。

JavaScriptの機能の組み合わせを支援するライブラリやツールは何ですか？

はい、JavaScriptの機能の組み合わせにユーティリティを提供するいくつかのライブラリがあります。人気のあるライブラリには、Lodash、Ramda、Redux（国家管理用）が含まれます。これらのライブラリは、構成やパイプなどの関数を提供し、組み合わせ機能をより簡単で効率的にします。

以上がarray.prototype.deducerightを使用したJavaScriptの関数構成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。