関数型プログラミング手法を使用して美しい JavaScript_ibm_javascript を作成するためのヒント

関数型プログラミングではプログラムを編成する全く異なる方法が使用されるため、命令型パラダイムに慣れているプログラマーは関数型プログラミングを学習するのが少し難しいと感じるかもしれません。この記事では、関数型スタイルを使用して JavaScript で優れた美しいコードを記述する方法の例をいくつか学びます。

匿名関数、関数を呼び出すさまざまな方法、関数を引数として他の関数に渡す方法など、関数型プログラミングの概念について説明します。

関数の概念の適用例には、拡張された配列の並べ替え、一連の関数の動的 HTML アプリケーションによって生成された美しいコードなどが含まれます。
関数型プログラミングの概念

皆さんに教えてください。これを送信してください:


Digg

Slashdot



「方法」を記述することで問題の解決策を指定する言語, 多くの開発者はコーディングの方法を知っています。たとえば、階乗を計算する関数を作成するには、プログラムを記述するループを作成したり、再帰を使用してすべての数値の積を求めることができます。どちらの場合も、計算プロセスはプログラム内に詳細に記述されています。リスト 1 は、階乗を計算するための可能な C コードを示しています。


リスト 1. 手続き型階乗

int階乗 (int n)
{
if (n return 1; else
return n *階乗 (n-1);
}



このタイプの言語は、問題を解決するプロセスを定義するため、手続き型プログラミング言語とも呼ばれます。関数型プログラミングはこの原則とは大きく異なります。関数型プログラミングでは、問題が「何であるか」を説明する必要があります。関数型プログラミング言語は宣言型言語とも呼ばれます。階乗を計算するための同じプログラムは、 n までのすべての数値の積として作成できます。階乗を計算するための典型的な関数プログラムは、リスト 2 の例のようになります。


リスト 2. 関数型階乗

階乗 n (n 階乗 n :=foldr * 1 take n [1.. ]


2 番目のステートメントは、1 から始まる最初の n 個の数値のリストを取得し (n [1..] を取得)、その積を求めるように指定します。1 が基本人民元です。この定義は、ループや再帰がないという点で前の例とは異なります。これは階乗関数の算術定義のようなものです。ライブラリ関数 (take とfoldr) と表記法 (リスト表記法 [ ]) の意味を理解すると、コードを書くのは簡単で非常に読みやすくなります。

わずか 3 行の Miranda コードで、パラメータに応じて幅優先または深さ優先のトラバーサルを使用して n 分木の各ノードを処理するルーチンを作成できます。要素は次のようになります。あらゆる一般的なタイプ。

歴史的に、関数型プログラミング言語はさまざまな理由からあまり人気がありませんでした。しかし最近、いくつかの関数型プログラミング言語がコンピューター業界に進出しつつあります。一例として、.NET プラットフォーム上の Haskell があります。既存の言語が関数型プログラミング言語から概念を借用する場合もあります。一部の C 実装の反復子と継続、および JavaScript で提供されるいくつかの関数構造は、この借用の例です。ただし、関数構造を借用しても、言語プログラミングのパラダイム全体は変わりません。 JavaScript は、関数型の構成要素を追加しただけで関数型プログラミング言語になったわけではありません。

これからは、JavaScript の関数構造のさまざまな利点と、それらを日常のコーディングや作業で使用する方法について説明します。まずは基本的な機能から始めて、それを使った興味深いアプリケーションをいくつか見ていきます。

匿名関数

JavaScript では、匿名関数または名前のない関数を作成できます。なぜそのような機能が必要なのでしょうか?読み進めてください。まず最初に、このような関数の書き方を学びます。次の JavaScript 関数があるとします。
リスト 3. 典型的な関数

function sum(x,y,z) {
return (x y z)
}




対応する匿名関数は次のようになります。
リスト 4. 匿名関数

function(x,y,z) {
return (x y z) ;
}




これを使用するには、次のコードを記述する必要があります。


リスト 5. 匿名関数の適用

var sum = function(x,y,z) {
return (x y z)
}(1,2,3);


関数を値として使用する

関数を値として使用することもできます。割り当てられた値が関数である変数を持つこともできます。最後の例では、次のことも実行できます。
リスト 6. 関数割り当ての使用

var sum = function(x,y,z) {
return (xy z);上記のリスト 6 の例では、変数 sum に割り当てられた値が関数定義です。自体。このようにして、sum は関数になり、どこからでも呼び出すことができます。

関数を呼び出すさまざまな方法

JavaScript では、リスト 7 と 8 に示すように 2 つの方法で関数を呼び出すことができます。


リスト 7. 典型的な関数アプリケーション

alert ("Hello, World!");



または


リスト 8. 関数を式として使用する

(alert) ("Hello, World!");



したがって、次のコードを記述することもできます。 🎜>

リスト 9. 関数を定義したら、すぐに使用できます

( function(x,y,z) { return (xy z) } ) (1, 2, 3) ;



関数式を括弧内に記述し、それをパラメータに渡してパラメータに対する操作を実行できます。リスト 8 の例では関数名がかっこで直接囲まれていますが、リスト 9 に示すように使用する場合はこの限りではありません。

関数を引数として他の関数に渡す

関数を引数として他の関数に渡すこともできます。これは新しい概念ではありませんが、次の例で広く使用されています。リスト 10 に示すように、関数パラメーターを渡すことができます。


リスト 10. 関数をパラメーターとして渡し、関数を適用する

var passFunAndApply = function (fn,x,y,z) { return fn(x,y,z) ); };

var sum = function(x,y,z) {
return x y z>}; ) ); // 12



