jQueryの$.extend()メソッドの使い方

jQueryの$.extend()メソッドの使い方

jQueryの$.extend()メソッドは第一引数に、その後指定したオブジェクトの引数をマージするメソッドです。

以下の場合、obj1にobj2をマージしています。

$(function(){
  var obj1 = {name:'Bob'};
  var obj2 = {age:20};
  var ret =$.extend(obj1,obj2);
  alert(JSON.stringify(ret));
});

DEMO

マージするので、あとから指定したオブジェクトに同じキーがある場合、値が上書きされます。

$(function(){
  var obj1 = {name:'Bob'};
  var obj2 = {age:20};
  var obj3 = {name:'Tom'};
  var ret =$.extend(obj1,obj2,obj3);
  alert(JSON.stringify(ret));
});

DEMO

上記のようにあとから指定して上書きされると、obj1の内容がobj2,obj3によって上書きされてしまいます。以下、obj1の内容が変わってしまっているのが確認できると思います。

$(function(){
  var obj1 = {name:'Bob'};
  var obj2 = {age:20};
  var obj3 = {name:'Tom'};
  var ret =$.extend(obj1,obj2,obj3);
  alert(JSON.stringify(ret));
  alert(JSON.stringify(obj1));
});

DEMO

これは$.extend()メソッドは第一引数のオブジェクトに対してマージする為です。

obj1の内容が変わるのが困る場合、以下のように空のオブジェクトを指定します。

$(function(){
  var obj1 = {name:'Bob'};
  var obj2 = {age:20};
  var obj3 = {name:'Tom'};
  var ret =$.extend({},obj1,obj2,obj3);
  alert(JSON.stringify(ret));
  alert(JSON.stringify(obj1));
});

DEMO

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
資格：少額短期保険募集人,FP3級,宅建士