[jQuery] オブジェクトをマージする（$.extend）

投稿日：2017年6月24日更新日：2018年5月3日

オブジェクトをマージするには、$.extend()を使用します。

サンプルソース

例１）obj1にobj2の値をマージする

//オブジェクト（連想配列）生成
var obj1 = {cd:1, name:'トマト', price:198};    //オブジェクト１
var obj2 = {cd:2, name:'きゅうり', number:25};  //オブジェクト２

//obj1にobj2をマージする
$.extend(obj1, obj2);

console.log(obj1);

//オブジェクト（連想配列）生成

var obj1 = {cd:1, name:'トマト', price:198}; //オブジェクト１

var obj2 = {cd:2, name:'きゅうり', number:25}; //オブジェクト２

//obj1にobj2をマージする

$.extend(obj1, obj2);

console.log(obj1);

（結果）: obj1 => {cd: 2, name: "きゅうり", price: 198, number: 25}

上記例の通り、extendの引数にマージするオブジェクトのみ指定した場合は、第１引数のオブジェクトの内容がマージされたものに書き換えられてしまいます。これを防ぐには、第１引数に空のオブジェクトを指定すればＯＫです。

例２）obj1にobj2の値をマージして、obj3に代入する

//連想配列
var obj1 = {cd:1, name:'トマト', price:198};    //オブジェクト１
var obj2 = {cd:2, name:'きゅうり', number:25};  //オブジェクト２
var obj3 = new Object();    //代入用オブジェクト

//obj1とobj2をマージして、obj3に代入する
$.extend(obj3, obj1, obj2);

console.log(obj3);

//連想配列

var obj1 = {cd:1, name:'トマト', price:198}; //オブジェクト１

var obj2 = {cd:2, name:'きゅうり', number:25}; //オブジェクト２

var obj3 = new Object(); //代入用オブジェクト

//obj1とobj2をマージして、obj3に代入する

$.extend(obj3, obj1, obj2);

console.log(obj3);

（結果）: obj3 => {cd: 2, name: "きゅうり", price: 198, number: 25}

この方法だと、obj1とobj2の値は上書きされずそのままです。

解説

マージすると、無いkeyの場合は作成され、存在するkeyの場合は上書きされます。
extendにの引数には複数のオブジェクトを指定することが可能です。
再帰的なオブジェクト（オブジェクトのオブジェクト）をextendすると、マージではなく上書きされてしまいます。これを防ぐためには第１引数にtrueを指定すれば再帰的なオブジェクトでもマージされます。
例）$.extend(true, obj1, obj2);

執筆者：とら