デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

jQuery.merge( )配列を連結

構文

配列を連結返値:配列
jQuery.merge( 配列1, 配列2 )ver1.0〜

機能

jQuery.mergeメソッドは引数で設定された配列1に配列2を連結します。

jQuery.mergeメソッドは連結した配列を返しますが、配列1に設定した配列も配列2が連結されてしまうことに注意してください(何故こんな仕様なのだろう?)。もし変更されたくない場合はあらかじめ配列を複製してください。配列の複製もjQuery.mergeメソッドで可能です。

解説

配列を連結する

サンプル(merge/01.html)を開いてbody内にbutton要素しかないことを確認して下さい。jQueryでは、まず以下の部分を確認してください。2つの配列(arr_1とarr_2)が作成されています。

var arr_1 = ["aaa", "bbb", "ccc"];
var arr_2 = ["ddd", "eee"];

続いて以下の部分を確認してください。buttonをクリックしたらjQuery.mergeメソッドを利用して配列arr_1に配列arr_2を連結します。連結した配列は変数ansArrayに代入してappendメソッドでbody内に表示します。

$("button").click(function(){
	var ansArray = $.merge(arr_1, arr_2);
	$("body").append("<br/>" + "ansArray = " + ansArray);
});

結果として、buttonをクリックするとbody内に連結した配列「aaa,bbb,ccc,ddd,eee」が表示されます。

第1引数に設定した配列は変更されてしまいます

jQuery.mergeメソッドを利用すると、第1引数に設定した配列は第2引数の配列と連結された配列になってしまいます。サンプル(merge/02.html)を開いて、merge/01.htmlとほとんど同じ事を確認してください。

異なるのは以下の部分で、連結した配列「ansArray」以外にも、元の配列「arr_1」と「arr_2」もappendメソッドでbody内に表示するようにしています。

$("button").click(function(){
	var ansArray = $.merge(arr_1, arr_2);
	$("body").append("<br/>" + "arr_1 = " + arr_1);
	$("body").append("<br/>" + "arr_2 = " + arr_2);
	$("body").append("<br/>" + "ansArray = " + ansArray);
});

結果として、buttonをクリックすると元の配列「arr_1」が連結された配列「ansArray」と同じように変更されてしまっているのが確認できます。「arr_2」は変更されません。
返値で連結された配列が得られるのに何故このような仕様になったのでしょう?...

配列を複製する

空の配列と複製したい配列を連結して配列を複製することができます。オリジナルの配列を残しておきたい時などに利用します。

サンプル(merge/03.html)を開いてbody内の構成がmerge/01.htmlと同じ事を確認してください。jQueryでは、まず以下の部分を確認してください。1行目で配列arr_1が作成されています。2行目で空の配列と配列arr_1を連結して新しい配列「mergeArray」を作成しています。これで配列mergeArrayは元の配列arr_1と同じになり、配列が複製されたことになります。

そして3行目でmergeArrayにjavaScriptのpushメソッドで要素「ddd」を追加しています。

var arr_1 = ["aaa", "bbb", "ccc"];
var mergeArray = $.merge([],arr_1);
mergeArray.push("ddd");

続いて以下の部分を確認してください。buttonをクリックするとappendメソッドを利用して、オリジナルの配列arr_1と複製した配列mergeArrayの値ををbody要素に表示するようにしています。

$("button").click(function(){
	$("body").append("arr_1 = " + arr_1 + "<br/>");
	$("body").append("mergeArray = " + mergeArray + "<br/>");
});

結果として、オリジナルの配列「arr_1」に影響することなく複製した配列「mergeArray」を変更できることが確認できます。

この結果は当たり前に思うかも知れませんが、配列は「参照の値渡し」のため、変数に代入しただけでは複製できません。サンプル(merge/03b.html)を開いて配列の複製の部分が以下の様に変更されていることを確認してください(代入するだけに変更されています)。

var arr_1 = ["aaa", "bbb", "ccc"];
var mergeArray = arr_1;
mergeArray.push("ddd");

これでは3行目のmergeArrayに要素を追加すると、元の配列「arr_1」の値も変更されてしまいます。buttonをクリックしてmergeArrayとarr_1の値が同じになってしまっている(両方に「ddd」が追加されてしまっている)ことを確認してください。

関連項目

objectオブジェクトを連結したり複製する場合はjQuery.extendメソッドを利用してください。

メモ

3つ以上の引数はムリ

jQuery.extendメソッドは3つ以上のobjectオブジェクトを引数に設定できるため、引数の内容を変更することなく連結することができるのですが、jQuery.mergeメソッドはムリのようです。

サンプル(merge/test01.html)を開いて以下の部分を確認してください。もし3つ以上の引数を設定できれば以下の様に変化してしまう第1引数にダミーの空配列を設定し、配列arr_1やarr_2を変更することなく連結した配列ansArrayを取得できます。

$("button").click(function(){
	var ansArray = $.merge([], arr_1, arr_2);
	alert(ansArray);
});

しかし実際は空の配列とarr_1を連結した(つまりarr_1と同じ)配列が得られるだけでした...。