jQuery Logo ユーティリティ関数

作成日：2015年8月27日

jQuery には、DOM 要素や jQuery オブジェクトの操作の他に、純粋な配列の操作などができるユーティリティ関数があります。

JavaScriptのオブジェクトと配列の操作

ユーティリティ関数として実装されている jQuery 機能の大部分は、DOM 要素以外の JavaScript オブジェクトを操作するために設計されています。一般に、 DOM 要素を対象として設計された関数は、jQuery ラッパーメソッドとして提供されています。

プロパティや配列の反復処理　 $.each()

JavaScript には反復処理を行う手段（forループと for inループ）がありますが、DOM 要素のラップ集合なら、jQuery が each() メソッドを定義していて簡単に反復処理ができます。

一般の配列やオブジェクトについても、jQuery は同様なユーティリティ関数 $.each() を提供しています。 この関数は、配列の要素でもオブジェクトのプロパティでも、同じ構文を使って反復処理することができます。

$.each(container,callback)

パラメータ/戻り値

container（Array|Object）
配列またはオブジェクトを指定します。前者なら配列の要素が、後者ならオブジェクトのプロパティが反復処理されます。
callback（Function）
コンテナの各要素について呼び出される（イテレータ）関数。コンテナ（container）が配列であれば、コールバックは配列の要素ごとに呼び出されます。コンテナがオブジェクトであれば、コールバックはオブジェクトのプロパティごとに呼び出されます。
コールバックへの第1のパラメータは、 配列要素のインデックスか、オブジェクトプロパティの名前（ハッシュキー）になります。第2のパラメータは、配列要素かプロパティの値になります。 呼び出し時の関数コンテクスト（this）にも、第2パラメータと同じ値がセットされます。
戻り値
コンテナオブジェクト

配列またはオブジェクトを反復処理するときに、ループから抜け出るには、イテレータ関数から falseを返します。

配列を反復処理するには each() メソッドも利用できますが、$.each() 関数のほうがわずかに性能が良いです。但し、その程度の性能差が気になるなら、むしろ for ループを使ったほうがより良い性能が得られます。

var anArray = [1, 2, 3];
var anObject = {name:"John", id:1387, age: 55};
 
// 配列
$.each(anArray, function(i, value){
    console.log("i: " + i, "value: " + value); 
});

//i: 0, value: 1
//i: 1, value: 2
//i: 2, value: 3
 
// オブジェクト
$.each(anObject, function(key, value){
    console.log("key: " + key, "value: " + value); 
});
//コンソールへの出力
//key: name, value: John
//key: id, value: 1387
//key: age, value: 55

for ループを使った場合の例。

// 配列
for(var i=0; i<anArray.length; i++) {
  console.log("i: " + i + ", value: " + anArray[i]); 
}

// オブジェクト
for(var key in anObject){
  console.log("key: " + key + ", value: " + anObject[key])
}

配列のフィルタリング $.grep()

$.grep() 関数を使うと、配列を走査して基準にマッチする（条件に適合する）要素を探すようなフィルタリング処理ができます 。

$.grep(array,callback,invert)

渡された配列を走査し、それぞれの要素についてコールバック関数を呼び出します。コールバック関数の戻り値（真偽値）によって、データを収集するか否かが決まります。もし、invert パラメータが省略されるか false なら、コールバック関数が true を返したときにデータを収集し、invert パラメータが true なら、 コールバック関数が false を返したときにデータを収集します。元の配列は変更されません。

パラメータ/戻り値

array（Array）
走査対象の配列を指定します。これを走査して収集処理を行いますが、それによって変更されることはありません。
callback（Function）
戻り値で現在のデータを収集するかどうかが決まるコールバック関数を指定します。戻り値が trueならば、現在の値が 収集されます。コールバック関数に渡されるパラメータは、現在のデータ値と、その値の元の配列におけるインデックスの２つです。
invert（Boolean）
もし trueと指定されたら、論理が逆転する。
戻り値
収集した値の配列

