mainvisual

javascriptで、オブジェクトをマージしたい時ってありますよね。 for文で回して、要素があるかどうかを判別して、上書きする… そんな面倒なこと、したくないと思いませんか?

そんな時は、jQuery.extendが役立つかもしれません。

$.extend() とは

$.extend()は、複数のオブジェクトをまとめてくれる、jqueryの機能の一つです。 例えば、javascriptのオブジェクトAとBがあったとすれば、 AのオブジェクトにBの要素を上書きするような感じです。

使い方

公式ページによると2つの使い方があります。

jQuery.extend( target [, object1 ] [, objectN ] )
jQuery.extend( [deep ], target, object1 [, objectN ] )

jQuery.extend( target [, object1 ] [, objectN ] )

これは、オブジェクトをマージする一番簡単な方法です。 引数の順番に1階層のデータをマージします。

例えば、こんな風になります。

var default = {
 url: './hogehoge.xml',
 dataType: 'xml'
 data: {
   data1: "data1"
   data2: "data2"
 }
};
var option = {
 url: './data.xml',
 data: {}
};
var out = $.extend(default , option);
console.log(out);
// 標準出力
// Object {
//   url: "./data.xml",
//   dataType: "xml",
//   data: {}
// }

jQuery.extend(deep boolean, target, object1 [, objectN ] )

deepには、boolean型を指定します。 先ほどは、1階層しかマージしませんでしたが、このフラグをしようすると、 再帰的にすべての階層データをマージしてくれます。

var default = {
 url: './hogehoge.xml',
 dataType: 'xml'
 data: {
   data1: "data1"
   data2: "data2"
 }
};
var option = {
 url: './data.xml',
 data: {}
};
var out = $.extend(default , option);
console.log(out);
// 標準出力
// Object {
//   url: "./data.xml",
//   dataType: "xml",
//   data: {
//     data1: "data1"
//     data2: "data2"
//   }
// }

まとめ

ここぞという時に役立つ、便利なユーティリティ関数です。