最後のアラート ステートメントを実行すると、サイズ 12 の値が出力されます。

関数型概念の使用

前のセクションでは、関数型スタイルを使用したプログラミング概念をいくつか紹介しました。示されている例はすべてを網羅しているわけではなく、重要な順に並べられているわけでもありません。これらは、この議論に関連するほんの一部です。以下は JavaScript の関数スタイルの簡単な要約です:

関数には必ずしも名前が必要なわけではありません。
関数は、他の値と同様に変数に割り当てることができます。
関数式を記述し、後で適用するために括弧内に置くことができます。
関数はパラメータとして他の関数に渡すことができます。

このセクションでは、これらの概念を効果的に使用して美しい JavaScript コードを作成する例をいくつか紹介します。 (JavaScript の関数型スタイルを使用すると、この説明の範囲を超えて多くのことを行うことができます。)

拡張配列ソート
まず、配列要素の日付に従ってデータをソートできるソート メソッドを作成しましょう。 。このメソッドを JavaScript で記述するのは非常に簡単です。データ オブジェクトの並べ替えメソッドは、比較関数であるオプションのパラメーターを受け入れます。ここでは、リスト 11 の比較関数を使用する必要があります。

リスト 11. 比較関数

function (x,y) {
return x.date – y.date
}




必要な関数を取得するには、リスト 12 の例を使用します。


リスト 12. sort 関数の拡張

arr.sort( function (x,y) { return x.date – y.date; }); >

ここで、arr は型配列オブジェクトです。 sort 関数は、arr 配列内のすべてのオブジェクトを日付に基づいて並べ替えます。比較関数はその定義とともに並べ替え関数に渡され、並べ替え操作が完了します。次の関数を使用します:

すべての JavaScript オブジェクトには date プロパティがあります。
JavaScript の配列型ソート関数はオプションのパラメーターを受け入れます。オプションのパラメーターはソートに使用される比較関数です。これは、C ライブラリの qsort 関数に似ています。

HTML を動的に生成する美しいコード
この例では、配列から HTML を動的に生成する美しいコードを記述する方法を示します。データから取得した値に基づいてテーブルを生成できます。あるいは、配列の内容を使用して、並べ替えられたリストと並べ替えられていないリストを生成することもできます。垂直または水平のメニュー項目も生成できます。
リスト 13 のコード スタイルは、配列から動的 HTML を生成するためによく使用されます。


リスト 13. 動的 HTML を生成する通常のコード

var str=' ';
for (var i=0;i var element=arr[i];
str =... HTML 生成コード...
}
document.write(str);


このコードをリスト 14 のコードに置き換えることができます。


リスト 14. 動的 HTML を生成する一般的な方法

Array.prototype.fold=function(templateFn) {
var len=this.length
var str; =' ';
for (var i=0; i str =templateFn(this[i]);
関数templateInstance(element) {
return ... HTML 生成コード ...
}
document.write(arr.fold(templateInstance));



新しい関数foldを定義するためにArray型のprototype属性を使用します。この関数は、後で定義された任意の配列で使用できるようになりました。

一連の関数のアプリケーション
次の状況を考えてみましょう: 一連の関数をコールバック関数として使用したいとします。これを実現するには、2 つのパラメータを取る window.setTimeout 関数が使用されます。最初のパラメータは、2 番目のパラメータで指定されたミリ秒後に呼び出される関数です。リスト 15 は、これを実現する 1 つの方法を示しています。
リスト 15. コールバックで一連の関数を呼び出す

window.setTimeout(function(){alert('First!');alert('Second!');},


リスト 16 は、これを行うためのより良い方法を示しています。


リスト 16. 一連の関数を呼び出すより良い方法

Function.prototype.sequence=function(g) {
var f=this> return;関数 () {
f();g();
}
};
関数 alterFrst() { アラート('最初!') }
関数アラートSec(); ( 'Second!'); }
setTimeout(alertFrst.sequence(alertSec), 5000);



イベントを呼び出した後に別のコールバックを呼び出す場合リスト 16 のコードを使用してコールバックを拡張することもできます。興味が湧いたら、これは自分で実行できる演習かもしれません。






トップに戻る




結論

多くの分野であなたはJavaScript の関数型プログラミングを使用して、日常のアクティビティを美しい方法で完了できます。この記事の例は、ほんのいくつかのシナリオを示しています。関数型プログラミングの適切なコンテキストを見つけてその概念を適用すると、理解が深まり、洗練さが増します。

からの詳細