ある配列にフィルタをかけて、1000より大きい全ての値を収集したい場合は、以下のように記述します。

var originalArray = [29, 300, 5908, 1200, 379];
var largeNumbers = $.grep(originalArray, function(value){
 return value > 1000 ; });
console.log(largeNumbers);

//出力　 [5908, 1200]

以下のサンプルは、値の配列から Zip コードの正規パターンにマッチしない値を取得します。

Zipコードは5桁の10進数と、もしあればそれに続くオプション （ダッシュとそれに続く4桁の10進数）で構成されるので、この正規表現パターンは、/^\d{5}(-\d{4})?$/ と書くことができます。

var zipsArray = ["10111", "12345-6789", "2987", "1003-1234"];
var badZips = $.grep(
  zipsArray,
  function(value){
    return value.match(/^\d{5}(-\d{4})?$/) != null;
},true);
console.log(badZips);
//["2987", "1003-1234"]

上記のサンプルでは、String クラスの match() メソッドを使用して、値がパターンにマッチしているかを調べています。match() メソッドはマッチしなければ null を返します。

このサンプルでは、マッチしている場合を調べて、invert パラメータに true を指定することで、パターンにマッチしていない値を配列に入れるようにしています。

上記は以下と同じことです。マッチしていない場合を調べてそれを配列に入れています。invert パラメータはこの場合、指定しません。

var zipsArray = ["10111", "12345-6789", "2987", "1003-1234"];
var badZips = $.grep(
  zipsArray,
  function(value){
    return value.match(/^\d{5}(-\d{4})?$/) == null;
});
console.log(badZips);
//["2987", "1003-1234"]

配列の変換 $.map()

$.map() を使うと、値の集合を別のフォーマットの値の集合へと変換することができます。ある配列からもう１つの配列を作るような処理が簡単にできます。

$.map(array,callback)

渡された配列を反復処理して個々の要素についてコールバック関数を呼び出し、その戻り値を収集することによって新しい配列を作ります。

パラメータ/戻り値

array（Array）
指定された配列の値から変換した値を新しい配列に収集します。
callback（Function）
$.map 関数が結果として返す新しい配列に収集すべき値を返す関数。この関数には、現在のデータの値と、元の配列でのインデックスという２つのパラメータが渡されます。もしコールバック関数が null か undefined を返したら、その結果は収集されません。
戻り値
収集した値の配列

以下は、0を基数とするインデックスの配列を、1を基数とするインデックスの配列に変換するサンプルです。

var oneBased = $.map([0,1,2,3], function(value){return value + 1;});

以下は、数値を表現しているはずであろうフォームのテキストフィールドから収集した値を、数値以外の無効な文字が入っていないかを調べて、数値に変換可能な値を収集するサンプルです。

var strings = ["17", "33", "52", "s4", "66"];
var values = $.map(strings, function(value){
  var result = new Number(value);
  return isNaN(result) ? null : result;
});
alert(values); //17, 33, 52, 66

それぞれの値を new コンストラクタで数値に変換して変数 result に格納しています。もし文字列から数値への変換に失敗したら、返される値は定数の Number.NaN になります。

isNaN(result) で値が数値かどうかを調べて、数値でなければ null を返すことで結果として作られる配列には数値だけが含まれるようにしています。

ここで大切なのは、もしコールバック関数が null か undefined を返したら、その結果は収集されないということです。その場合、結果として得られる配列は 元の配列より短くなり、要素の順番による1対1の対応は失われることになります。

値が間違いであっても全部の値を収集したい場合は、数値以外の値については Number.NaN を返すようにします。

var strings = ["17", "33", "52", "s4", "66"];
var values = $.map(strings, function(value){
  var result = new Number(value);
  return result;
});
alert(values); //17, 33, 52, NaN, 66

また、$.map() はコールバック関数が配列を返すときも、その戻り値を結果の配列にマージしてくれるという便利な特徴があります。

