検索
ホームページウェブフロントエンドjsチュートリアル関数構成:保守可能なコードの構成要素

Function Composition: Building Blocks for Maintainable Code

javaScript関数の組み合わせ:より保守可能なコードを構築します

javaScript関数構成は、複数の単純な関数を、特定のデータのサブ機能操作を論理順序で実行する単一のより複雑な関数に組み合わせる手法です。関数が適用される順序は、異なる結果を生成します。

保守可能なコードを記述するには、次の関数が正しく処理できるように、各組み合わせ関数の返品タイプを理解することが重要です。 JavaScriptは、組み合わせが不適切なタイプの機能を返すことを妨げないため、責任のこの部分はプログラマーにあります。

機能的なプログラミングパラダイムに精通していない人の場合、関数を組み合わせると、コードが複雑に見えるようになります。ただし、ES2015構文の出現により、矢印関数を使用して、特別な組み合わせ方法を必要とせずに1つのコードで簡単な組み合わせ関数を作成することができます。

組み合わせ関数は純粋な関数である必要があります。つまり、特定の値が関数に渡されるたびに、関数は同じ結果を返す必要があり、関数は独自の外部値を変更する副作用を持たないようにします。これにより、よりクリーンで読みやすいコードが生成されます。

この記事は、ジェフ・モット、ダン・プリンス、セバスチャン・セイツによってレビューされました。 SitePointコンテンツを最高の状態にしてくれたすべてのSitePointピアレビューアに感謝します!

Function Composition: Building Blocks for Maintainable Code

機能的思考の利点の1つは、小さくて理解しやすい単一関数を使用して複雑な関数を構築する能力です。 しかし、これは、最もエレガントなソリューションを作成する方法を把握するために、肯定的ではなく、逆に問題について考える必要がある場合があります。この記事では、JavaScriptの関数の組み合わせをチェックするための段階的なアプローチを取り、理解しやすく、エラーが少ないコードをどのように生成するかを示します。

ネストされた関数

構成は、2つ以上の単純な関数をより複雑な関数に組み合わせることができる手法であり、論理的な順序で合格したデータの各サブ機能を実行します。この結果を取得するには、ある関数を別の関数にネストし、結果が生成されるまで内部関数の結果で外部関数の操作を繰り返す必要があります。結果は、関数が適用される順序によって異なる場合があります。これは、JavaScriptですでに知っているプログラミング技術を使用して、関数呼び出しを別の関数にパラメーターとして渡すことで簡単に実証できます。

function addOne(x) {
  return x + 1;
}
function timesTwo(x) {
  return x * 2;
}
console.log(addOne(timesTwo(3))); //7
console.log(timesTwo(addOne(3))); //8
この場合、addone()関数を定義して値を値に追加し、timestwo()関数は値に2を掛けます。ある関数の結果を別の関数として渡すことにより、初期値が同じであっても、他の1つの任意が他の1つをネストすることが異なる結果をどのように生成するかを見ることができます。内部関数が最初に実行され、結果は外部関数に渡されます。

命令的な組み合わせ

同じ一連の操作を繰り返したい場合は、1つ目と2番目の関数を自動的に適用する新しい関数を定義するのが便利な場合があります。これは次のようになるかもしれません:

function addOne(x) {
  return x + 1;
}
function timesTwo(x) {
  return x * 2;
}
console.log(addOne(timesTwo(3))); //7
console.log(timesTwo(addOne(3))); //8

この場合、2つの関数を特定の順序で手動で結合します。最初に渡された値をホルダー変数に割り当てる新しい関数を作成し、次に最初の関数を実行して2番目の関数を実行してその変数の値を更新し、最後にその所有者の値を返します。 (ホルダーと呼ばれる変数を使用して一時的に渡された値を保持していることに注意してください。このような単純な関数については、余分なローカル変数が冗長に見えますが、命令的なJavaScriptであっても、関数の引数はまた渡されます。定数を局所的に変更することが可能ですが、これにより、関数の異なる段階でパラメーター値が何であるかについて混乱が生じます。)同様に、別の新しい関数を作成する場合それどころか、これら2つの小さな機能を適用する順序は、次のことを行うことができます。

