HTML,CSS,Javascript15(オブジェクトのコピー)

・目次

HTML,CSS,Javascript15(オブジェクトのコピー)

1.目的

　・javascriptのオブジェクトのコピー方法と使用方法について記載する。

2.オブジェクトのコピー(複製)方法

データ型 オブジェクト名　= {
　プロパティ名(キー):値,
　プロパティ名(キー):値,
 };

データ型 コピー先のオブジェクト名=Object.assign({}.コピー元のオブジェクト名);

例：

objという名前のオブジェクトを元に、obj2を作成。

 let obj = {
     jap : "日本語",
     eng : "English",
     			
     DispJap:function(){
     　console.log(this.jap);
 　　},
　　DispEng:function(){
     　console.log(this.eng);
　　},
}
     		
 //objという名前のオブジェクトの日本語を表示する関数を実行
 obj.DispJap();
 //オブジェクトのコピー
 const obj2 = Object.assign({},obj);

　・オブジェクトのコピーはObject.assignによって行う。

　　コピー元オブジェクトから列挙可能かつ直接所有のプロパティだけ、コピー先オブジェクトにコピーする。

　・列挙可能

　　for...in ループや Object.keys() メソッドで列挙されるプロパティ。

　　列挙可能かどうかは、プロパティのデスクリプタにおける enumerable 属性によって決まる。

　　この属性が true であれば、そのプロパティは列挙可能。

　・直接所有

　　オブジェクト自身に直接定義されているプロパティ。

　　オブジェクトのプロトタイプチェーン上のプロパティは含まれない。

　参考：Object.assign() - JavaScript | MDN

3.作成例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>タイトル</title>
    <!-- JQuaryの追加 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<style></style>
  </head>
 
  <body>
       <script>
     	let obj = {
     		jap : "日本語",
     		eng : "English",
     	
     		DispJap:function(){
     			console.log(this.jap);
     		},
     		DispEng:function(){
     			console.log(this.eng);
     		},
     	}
     	//オブジェクトのコピー(複製)
     	const obj2 = Object.assign({},obj);
     	window.onload = function () {
     		//objという名前のオブジェクトの日本語を表示する関数を実行
     		obj.DispJap();
     		console.log("--オブジェクトコピー結果--");
     		obj.DispJap();		// objのDispJap実行結果
     		obj2.DispJap();		// obj2のDispJap実行結果
     		obj2.jap ="テスト";
     		console.log("--obj2変更結果--");
     		obj.DispJap();		// objのDispJap実行結果
     		obj2.DispJap();		// obj2のDispJap実行結果
       	}
       	
     </script>
  </body>
</html>

実行結果

参考：

・new 演算子 - JavaScript | MDN

・[JavaScript] オブジェクトの基礎 #JavaScript - Qiita

4.オブジェクトのコピー(オブジェクトAからオブジェクトBにプロパティをコピー)方法

Object.assign(コピー先オブジェクト, コピー元オブジェクト);
//複数のオブジェクトをコピーする場合
Object.assign(コピー先オブジェクト, コピー元オブジェクト, コピー元オブジェクト2,・・・);

例

Object.assign(target, source1);
//複数のオブジェクトをコピーする場合
Object.assign(target, source1, source2);

4.プログラムの作成(オブジェクトのコピー)

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>タイトル</title>
    <!-- JQuaryの追加 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<style></style>
  </head>
 
  <body>
       <script>
     	let obj = {
     			jap : "日本語",
     			eng : "English",
     			
     			DispJap:function(){
     				console.log(this.jap);
     			},
     			DispEng:function(){
     				console.log(this.eng);
     			},
     	}
     	//空のobj2を作成
     	let obj2={};
     	let obj3={a:1};
     	let obj4={b:1};
     		
     	Object.assign(obj2,obj);
     	Object.assign(obj3,obj2,obj4);
     	
     	window.onload = function () {
     		console.log("--obj2のプロパティ表示--");
     		console.log(obj2);
     		console.log("--obj3のプロパティ表示--");
     		console.log(obj3);
     		
     		//objという名前のオブジェクトの日本語を表示する関数を実行
     		obj2.DispJap();
     		console.log("--オブジェクトコピー結果--");
     		obj.DispJap();				// objのDispJap実行結果
     		obj2.DispJap();				// obj2のDispJap実行結果
     		obj2.jap ="テスト";
     		console.log("--obj2変更結果--");
     		obj.DispJap();				// objのDispJap実行結果
     		obj2.DispJap();				// obj2のDispJap実行結果

       	}
       	
       	
     </script>
  </body>
</html>