以下は、文字列の配列を、個々の文字の配列に変換するサンプルです。

var characters = $.map(
  ['what', 'Jazz', 'music'], 
  function(value){ return value.split(''); }
); 
console.log(characters);
// ["w", "h", "a", "t", "J", "a", "z", "z", "m", "u", "s", "i", "c"]

split() メソッドは指定された引数を区切り文字として使用し、文字列を分割します。　デリミタに空白文字が渡されたら、文字列を構成する文字の配列を返します。

インデックスを返す $.inArray()

JavaScript 配列で指定された値を検索し、配列内でのインデックス番号を返します。

$.inArray(value,array)

渡された値が、配列で最初に現れる場所をインデックスで返します。値が配列に存在しない場合は、-1 を返します。

パラメータ/戻り値

value（Object）　
配列から探す値。
array（Array）　
探索対象の配列。
戻り値
配列の中で値が最初に現れた位置を示すインデックス。もし見つかれなければ -1 を返す。
var index = $.inArray("jazz", ["Java", "jazz", "JavaScript"]);  //1

JavaScript 配列に変換 $.makeArray()

NodeList などの「配列のようなオブジェクト」をJavaScript配列に変換します。

$.makeArray(object)

渡された「配列のようなオブジェクト」や jQuery のラップ集合を JavaScript 配列に変換します。$.makeArray() メソッドで配列に変換することで、配列にしか利用できない javaScript の pop メソッドや reverse メソッド等を利用できるようになります。

パラメータ/戻り値

object（Object）
変換元の配列のようなオブジェクト（NodeList など）。
戻り値
変換の結果である JavaScript 配列。

以下は、NodeList を JavaScript の配列に変換して、JavaScript の配列のメソッドを使用する例です。

<div id="jqs-1">
  <div class="inner">
    <div class="makeArray">First</div>
    <div class="makeArray">Second</div>
    <div class="makeArray">Third</div>
    <div class="makeArray">Fourth</div>
  </div>
  <button>Do it</button>
</div>

document.getElementsByClassName("makeArray") で NodeList を取得して変数 elems に格納します。

$.makeArray( elems ) で NodeList を JavaScript の配列に変換して、変数 arr に格納ます。

配列のメソッド reverse() を使用して、順序を入れ替えます。

arr はJavaScript の配列なので $() で jQuery に変換して appendTo() メソッドを使用します。

$("#jqs-1 button").click(function() {
  // NodeList を変数に格納
  var elems = document.getElementsByClassName("makeArray");
  // NodeList を配列に変換
  var arr = $.makeArray( elems );
  // 配列のメソッドを使用して、順序を入れ替え
  arr.reverse();
  //jQuery に変換して appendTo()を使用
  $( arr ).appendTo("#jqs-1 .inner");
});
First
Second
Third
Fourth

以下は、jQuery のラップ集合を JavaScript の配列に変換して、JavaScript の配列のメソッドを使用する例です。

<div id="jqs-2">
  <div class="inner">
    <div>First</div>
    <div>Second</div>
    <div>Third</div>
    <div>Fourth</div>
  </div>
  <button>Do it</button>
</div>

div 要素のラップ集合を $.makeArray() で JavaScript の配列に変換します。

配列のメソッド reverse() を使用して、順番を入れ替えます。

arr はJavaScript の配列なので $() で jQuery に変換して appendTo() メソッドを使用します。

$("#jqs-2 button").click(function() {
  //ラップ集合を JavaScript の配列に変換
  var arr = $.makeArray($("#jqs-2 div"));
  //配列のメソッド reverse() を使用
  arr.reverse();
  //jQuery に変換して appendTo()を使用
  $( arr ).appendTo("#jqs-2 .inner");
});
First
Second
Third
Fourth

ラップ集合の全要素を DOM 要素の JavaScript 配列に変換するには、toArray() メソッドを使用できるので以下のように記述することができます。

toArray() メソッドの代わりに、get() メソッドでも同じことができますが、配列を取得するには toArray() メソッドの方が好ましいとされています。

$("#jqs-2 button").click(function() {
  //ラップ集合を JavaScript の配列に変換
  var arr = $("#jqs-2 div").toArray();
  //var arr = $("#jqs-2 div").get();
  arr.reverse();
  $( arr ).appendTo("#jqs-2 .inner");
});

重複を除去 $.unique()

$.unique() は、DOM 要素の配列を受け取り、配列中から重複している要素を削除してユニークになったものを返します。

$.unique(array)

DOM 要素の配列を受け取り、元の配列から重複しない要素を集めた配列を返します。このメソッドは DOM 要素の配列に対してのみ機能します（文字列や数値に対しては機能しません）。

パラメータ/戻り値

array（Array）　
処理対象の DOM 要素の配列
戻り値
渡された配列から重複しない要素を集めた、DOM 要素の配列

以下は、重複した DOM 要素の配列中から重複している要素を削除するサンプルです。

<div id="jqs-3" class="jqs_div">
  <p class="foo">Foo </p>
  <p class="bar">Bar</p>
  <p class="foo bar">Foo Bar</p>
  <button>Do it</button>
</div>

クラス属性が foo の要素を DOM 要素の配列に変換して変数 foo に代入します。（２つの要素が格納されます）

クラス属性が bar の要素を DOM 要素の配列に変換して変数 bar に代入します。（２つの要素が格納されます）

javaScript の contact メソッドを利用して、2つの配列を連結して新しい配列「fooBar」を作成します。

そして配列に含まれている要素の数をアラートで表示すると４と表示されます。

$.unique() で重複している要素を削除して、配列に含まれている要素の数をアラートで表示すると３と表示されます。

$("#jqs-3 button").click(function() {
  var foo = $("#jqs-3 .foo").toArray();
  var bar = $("#jqs-3 .bar").toArray();
  var fooBar = foo.concat(bar);
  alert(fooBar.length);  //4
  alert($.unique(fooBar).length);  //3
});

Foo

Bar

Foo Bar

配列の結合 $.merge()

$.merge() は配列を結合します。$.merge() は破壊的メソッドで、第1引数の配列は変更されます。

$.merge(array1,array2)

第2の配列（array2）の値を第1の配列（array1）にマージして、その結果を返します。第1の配列はこの処理により書き換えられ、 それが結果として返されます。

パラメータ/戻り値

array1（Array）
第2の配列がマージされる配列（書き換えられます）。
array2（Array）
第1の配列に値がマージされる配列。
戻り値
第1の配列をマージの結果として変更したもの。

元の配列が必要な場合は、以下のようにして配列のコピーを作成します。

配列は参照型のため、単に変数に代入するだけではコピーしたことにはならないので注意が必要です。

var newArr = $.merge([], originalArr);

以下は、配列を結合（マージ）するサンプルです。

var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = arr1;
var arr1_original =  $.merge([], arr1);  //元の配列をコピー
$.merge(arr1,arr2);  //配列を結合
console.log(arr1);  //[1, 2, 3, 4, 5, 6] 結合された値に変更されている
console.log(arr2);  // [4, 5, 6] 元のまま
console.log(arr3);  // [1, 2, 3, 4, 5, 6] arr1 を参照している
console.log(arr1_original); //[1, 2, 3] 元の配列のコピー

arr1 を上書きしたくない場合は、以下のように空の配列にマージします。

$.merge の戻り値はマージ後の配列なのでそれを変数に代入します。

var arr1 = [1,2,3];
var arr2 = [4,5,6];
var merged_arr = $.merge( $.merge( [], arr1 ), arr2 );
console.log(arr1); //[1, 2, 3]
console.log(arr2);  // [4, 5, 6]
console.log(merged_arr);   // [1, 2, 3, 4, 5, 6]

オブジェクトの拡張 $.extend()

$.extend() は複数のオブジェクトをマージすることで、オブジェクトを拡張します。

