本記事では、jQueryでオブジェクト同士を結合させることができるextendメソッドの使い方について解説しています。
JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
メリット
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
全プログラマー必見！
変数名/関数名にもう悩まない！
変数名/関数名にもう悩まない！
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 （2023/07/23 02:48時点 | Amazon調べ）
ポチップ
目次
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が上手く結合していることが確認できました。
あわせて読みたい
jQueryで配列やオブジェクトをコピーする方法
本記事では、jQueryで配列やオブジェクトをコピーする方法について解説しています。 配列とオブジェクトをコピーする 配列やオブジェクトをコピーする場合、パッと思い…