「jQuery」extendメソッドでオブジェクトの同じキー項目を上書きしないサンプル

2022年10月6日

環境
Google Chrome 105.0.5195.127
Windows 10 Home 64bit
jquery 3.6.0

構文
jQuery.extend( [deep ], target, object1 [, objectN ] )
引数のオブジェクトをマージします。オブジェクトは2つ以上でも可能です。
引数
target プロパティをマージする基底となるオブジェクトを指定します
[object1] マージするためのプロパティを持つオブジェクトを指定します。
[objectN] マージするためのプロパティを持つオブジェクトを指定します。
使用例

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
 
  $("#btnshow").click(function(){
 	const userA = {
            userid: 1001,
            name: '山田 太郎'
      };
      
      const userB = {
            userid: 2002,
            deprtname: '開発部'
      };

    $result = $.extend({},userA,userB);
     console.log("オブジェクトをマージする結果");
       console.log($result);
     console.log("userAオブジェクトの情報");
       console.log(userA);
     console.log("userBオブジェクトの情報");
       console.log(userB);
    
    });
});
</script>
</head>
<body>

<input type="button" id="btnshow" value="表示" />

</body>
</html>

空のオブジェクト、1つめのオブジェクト、2つめのオブジェクトをマージして新しい変数に代入しています。引数の2つめ以降のオブジェクトは上書きされません。

実行結果

オブジェクトをマージする結果
{userid: 2002, name: '山田 太郎', deprtname: '開発部'}
userAオブジェクトの情報
{userid: 1001, name: '山田 太郎'}
userBオブジェクトの情報
{userid: 2002, deprtname: '開発部'}

jQuery

Posted by arkgame

関連記事: