https://idea-hack.com/courses/arrange-and-remember-how-to-handle-arrays-in-javascript/lessons/how-to-get-update-the-contents-of-an-object-in-javascript/
https://idea-hack.com/courses/arrange-and-remember-how-to-handle-arrays-in-javascript/lessons/how-to-get-update-the-contents-of-an-object-in-javascript/

JavaScriptでのオブジェクトの中身を取得・更新する方法を覚えよう

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

オブジェクトに格納されたデータは、キー名を指定して値を取得することができますし、値を更新することもできます。

まずは、オブジェクトの更新に関する構文を確認しましょう。

構文

構文意味
{} オブジェクトの定義
{キー:値, キー:値}オブジェクトの定義
オブジェクト[キー]オブジェクトから[キー]の値を取得
オブジェクト.キーオブジェクトから[キー]の値を取得
オブジェクト[キー名] = 新しい値オブジェクトの[キー]の値を「新しい値」に更新
オブジェクト.キー名 = 値オブジェクトの[キー]の値を「新しい値」に更新

サンプルコード

オブジェクトからデータを取得

オブジェクトの中にオブジェクトが格納されている「多階層オブジェクト」の例も含んでいますので、合わせて参考にしてください。

Output
sampleObjects[‘post_id’];
sampleObjects.title;
sampleObjects.sampleArray
sampleObjects.subObject.password;
Pug
.container.my-5
	div
		table.table
			tbody
				tr
					th sampleObjects['post_id'];
					td#targetText
				tr
					th sampleObjects.title;
					td#targetText1
				tr
					th sampleObjects.sampleArray
					td#targetText2
				tr
					th sampleObjects.subObject.password;
					td#targetText3
JavaScript
const targetText = document.getElementById( 'targetText' );
const targetText1 = document.getElementById( 'targetText1' );
const targetText2 = document.getElementById( 'targetText2' );
const targetText3 = document.getElementById( 'targetText3' );

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

オブジェクトのデータを更新

Output
sampleObjects[‘post_id’](更新後)
sampleObjects.title(更新後)
sampleObjects.sampleArray(更新後)
sampleObjects.subObject.password(更新後)
Pug
.container.my-5
	div
		table.table
			tbody
				tr
					th sampleObjects['post_id'](更新後)
					td#targetText4
				tr
					th sampleObjects.title(更新後)
					td#targetText5
				tr
					th sampleObjects.sampleArray(更新後)
					td#targetText6
				tr
					th sampleObjects.subObject.password(更新後)
					td#targetText7
JavaScript
sampleObjects.post_id = 2;
sampleObjects.title = "Hello Japan";
sampleObjects.sampleArray = ['りんご','ばなな','ぶどう'];
sampleObjects.subObject.password = 78910;

targetText4.textContent = sampleObjects.post_id
targetText5.textContent = sampleObjects.title;
targetText6.textContent = sampleObjects.sampleArray;
targetText7.textContent = sampleObjects.subObject.password;
インストラクター
コメント

コメントを残す