ホームページ >ウェブフロントエンド >jsチュートリアル >カリー化: JavaScript のモジュール式スーパーパワーを解き放つ
自分のコードを見て、「おお、これは私の靴下の引き出しと同じくらい整理されているな」と思ったことはありませんか?そう、あなたは一人ではありません。 JavaScript にはさまざまな特徴や魅力があるにもかかわらず、扱いにくくなることがあります。カリー化を導入してください。これは、コードをモジュール化して再利用可能にし、敢えて言えばエレガントにする関数型プログラミングの魔法のテクニックです。これが魔法のように聞こえる場合は、バックルを締めてください。いよいよ本題に入ります。
カリー化というとキッチンでやっているように聞こえますが、JavaScript では、複数の引数を持つ関数を、それぞれが 1 つの引数を取る一連の関数に変換する技術です。複雑なレシピを一口サイズの手順に分解すると考えてください。
これは簡単な例です:
function multiply(a: number, b: number) { return a * b; }
クールですね?ただし、この関数では両方の引数を事前に要求します。両方にコミットする準備ができていない場合 (実際は誰ですか?)、カリー化を使用すると、代わりに次のように呼び出すことができます:
const curriedMultiply = (a: number) => (b: number) => a * b; // Create reusable specialized functions const double = curriedMultiply(2); const triple = curriedMultiply(3); console.log(double(4)); // Output: 8 console.log(triple(4)); // Output: 12
ドーン!これで、サンドイッチを組み立てるように、一度に 1 つの引数を渡すことができます。簡単なカリー化された関数を見てきたので、次は手順ごとに構築する方法を学びましょう。
複数引数関数から開始します
いくつかの引数を取る関数があると想像してください:
function add(a: number, b: number, c: number) { return a + b + c; }
重ねて包みます
それを一連の関数に変換します。
const curriedAdd = (a: number) => (b: number) => (c: number) => a + b + c;
引数を一度に 1 つずつ渡す
各レイヤーを一度に 1 つずつ呼び出します:
const step1 = curriedAdd(2); // Fixes the first argument (a = 2) const step2 = step1(3); // Fixes the second argument (b = 3) const result = step2(4); // Fixes the third argument (c = 4) console.log(result); // Output: 9
柔軟性から利益を得る
これで、コードをよりモジュール化する、再利用可能な小さなステップができました。
カレーというと高級そうに聞こえるかもしれませんが、現実世界でもメリットがあります:
読みやすさがなぜ重要なのかを少し思い出してみましょう。コードはマシンのために書かれただけではありません。マシンはあなたが投げたものをすべて理解します。これは人間、あなたの同僚、将来の自分、そして次に変更する必要がある人 を対象に書かれています。優れたコードは、理解しやすく、テストし、変更しやすいことを目指す必要があります。カリー化は、ロジックを一目で理解できる小さく明確な部分に分割することでこれを達成するのに役立ちます。
オブジェクトのリストをフィルタリングしているとしましょう:
function multiply(a: number, b: number) { return a * b; }
または税金の計算:
const curriedMultiply = (a: number) => (b: number) => a * b; // Create reusable specialized functions const double = curriedMultiply(2); const triple = curriedMultiply(3); console.log(double(4)); // Output: 8 console.log(triple(4)); // Output: 12
各関数は 1 つのことを実行するため、コードが読みやすく、理解しやすく、テストしやすくなります。カリー化により、より小さく特殊な関数を作成することで、複雑なロジックがシンプルになり、再利用可能になり、後で作業する人間にとって保守しやすくなります。
これらのネストされた関数をすべて手動で入力しますか?結構です。カリー化を自動化しましょう:
function add(a: number, b: number, c: number) { return a + b + c; }
その仕組みは次のとおりです:
例:
const curriedAdd = (a: number) => (b: number) => (c: number) => a + b + c;
これは議論のための自動販売機のようなものです。一度に 1 つずつ、または一度にすべてを入力します。
TypeScript のタイプ セーフティを使用してカリー化を次のレベルに引き上げます:
const step1 = curriedAdd(2); // Fixes the first argument (a = 2) const step2 = step1(3); // Fixes the second argument (b = 3) const result = step2(4); // Fixes the third argument (c = 4) console.log(result); // Output: 9
TypeScript を使用した例:
const filterByKey = (key: string) => (value: any) => (data: any[]) => data.filter((item) => item[key] === value); // Create a reusable filter for colors const filterByColor = filterByKey("color"); const redItems = filterByColor("red"); console.log(redItems([{ color: "red" }, { color: "blue" }])); // Output: [{ color: "red" }]
IDE がすべてのステップをガイドします。
カリー化された関数は、元の this コンテキストを失います。カリー化を伴うクラスのメソッドを使用する必要がある場合は、.bind(this) またはアロー関数を使用します。
カリー化は、チートコードを使用してコーディング ゲームをアップグレードするようなものです。関数を小さく管理しやすい部分に分割することで、柔軟性、読みやすさ、達成感が得られます (または、少なくともデバッグの悩みが軽減されます)。自動化する場合でも、手動で作成する場合でも、カリー化によってコードがクリーンなモジュール式の強力なコードに変わります。
ハスケル・カリー (名前の背後にいる男) はこう言ったかもしれません:
「書く量を減らして、議論を一度に 1 つずつ増やしてください。」
以上がカリー化: JavaScript のモジュール式スーパーパワーを解き放つの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。