Javascriptの超入門編28--関数型プログラミング

関数型プログラミング（Arryオブジェクト）

【開発環境】
OS；Window10
Webブラウザ：Google　Chrome
テキストエディタ：Brackets

【関数型プログラミング】
関数型プログラミングとは、解決しようとする問題に対し、その問題の性質を関数の組み合わせで記述するプログラミング手法のことで、今注目を浴びている。
Javascriptには、関数型プログラミングに、最適なArryメソッドが有る。

新たな配列newArrayを作成する場合

Arrayオブジェクトのfilter()メソッドで行う場合


◆配列の要素を絞り込む
filter()メソッドを使用して、配列の要素を絞り込んで、新たな配列を生成出来る。
filter()メソッドの引数には、要素の値を1つずつ調べて、抽出したい要素の場合にtrueを返すコールバック関数を指定します

・サンプルプログラム「filter1.html」
＜!DOCTYPE html＞
＜html lang="ja"＞

＜head＞
＜meta charset="utf-8"＞
＜title＞JavaScriptのテスト＜/title＞
＜/head＞

＜body＞
＜script＞
var myArray = ["test.html", "sample.txt", "index.html",
　　　　 "on.js", "news.html", "opening.txt",
　　　　 "catalog.html", "ending.rb"];

//コールバック関数
　function endsWithHTML(ele) {
return ele.endsWith(".html");←拡張子が「.html」で有るものにtrueを返す
　}

　//変数newArrayに対してendsWithHTML()関数を引数にfilter()メソッドを実行して、拡張子が「.html」の要素の配列を生成し、変数newArrayに代入
　var newArray = myArray.filter(endsWithHTML);

　console.log(newArray);
＜/script＞
＜/body＞

＜/html＞
・起動結果


◆コールバック関数を無名関数にする
・サンプルプログラム
省略
＜body＞
＜script＞
var myArray = ["test.html", "sample.txt", "index.html", "on.js", "news.html", "opening.txt", "catalog.html", "ending.rb"];
//無名関数
var newArray = myArray.filter(function (ele) {
return ele.endsWith(".html");
});

console.log(newArray);
＜/script＞
省略
・起動結果
上記を同じ

◆要素の重複を削除する

・サンプルプログラム「filter3.html」
～省略
＜body＞
＜script＞
　var colors = ["赤", "白", "青", "青", "紫", "赤", "白", "黒", "緑", "白"]

　var newColors = colors.filter(function(ele, i) {
　　　//indexOf()メソッドは引数で指定した要素が最初に見つかったインデックスを戻す。
　　　//そのため、下記の処理は処理している要素のインデックスが引数iと等しければ、trueを返し、
　　　//そうでなければ、引数iと異なる為、falseを返す
return colors.indexOf(ele) == i;
　});

console.log(newColors);
＜/script＞
＜/body＞
～省略

表示結果

◆配列の要素に処理を行って新たな配列を返す
Arrayオブジェクトのmap()メソッドは、配列のそれぞれの要素にコールバック関数で指定した処理を行って、新たな配列として返すメソッド。

・サンプルプログラム「map1.html」
省略
＜body＞
＜script＞
//配列
var myArray = ["test.html", "sample.txt", "index.html",
　　　"on.js", "news.html", "opening.txt", 　"catalog.html", "ending.rb"];

//コールバック関数
　var newArray = myArray.map(function (ele) {
return ele.split(".")[0];
　　});
→(".")は「index.html」を「index」と「html」に分ける為、[0]はファイル名だけを取り出す指示。

//コンソール表示
　console.log(newArray);

＜/script＞
＜/body＞
＜/html＞
実行結果


◆filter()メソッドとmap()メソッドを連続して実行
省略
＜body＞
＜script＞
var myArray = ["test.html", "sample.txt", "index.html", 　　　 "on.js", "news.html", "opening.txt",
　　　 "catalog.html", "ending.rb"];

var newArray = myArray.filter(function (ele) {
return ele.endsWith(".html");拡張子選択

}).map(function (ele) {
return ele.split(".")[0];ファイル名の取り出し
});

console.log(newArray);
＜/script＞
＜/body＞

実行表示


◆配列の要素を順に処理する
・サンプルプログラム「forEach1.html」
＜body＞
＜script＞
var days = ["日", "月", "火", "水", "木", "金", "土"];

days.forEach(function (ele, i) {
console.log(i + 1, ele + "曜日");
});
＜/script＞
＜/body＞
実行表示