JavaScriptのjQuery.extendメソッドを使って複数のオブジェクトをマージする方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのjQuery.extendメソッドを使って複数のオブジェクトをマージする方法について現役エンジニアが解説しています。jQuery.extendメソッドとは、object同士を連結(merge)することができるメソッドです。複数のObjectの連結やディープコピーについて解説します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのjQuery.extendメソッドを使って複数のオブジェクトをマージする方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptのjQuery.extendメソッドを使って複数のオブジェクトをマージする方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

extendメソッドとは

jQuery.extendメソッドとは、object同士を連結(merge)することができるメソッドになります。

extendメソッドの使い方

extendメソッドの基本的な使い方は、以下のようになります。

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

引数
target:連結の基本となるオブジェクトを指定します。
object:targetに連結するオブジェクトを指定します。

(使用例)

var tgtObj = {id: 1, name: "tarou"};

var mgObj = {name: "jirou", age:20};

jQuery.extend(tgtObj ,mgObj);

console.log(tgtObj);

// {id: 1, name:"jirou", age:20}

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

複数のオブジェクトをマージする方法

複数のオブジェクトをマージしたい場合は、マージするオブジェクトの引数を増やすことで対応できます。

var tgtObj = {id: 1, name: "tarou"};

var mgObjA = {name: "jirou", age:20};

var mgObjB = {age: 30, note:"マージ二個目のオブジェクト"};

jQuery.extend(tgtObj ,mgObjA,mgObjB);

console.log(tgtObj);

// {id: 1, name:"jirou", age:30, note:"マージ二個目のオブジェクト"}

 

extendメソッドを使ってディープコピーする方法

マージする対象が多次元の場合は、第一引数にtrueを設定することで再帰的なマージを行うことが可能です。

var tgtObj = {

id: 1,

name: 'tarou',

details:

bloodType : 'A',

eyesight : '1.5'

};

var mgObjA = {

name : 'jirou'

details:

age:20

};

jQuery.extend(true,tgtObj ,mgObjA);

console.log(tgtObj);

// {

id: 1,

name: 'jirou',

details:

bloodType : 'A',

eyesight : '1.5',

age : 20

}

 

筆者プロフィール

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。
現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。