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

2015/11/14 jQuery

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

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

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

$(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));
});

$(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));
});

$(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));
});

$(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

高橋

関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
Python3.6,Djangoを勉強中です,Javaは少し飽きてしまってます–;
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^

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

関連記事

コメントをどうぞ コメントをキャンセル

コメントをどうぞコメントをキャンセル