$.extend(deep,target,source1,source2,...sourceN)

target として渡されてオブジェクトを、渡されたソースオブジェクトのプロパティで拡張します。

パラメータ/戻り値

deep（Boolean）
オプションのフラグ。深いコピーを作るか、浅いコピーを作るかを決めます。省略すると浅いコピーを行い、true なら深いコピーを行います。（falseを指定することはできません。）
target（Object）
ソースオブジェクト郡のプロパティによって、プロパティを拡張すべきオブジェクト。このオブジェクトは、この関数の値として返される前に、新しいプロパティによって直接更新されます。ソースオブジェクトと同じ名前のプロパティがあれば、ソース側の値によって上書きされます。
source1...sourceN（Object）
target オブジェクトに追加するプロパティを提供する1個以上のオブジェクト。複数のソースを 提供するとき、同じ名前のプロパティがソース側に存在したら、引数リストの後のほうにあるソースプロパティによって、それより前にあったプロパティが上書きされます。
戻り値
拡張された target オブジェクト。

以下はターゲットオブジェクト（target）を２つのソースオブジェクト（source1, source2）で拡張（マージ）する例です。

var target = {a:1, b:2, c:3};
var source1 = {c:4, d:5, e:6};
var source2 = {e:7, f:8, g:9};		
$.extend(target, source1, source2);

console.log(target);  //{a:1, b:2, c:4, d:5, e:7, f:8, g:9}
//c と e の値は上書きされている。

target と source1 はどちらも c というプロパティを含んでいるので、 source1 の c の値が、元の target の値を上書きしています。

source1 と source2 はどちらも e というプロパティを含んでいるので、source1 の値が source2 の値で上書きされています。

同じ名前のプロパティがあると、引数リストで後ろにあるオブジェクトの値で上書きされます。つまり、後ろにあるオブジェクトが優先されます。

もし、target の中身が書き換わってしまうのを避けたい場合は、target に空のオブジェクト {} を指定して、戻り値を新しいオブジェクトに代入します。

var target = {a:1, b:2, c:3};
var source1 = {c:4, d:5, e:6};
var source2 = {e:7, f:8, g:9};
			
var new_obj = $.extend({}, target, source1, source2);
console.log(target);  //{a:1, b:2, c:3}
console.log(new_obj);  //{a:1, b:2, c:4, d:5, e:7, f:8, g:9}

深いコピー/浅いコピー

以下のようにオブジェクトに階層がある場合は、オプションのフラグを指定しないと下の階層のオブジェクトはまるごと置き換えられてしまいます。

var target = {
  apple: 0,
  banana: { weight: 52, price: 100 }
};
var source = {
  banana: { price: 200 },
  orange: 100
};
$.extend(target, source);

console.log(target);
/*{
  apple:0,
  banana: { price: 200 },
  orange: 100
};*/

下の階層の値も再帰的にマージ（深いコピー）したい場合は、第1引数（オプションのフラグ：deep）に true を指定します。

var target = {
  apple: 0,
  banana: { weight: 52, price: 100 }
};
var source = {
  banana: { price: 200 },
  orange: 100
};
$.extend(true, target, source);

console.log(target); 
/*{
  apple=0,
  banana: { weight:52,  price:200},
  orange: 100
};*/
$.extend() で引数の整理

省略可能な引数を持つ関数を定義する場合は、省略された引数に適切なデフォルト値が設定されるようにする必要があります。この時パラメータの数が多い場合では、最後のパラメータのみを指定したい場合など、省略するパラメータ全てに「null」のプレースホルダーを使う必要が生じます。

function show_params(opt1, opt2, opt3, opt4, opt5) {
  opt1 = opt1 || 'default1';
  opt2 = opt2 || 'default2';
  opt3 = opt3 || 'default3';
  opt4 = opt4 || 'default4';
  opt5 = opt5 || 'default5';
  console.log( opt1 + opt2 + opt3 + opt4 + opt5 );  
}
show_params(null, null, null, null, "myparam");
//default1 default2 default3 default4 myparam

