javascript(jQuery)：複数の連想配列を結合する方法

複数の連想配列をマージすることができるjQueryのメソッド、extendについてです。

extend()の使い方

$.extend(target [, obj1] [, obj2])

target : マージ対象の連想配列

obj1等 : マージする連想配列

※ マージする連想配列はいくつでも指定が可能です。

使用例

連想配列aに連想配列bをマージ

var a = {
 id : 1,
 name : '田中'
};

var b = {
 name : '佐藤',
 job : 'エンジニア'
};

$.extend(a, b);
console.log(a);
//結果
//{
// id : 1,
// name : '佐藤',
// job : 'エンジニア'
//};

同一キーがある場合は値を上書き、異なるキーは追加されます。

連想配列aに連想配列bとcをマージ

var a = {
 id : 1,
 name : '田中'
};

var b = {
 name : '佐藤',
 job : 'エンジニア'
};

var c = {
 name : '鈴木',
 address : '東京'
};

$.extend(a, b, c);
console.log(a);
//結果
//{
// id : 1,
// name : '鈴木',
// job : 'エンジニア'
// address : '東京'
//};

連想配列aの値を書き換えたくない場合

var a = {
 id : 1,
 name : '田中'
};

var b = {
 name : '佐藤',
 job : 'エンジニア'
};

var result = $.extend({}, a, b);
console.log(result);
//結果
//{
// id : 1,
// name : '佐藤',
// job : 'エンジニア'
//};

第一引数を空の連想配列とし、結果を変数に格納すればaを書き換えずにマージ結果が得られます。

連想配列内に連想配列を含む場合

var a = {
 position : {
  top : 30,
  left : 300,
  width : 200;
 },
 color : black
};

var b = {
 position : {
  height : 400
 }
};

$.extend(a, b);
console.log(a);
//結果
//{
// position : {
//  height : 400
// },
// color : black;
//};

aにbをマージしてみましたが、aのpositionの値はbのpositionの値で書き換えられてしまいます。子階層の連想配列の値もうまくマージしたい場合は下記のように記述する必要があります。

var a = {
 position : {
  top : 30,
  left : 300,
  width : 200
 },
 color : black
};

var b = {
 position : {
  height : 400
 }
};

$.extend(true, a, b);
console.log(a);
//結果
//{
// position : {
//  top : 30,
//  left : 300,
//  width : 200,
//  height : 400
// },
// color : black;
//};

第一引数にtrueを指定することで、子階層の連想配列までマージが行われます。