JavaScriptでオブジェクトの各プロパティと値を変数に格納する方法(分割代入)

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

JavaScriptで、各プロパティの各キーの名前が同じ変数名を定義して、そのキーの値を変数に格納したい時があります。

そんな時は分割代入の知識が必要になります。

構文

構文意味
([変数1,変数2,変数3,…]) = オブジェクトオブジェクトの各キーを参照し、名前が同じ変数が左辺で定義されていた場合、その変数にキーの値を格納した状態で新たに変数を定義する。
分割代入

サンプルコード

Output
post_id;
author_id;
title;
published_date;
subObject.password;
sampleArray;
Pug
.container.my-5
	div
		table.table
			tbody
				tr
					th post_id;
					td#targetText
				tr
					th author_id;
					td#targetText1
				tr
					th title;
					td#targetText2
				tr
					th published_date;
					td#targetText3
				tr
					th subObject.password;
					td#targetText4
				tr
					th sampleArray;
					td#targetText5
JavaScript
const targetText = document.getElementById( 'targetText' );
const targetText1 = document.getElementById( 'targetText1' );
const targetText2 = document.getElementById( 'targetText2' );
const targetText3 = document.getElementById( 'targetText3' );
const targetText4 = document.getElementById( 'targetText4' );
const targetText5 = document.getElementById( 'targetText5' );

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

targetText.textContent = post_id;
targetText1.textContent = author_id;
targetText2.textContent = title;
targetText3.textContent = published_date;
targetText4.textContent = subObject.password;
targetText5.textContent = sampleArray;
インストラクター
コメント

コメントを残す