自主学習3-12「JavaScript実践(配列-オブジェクトリテラル)」

前回の「自主学習3-11」に引き続き、今回もJavaScript実践編をお送り致します。

オブジェクトとは?

関連記事 オブジェクトリテラルについて記述方法など

書籍『JavaScript本格入門』でオブジェクトについての基礎を学習しましたが、実践でも詳しく学習します。


配列との違いについて

オブジェクトも配列と同様に、複数のデータをまとめて管理するのに用いられます。配列では値を並べてインデックス番号で管理しますが、オブジェクトでは値に名前(プロパティ)を付けて管理することができます。また配列はオブジェクトを要素として入れることも可能です。

配列オブジェクト
データとして入れられる値数値、文字列、関数数値、文字列、関数
データの呼び方要素プロパティ(各要素に自分で付けることのできる名前)
データの呼び出し方法インデックス番号プロパティ名(数字だけの名前は付けられない)
コードの記述方法ブラケット[ ]で囲う中括弧で{ }囲う
値を代入する
値の更新代入することで上書き可能代入することで上書き可能
ゴミコ
2つの違いはデータの呼び出し方法だけ。番号で呼び出すか?名前を付けてプロパティ名で呼びだすか?の違いだね。

実践-オブジェクトを要素に持つ配列

const characters = [
  {name: "ゴミコ", age: 36},
  {name: "ゴミリョ", age: 35}
];

// charactersの1つ目の要素「age」に対応する値を出力
alert(characters[0].age);

// charactersの2つ目の要素「name」に対応する値を出力
alert(characters[1].name);

//コードをコピペして下のエディタから出力結果を確認してみよう。
ゴミコ
定数charactersに配列を代入しているよ。さらに配列の中にオブジェクトとして、nameとageというプロパティ名を持つ2つの要素が入っているよ。
point!! 配列とオブジェクトの違いは呼び出す時に「番号を使う」か「文字を使う」かの違いだけ。これだけ覚えておけば、処理ごとに使い分けることができます。

次回はfor文を使用した配列の練習問題を解いていきたいと思います。

にほんブログ村 IT技術ブログへ
にほんブログ村