https://idea-hack.com/courses/arrange-and-remember-how-to-handle-arrays-in-javascript/lessons/using-the-object-asign-method-to-duplicate-an-object-in-javascript/
https://idea-hack.com/courses/arrange-and-remember-how-to-handle-arrays-in-javascript/lessons/using-the-object-asign-method-to-duplicate-an-object-in-javascript/

JavaScriptでのオブジェクトを複製するObject.asign()メソッドの使い方

JavaScriptではオブジェクトを定義して、あらゆるデータを一括で管理、まとめておくことが可能です。

オブジェクトを複製したい時は、Object.asign()メソッドを利用すると便利です。

ただし、分割代入の仕組みを利用して複製することも可能です。(サンプルコードを確認してください。)

構文

メソッド意味返り値
Object.asign({},コピー元オブジェクト)オブジェクをコピーコピーされた新規オブジェクト
Object.asign()メソッド
構文意味
{…コピー元オブジェクト}オブジェクトの各要素を分割代入することでコピーを実現する。

サンプルコード

Output
sampleObjects[‘post_id’](コピー元)
sampleObjects[‘post_id’](Objects.asign()を利用した時)
sampleObjects[‘post_id’]({…でコピーした時})
Pug
.container.my-5
	div
		table.table
			tbody
				tr
					th sampleObjects['post_id'](コピー元)
					td#targetText
				tr
					th sampleObjects['post_id'](Objects.asign()を利用した時)
					td#targetText1
				tr
					th sampleObjects['post_id']({...でコピーした時})
					td#targetText2
				
JavaScript
const targetText = document.getElementById( 'targetText' );
const targetText1 = document.getElementById( 'targetText1' );
const targetText2 = document.getElementById( 'targetText2' );

const sampleObjects = {
  post_id: 1,
  author_id: 10,
  title: 'Hello World',
  published_date: '20191223',
  subObject: { password: 123456, author_name: '佐藤'},
  sampleArray: ['りんご', 'レモン', 'みかん'],
}

const copiedObjects = Object.assign({},sampleObjects);
const copiedObjects2 = {...sampleObjects};

targetText.textContent = sampleObjects['post_id'];
targetText1.textContent = copiedObjects['post_id'];
targetText2.textContent = copiedObjects2['post_id'];
インストラクター
コメント

コメントを残す