JavaScript ・ 配列・オブジェクト
Object
名前と値の組をまとめる（オブジェクト）
「名前（キー）: 値」の組をまとめて1つのデータとして扱う形です。商品の名前と価格のように、関連する情報をひとまとめにできます。
01
サンプルコード
JS
1const item = {
2 name: 'カフェラテ',
3 price: 550,
4 hot: true,
5};
6
7console.log(item.name);
8item.price = 580;
9console.log(item);
02
実行結果
コンソール
- console.log() の出力がここに表示されます
03
解説
オブジェクトは { キー: 値, … } の形で書きます。キーはプロパティ名とも呼ばれ、値には数値・文字列・配列・関数など何でも入れられます。
値は item.name のように「.（ドット）」で取り出します。キーを変数で指定したいときは item[key] と書きます。
代入すると値を変更でき、存在しないキーに代入するとプロパティが追加されます。
04
応用例・注意点
よく使う操作
| 書き方 | 説明 |
|---|---|
obj.key | 値を取り出す |
obj.key = 値 | 値を変更・追加する |
delete obj.key | プロパティを削除する |
'key' in obj | キーがあるか調べる |
Object.keys(obj) | キーの一覧を配列で取得 |
const { name } = obj | 分割代入で取り出す |
オブジェクトの配列
同じ形のオブジェクトを配列に並べると、一覧データを扱えます。
JS
1const menu = [
2 { name: 'ブレンド', price: 480 },
3 { name: 'カフェラテ', price: 550 },
4];
5for (const m of menu) {
6 console.log(`${m.name}：${m.price}円`);
7}
注意点
- 01存在しないキーを参照すると undefined になります。さらにその先を参照するとエラーになるので、?. （オプショナルチェーン）を使うと安全です。
- 02データを保存・送信するときは JSON.stringify() で文字列に変換します。