【Javascript + jQuery】ユーティリティ関数

【Javascript + jQuery】
ユーティリティ関数

「jQuery」のユーティリティ関数は、便利な関数をまとめたもので、
「jQuery」オブジェクトのメソッドとは異なる。
「jQuery」のオブジェクトメソッドは、
オブジェクト（DOM要素など）に作用するメソッドだが、
ユーティリティ関数は、作用する対象は関係なく、
便利に使える関数。

書式も、

$.ユーティリティ関数名()
jQuery.ユーティリティ関数名()

という書式。
「jQuery」オブジェクトのメソッドの書式は、

$(selector).メソッド名()

という指定されてた要素にくっついた書式となる。

独自のユーティリティ関数を作成することもできる。

$.sum = function( a, b) {
return a + b;
}

$.extend({ sum: function( a, b) {
return a + b;
}
});

(function ($) {
$.sum = function( a, b) {
return a + b;
}
}(jQuery));

var ans = $.sum( 2, 3);

ユーティリティ関数の種類

ユーティリティ関数	説明
$.each()	配列の値１つずつに、引数で指定した関数を実行する関数
$.map()	配列の値１つずつに、引数で指定した関数を実行する関数
$.grep()	配列の中から条件にあった値だけの配列を作成し返す関数
$.merge()	指定した配列を１つの配列に結合して返す関数
$.extend()	２つ以上のオブジェクトを引数で指定し連結して返す関数
$.inArray()	配列内に特定の値があるか確認する関数
$.makeArray()	配列のようなオブジェクトから配列を作成して返す関数
$.parseJSON()	引数に指定した「JSON」形式の文字列を「Javascript」のオブジェクトに変換して返す関数

Back

ユーティリティ関数「.each()」の使い方

「jQuery」の関数「.each()」は、
配列の値すべてに、処理を実行するための関数。
同じ用途に「map()」関数もある。
使い方もほぼ同じ。

$.each(配列, function(キーを格納する変数名, 値を格納する変数名){
実行するプログラム
console. log( "配列キー : " + キーを格納する変数名 + "<br>");
console. log( "配列の値 : " + 値を格納する変数名 + "<br>");
})

第一引数に指定した配列を、
第二引数で指定した関数で処理する。
処理の方法は、
関数の第一引数に「配列のキーを格納する変数」
関数の第二引数に「配列の値を格納する変数」
を指定して、
その後、
関数の実行プログラムに、その引数の値を使用して処理を記述する。

「jQuery」の関数「.each()」の書式

$.each()
jQuery.each()
$.each( array, function (index, value))
$.each( object, function (name, value))

$.each(配列, function(キーを格納する変数名, 値を格納する変数名))

「this」＝指定配列の値（第二引数部分）

// 配列の場合
var names = ["一郎", "二郎", "三郎"];
$.each( names, function (i, val) {
console. log( i + ": " + val);
});

// オブジェクトの場合
var person = {
name: "一郎",
age: "28",
gender: "男性"
};
$.each( person, function (n, val) {
console. log( n + ": " + val);
});

for (n in person) {
console. log( n + ": " + person[n]);
}

Back