// ...来自上面的先前函数定义
function addOneTimesTwo(x) {
  var holder = x;
  holder = addOne(holder);
  holder = timesTwo(holder);
  return holder;
}
console.log(addOneTimesTwo(3)); //8
console.log(addOneTimesTwo(4)); //10
もちろん、このコードは非常に反復的に見え始めます。私たちの2つの新しい組み合わせ関数はほぼ同じですが、彼らが呼ぶ2つの小さな関数には異なる実行命令があることを除きます。私たちはそれを単純化する必要があります(自分自身を繰り返さないように)。また、このように値を変更する一時的な変数を使用すると、たとえそれが作成している組み合わせ関数の内部に隠されていても、あまり機能的ではありません。結論:私たちはもっとうまくやることができます。

機能的な組み合わせを作成

既存の機能を採用し、必要な順序でそれらを結合する組み合わせ関数を作成しましょう。毎回内部の詳細に対処することなく、これを一貫した方法で行うには、関数をパラメーターとして渡す順序を決定する必要があります。 2つのオプションがあります。パラメーターはそれぞれ関数であり、左から右または右から左に実行できます。つまり、提案した新しい関数を使用して、compose(timestwo、addone)がtimestwo(addone())を表してパラメーターを左から左に読み取ることができます。パラメーターを左から右に実行する利点は、英語で同じ方法で読み取られることです。これは、加算前に乗算が行われることを暗示する機能を組み合わせた機能と命名する方法と非常によく似ています。私たちは皆、簡潔で読みやすいコードのための論理的な命名の重要性を知っています。パラメーターを左から右に実行することの欠点は、操作する値を前に配置する必要があることです。ただし、値を前に置くと、結果の関数を将来他の機能と組み合わせるのが便利ではありません。このロジックの背後にある考えをよく説明するために、ブライアン・ロンズドルフの古典的なビデオHey Underscoreを超えて行くことはできません。あなたはそれを間違っています。 (Underscoreには、BrianがLodash-FPやRamdaなどの機能的なプログラミングライブラリでUnderscoreを使用する際に議論する機能的プログラミングの問題を解決するのに役立つFPオプションがあることに注意する必要がありますが、とにかく、私たちはあなたが望んでいることを本当に望んでいます。 DOは、最初にすべての構成データに合格し、最終的に操作する値を渡します。したがって、組み合わせた関数をパラメーターの読み取りと右から左に適用することとして定義することが最も論理的です。したがって、このように見える基本的な組み合わせ関数を作成できます:

function addOne(x) {
  return x + 1;
}
function timesTwo(x) {
  return x * 2;
}
console.log(addOne(timesTwo(3))); //7
console.log(timesTwo(addOne(3))); //8

この非常に単純な組み合わせ関数を使用して、2つの以前の複雑な関数をより簡単に構築し、同じ結果を確認できます。

// ...来自上面的先前函数定义
function addOneTimesTwo(x) {
  var holder = x;
  holder = addOne(holder);
  holder = timesTwo(holder);
  return holder;
}
console.log(addOneTimesTwo(3)); //8
console.log(addOneTimesTwo(4)); //10
この単純な組み合わせ関数は機能しますが、柔軟性と適用性を制限する多くの問題を考慮しません。たとえば、2つ以上の関数を組み合わせたい場合があります。さらに、このプロセスでこの情報を失います。これらの問題を解決することはできますが、組み合わせの仕組みを習得する必要はありません。自分で書くのではなく、RAMDAなどの既存の機能ライブラリからより強力な組み合わせを継承します。デフォルトでは、左から左へのパラメーターの順序を考慮しています。

タイプはあなたの責任です

次の関数が正しく処理できるように、各組み合わせ関数のリターンタイプを知ることはプログラマの責任であることを覚えておくことが重要です。厳格なタイプチェックを実行する純粋な機能プログラミング言語とは異なり、JavaScriptは、不適切なタイプの値を返す機能を結合しようとすることを妨げません。合格数値に限定されませんが、同じ変数タイプをある関数から次の型に維持することさえしません。ただし、組み合わせている関数が、以前の関数によって返される値を処理する準備ができていることを確認する責任があります。

視聴者を検討してください

他の人は将来コードを使用または変更する必要があることを常に覚えておいてください。従来のJavaScriptコードで組み合わせを使用することは、機能的なプログラミングパラダイムに精通していない人にとっては複雑になる可能性があります。目標は、コードを読み取り、維持しやすく、よりシンプルになり、維持することです。ただし、ES2015構文の出現により、特別な組み合わせ方法を必要とせずに矢印関数を使用して単一ラインコールとして単純な組み合わせ関数を作成することも可能です。

function addOne(x) {
  return x + 1;
}
function timesTwo(x) {
  return x * 2;
}
console.log(addOne(timesTwo(3))); //7
console.log(timesTwo(addOne(3))); //8

今日から組み合わせて始めましょう

すべての機能的なプログラミング手法と同様に、組み合わせた機能は純粋な機能である必要があることを覚えておくことが重要です。要するに、これは、特定の値が関数に渡されるたびに、関数が同じ結果を返す必要があり、関数に独自の外部値を変更する副作用がないことを意味します。組み合わせのネストは、データに適用する関連機能のセットがある場合、非常に便利です。その関数のコンポーネントを再利用可能で簡単に組み合わせることができます。すべての機能的なプログラミング手法と同様に、既存のコードに組み合わせを追加して、慎重に慣れることをお勧めします。正しく行うと、結果はクリーンで乾燥し、コードを読みやすくなります。これは私たち全員が欲しいものではありませんか?

(以下はFAQであり、元のテキストに従って調整および合理化されており、複製情報は回避されます) 関数の組み合わせと保守可能なコードについてよく尋ねる質問

    プログラミングにおける機能の組み合わせは何ですか?
  • 関数の組み合わせは、単純な関数をより複雑な関数に組み合わせるという概念です。構成要素のように、これらの小さな再利用可能な機能を使用して複雑で強力な機能を作成できます。これにより、コードをより読みやすく、メンテナンスしやすく、よりスケーラブルにすることができます。

  • 関数の組み合わせは、保守可能なコードをどのように促進しますか?
  • 関数の組み合わせは、小さな再利用可能な機能の使用を促進することにより、保守性を促進します。これらの機能は、理解、テスト、デバッグが簡単です。これらの小さな関数を組み合わせてより複雑な関数を作成すると、発生する可能性のある問題を特定して修正する方が簡単です。また、このモジュール式アプローチにより、システム全体に影響を与えることなく、コードの特定の部分を簡単に更新または変更できます。

  • 保守可能なコードを作成するためのベストプラクティスは何ですか?
  • メンテナブルコードには、次のような多くのベストプラクティスが含まれます構造。

  • 関数の組み合わせと機能プログラミングの関係は何ですか?
  • 関数の組み合わせは、機能プログラミングの基本概念です。関数プログラミングは、計算を数学機能の評価として扱い、変化する状態と変動データを回避する例です。このパラダイムでは、関数の組み合わせは、より単純な機能からより複雑な関数を構築する上で重要な役割を果たし、それによりコードの再利用性と保守性を改善します。

  • 関数の組み合わせを実装することの課題は何ですか? 関数の組み合わせには多くの利点がありますが、課題をもたらすこともできます。 1つの課題は、適切に管理されていない場合、特に複数の関数を組み合わせる場合、コードを読みにくくすることができるということです。複合関数のチェーンでのエラーと例外の処理も難しい場合があります。ただし、これらの課題は、優れたコーディングプラクティスと機能の組み合わせの正しい使用によって軽減できます。

  • 関数の組み合わせでコードテストを改善する方法は? 関数の組み合わせにより、コードテストがより簡単かつ効率的になります。結合された関数は小さく独立した関数で構成されているため、各小さな関数を個別にテストできます。これにより、バグを分離して修正しやすくなります。また、ソフトウェアの各部分が個別にテストされて、適切に機能することを確認するために、単体テストの実践を容易にします。

以上が関数構成:保守可能なコードの構成要素の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
CおよびJavaScript:接続が説明しましたCおよびJavaScript:接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1)CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2)ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで:JavaScriptの多様なアプリケーションWebサイトからアプリまで:JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1)Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2)ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3)電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4)node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript:ユースケースとアプリケーションと比較されますPython vs. JavaScript:ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1)cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2)Cは、Bytecodeの生成と実行を担当します。 3)Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

JavaScript in Action:実際の例とプロジェクトJavaScript in Action:実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1)DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2)node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb:コア機能とユースケースJavaScriptとWeb:コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解:実装の詳細JavaScriptエンジンの理解:実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript:学習曲線と使いやすさPython vs. JavaScript:学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!