このような場合、オプションのパラメータをオブジェクト（オプションハッシュ）で指定するとわかりやすく、またプレースホルダーも不要になり、パラメータの順序も気にする必要はありません。

function show_params(option) {
  opt1 = option.opt1 || 'default1';
  opt2 = option.opt2 || 'default2';
  opt3 = option.opt3 || 'default3';
  opt4 = option.opt4 || 'default4';
  opt5 = option.opt5 || 'default5';
  console.log(opt1 + opt2 + opt3 + opt4 + opt5 );  
} 
show_params({opt5: "myparam5", opt3: "myparam3"});
//default1 default2 myparam3 default4 myparam5

$.extend を利用することでもっとすっきりとすることが可能です。

my_options パラメータで渡した値と、デフォルトの値のオブジェクトをマージすることで、settings 変数は指定した値だけを書き換えたものになります。

また、「 my_options || {} 」により、false と評価される my_options（null や undefined の場合）には、空のオブジェクトが設定されデフォルトのままになります。

function show_params(my_options) {
  var settings = $.extend({
    opt1 : ' default1',  //デフォルトの値のオブジェクト
    opt2 : ' default2',
    opt3 : ' default3',
    opt4 : ' default4',
    opt5 : ' default5'
  }, my_options || {});
  console.log(settings.opt1 + settings.opt2 + settings.opt3 + settings.opt4 + settings.opt5 );  
} 
show_params({opt4: 'myparam4', opt1: 'myparam1' });
//myparam1 default2 default3 myparam4 default5

※関数の中でパラメータを使用するには、settings.opt1 のように settings のプロパティとして指定します。

以下のサンプルにパラメータを入力する際は、{opt2: 'foo', opt3: 'bar'} ようなオブジェクトで指定してください。

show_params( )

上記サンプルの HTML とコードは以下のようになっています。

<div id="jqs-4">
  show_params(<input type="text" name="show_params" size="50" value=""> )
  <button>Apply</button>
  <p class="result"></p>
</div>
$("#jqs-4 button").click(function() {
  var param_text = $("[name='show_params']").val();
  param_text = escape_html(param_text);  //エスケープ処理
  var param_obj = (new Function("return " + param_text))(); //文字列からオブジェクトに変換
  $("#jqs-4 p.result").text(show_params(param_obj));  
});

function show_params(my_options) {
  var settings = $.extend({
    opt1 : 'default1',
    opt2 : 'default2',
    opt3 : 'default3',
    opt4 : 'default4',
    opt5 : 'default5'
  }, my_options || {}); 
  return settings.opt1 + settings.opt2 + settings.opt3 + settings.opt4 + settings.opt5 ;
} 

function escape_html(val) {
  var targets = ["&", "<", ">" ];
  var escapes = ["&amp;", "&lt;", "&gt;"];
  for(var i=0; i<targets.length; i++){ 		 
    val = val.replace(new RegExp(targets[i], 'g'), escapes[i]);
  }	
  return val; 
}

パラメータのシリアライズ $.param()

$.param() は配列やオブジェクトをURLクエリ文字列やAjaxリクエストで使用するのに適したの文字列に変換（シリアライズ）します。

$.param(params,traditional)

渡された情報を、要求を送信するクエリ文字列として使うのに適した文字列に変換（シリアライズ）します。渡される値は、フォーム要素の配列、 jQuery のラップ集合、JavaScript オブジェクトのいずれかになります。クエリ文字列は適切に整形され、文字列に含まれる個々の名前と値は 適切に URI エンコーディングされます。

パラメータ/戻り値

