プログラミング日記
2020年11月6日
オブジェクトのプロパティ取得・更新について
オブジェクト(連想配列)とは
script.js
let jsbook = {title: 'JavaScript入門', price: 2500, stock: 3};
複数のプロパティを持つ値の集まり。
プロパティ名と値が必要。
プロパティ、プロパティ名、値
title: 'JavaScript入門'・・・プロパティ
title・・・プロパティ名
'JavaScript入門'・・・値
プロパティの書き方
プロパティ名：値
script.js
title: 'JavaScript入門';
プロパティの値を取得する方法
①オブジェクト名.プロパティ名;
script.js
console.log(jsbook.title);
---出力結果---
JavaScript入門
②オブジェクト名['プロパティ名'];
※プロパティ名が数字の場合は、シングルクォートorダブルクォートで囲む必要なし
script.js
console.log(jsbook['price']);
---出力結果---
2500
プロパティの値を書き換える方法
①オブジェクト名.プロパティ名 ＝ 新しい値;
script.js
jsbook.price = 3000;
②オブジェクト名['プロパティ名'] = 新しい値;
script.js
jsbook['title'] = 'CSS入門';
全てのプロパティを読み取る(for...in文)
script.js
let jsbook = {title: 'JavaScript入門', price: 2500, stock: 3};
for(let p in jsbook) {
console.log(p + '=' + jsbook[p]);
}
---出力結果---
title=JavaScript入門
price=1200
stock=3
for...in文・・・繰り返し処理が行われるたびに、変数pにプロパティ名が1つずつ代入される。
for...in文の中でプロパティを取得する際は、オブジェクト名['プロパティ名'];を使う。
オブジェクト名.プロパティ名;で書くと、jsbookオブジェクトのpプロパティとなるため。
取得したいのは、pプロパティではなく、title,price,stockプロパティの値である。
オブジェクト名.プロパティ名;で書いたときは、以下のようにundefindになる。
script.js
let jsbook = {title: 'JavaScript入門', price: 2500, stock: 3};
for(let p in jsbook) {
console.log(p + '=' + jsbook.p);
}
---出力結果---
title=undefind
price=undefind
stock=undefind
今回の学びと課題
- プロパティの取得・更新方法について。
- for...in文の使い方について。
- プロパティの取得・更新の方法が2種類あるが、使い分けがイマイチ理解できていない。
- オブジェクトのキーの順序が変わる場合がある。