jQueryでオブジェクト同士を結合させる($.extend)

2022年6月7日2023年7月17日

本記事では、jQueryでオブジェクト同士を結合させることができるextendメソッドの使い方について解説しています。

JavaScriptの学習におすすめ書籍

1冊ですべて身につくJavaScript入門講座

総合評価

( 5 )

メリット

誰でも分かるように嚙み砕いて説明してくれる
アニメーションの知識が深く学べる
1つのWebサイトを作りながら学べる

1冊ですべて身につくJavaScript入門講座 [ Mana ]

楽天ブックス

¥2,794 （2024/04/21 02:09時点 | 楽天市場調べ）

Amazonで探す

楽天市場で探す

Yahoo!ショッピングで探す

ポチップ

先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！

Amazon Kindle Unlimited

全プログラマー必見！
変数名/関数名にもう悩まない！

リーダブルコード

総合評価

( 5 )

メリット

美しいコードが書けるが自然と書けるようになる
他の開発者が理解しやすいコードになる

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤功平, 翻訳:角征典

¥2,640 （2023/07/23 02:48時点 | Amazon調べ）

Amazonで探す

楽天市場で探す

Yahoo!ショッピングで探す

ポチップ

extendメソッド

extendメソッドは、複数のオブジェクト同士を結合することができるメソッドです。使い方を工夫することで、配列やオブジェクトのコピーをすることもできます。

基本的な使い方は以下のとおりです。

$.extend( deep, target, object, object )

引数の詳細

deep：trueを指定すると、深いプロパティもマージ可能
target：マージ先のオブジェクトを指定
object：マージするオブジェクトを指定

まず始めに、deepとtargetを指定せずにobjectだけ指定して結果を見てみましょう。

let personObj1 = {
  id:1,
  name:"John"
}

let personObj2 = {
  age:30
}

let mergeObj = $.extend(personObj1, personObj2);
console.log(mergeObj);
/* マージ結果 */
{
  id:1,
  name:"John",
  age:30
}

一見問題ないように見えますが、実はpersonObj1にもageプロパティがマージされてしまっています。

console.log(personObj1);
/* 実行結果 */
{
  id:1,
  name:"John",
  age:30
}

この理由は、第一引数に指定したオブジェクトに対しても第二引数以降でしたオブジェクトがマージされてしまうからです。これを回避するには、第一引数にtargetの空オブジェクトを追加します。

let mergeObj = $.extend({}, personObj1, personObj2);
console.log(mergeObj);
/* マージ結果 */
{
  id:1,
  name:"John",
  age:30
}

console.log(personObj1);
/* 実行結果 */
{
  id:1,
  name:"John"
}

personObj1のオブジェクトにageプロパティがマージされていないことが確認できました。

最後に引数deepについて解説します。以下のような深い階層にプロパティや値が存在する場合にオブジェクト同士の結合をしたらどうなるでしょうか？

let fruits1 = {
  name:"りんご",
  info: {
    area:"青森",
    season:"秋"
  }
}

let fruits2 = {
  info:{
    price:200
  }
}

let mergeObj = $.extend({}, fruits1, fruits2);
console.log(mergeObj);
/* マージ結果 */
{
  name:"りんご",
  info: {
    price:200
  }
}

fruits1のオブジェクトで設定したinfoプロパティ内の値が上書きされています。このように深い階層のオブジェクトをマージする時には引数deepをtrueに指定します。

let mergeObj = $.extend(true,{}, fruits1, fruits2);
console.log(mergeObj);
/* マージ結果 */
{
  name:"りんご",
  info: {
    area:"青森",
    season:"秋",
    price:200
  }
}

すると、infoが上手く結合していることが確認できました。