params（Array|jQuery|Object）
クエリ文字列にシリアライズするパラメータ。もし要素の配列か、jQuery のラップ集合が 渡されたら、それに含まれるフォームコントロールによって表現される名前と値のペアがクエリ文字列に追加されます。もし JavaScript オブジェクトが 渡されたら、そのプロパティがパラメータの名前と値になります。
traditional（Boolean）
オプションのフラグ。true を指定すると、jQuery1.4 よりも前に使われていたのと同じアルゴリズムを強制的に使ってシリアライズします。false を指定すると、PHP や Ruby on Rails などの近代的なスクリプト言語やフレームワークに対応するためのシリアライズを行います。もし省略されたら、デフォルトの false になります。
戻り値
整形されたクエリ文字列。

注意点としては、要素の配列か、jQueryのラップ集合を渡す場合、その中にフォームの値を表現する以外の要素が含まれていると、この関数は渡された引数の中に不適切な要素があっても、それらを除外しないので結果の文字列に「&undefined=undefined」というエントリが大量にできてしまいます。

以下は $.param() を使用した例です。

decodeURIComponent() は、エンコードされた URI 内のエスケープシーケンスをそれぞれが表す文字に変換します。

※ jQuery3.0 からは、$.param() はスペースを %20 に変換します。jQury3.0 未満ではスペースを + に変換していました。これにより、JavaScript の encodeURIComponent() と互換になっています。

以下のサンプルで「Apply」をクリックすると、「string=some+string&string2=%40%23%24%25%5E%26L%3E&array%5B%5D・・・」のように変換されますが、jQuery3.0 では「string=some%20string&string2=%40%23%24%25%5E%26L%3E&array%5B%5D・・・」のように変換されます。

var my_obj = {
  string: 'some string',
  string2: '@#$%^&L>',
  array: [ 'Java', 'PHP', 'C++' ],
}
$.param(my_obj);


decodeURIComponent($.param(my_obj);)

以下は引数「traditional」を true に設定した場合の例です。v1.4以前の形式（近代的なスクリプト言語などには対応不十分な形式）でシリアライズします。

配列のデータが変数と同じようにシリアライズされるため、複雑なデータの変換には向かないようです。

var my_obj = {
  string: 'some string',
  string2: '@#$%^&L>',
  array: [ 'Java', 'PHP', 'C++' ],
}
$.param(my_obj, true);


decodeURIComponent($.param(my_obj, true);)

以下はネストしたパラメータをシリアライズする例です。

var my_obj = {
  name: {
    first: "Johnny",
    last: "Smith"
  },
  address: {
    street: "123 park Ave.",
    city: "New York",
    state: "NY",
    zipCode: "10101"
  }
}
$.param(my_obj);


decodeURIComponent($.param(my_obj);)

以下はネストしたパラメータで引数「traditional」を true に設定した場合の例です。v1.4以前の形式（近代的なスクリプト言語などには対応不十分な形式）でシリアライズします。

var my_obj = {
  name: {
    first: "Johnny",
    last: "Smith"
  },
  address: {
    street: "123 park Ave.",
    city: "New York",
    state: "NY",
    zipCode: "10101"
  }
}
$.param(my_obj, true);


decodeURIComponent($.param(my_obj, true);)

オブジェクトの型を判定

以下は、オブジェクトの型を判定するオブジェクトテスト用ユーティリティ関数の表です。

jQueryが提供するオブジェクトテスト用ユーティリティ関数
関数 説明
$.isArray(o) もし o が JavaScript 配列なら true を返します。但し、o が jQuery ラップ集合など、その他の「配列のようなオブジェクト」であれば false を返します。
$.isEmptyObject(o) もし o が（prototype から継承したものを含めて）プロパティを持たない JavaScript オブジェクトなら true を返します。
$.isFunction(o) もし o が JavaScript 関数なら true を返します。注意：Internet Explorerでは、alert() や confirm() などの組み込み関数や getAttribute() などの DOM 要素メソッドは、関数として正しく報告されない場合があります。
$.isPlainObject(o) もし o が、{ }か new Object() を介して作成された JavaScript オブジェクトなら、true を返します。
$.isXMLDoc(node) もし node が、XML 文書か XML 文書内のノードであれば、true を返します。