オブジェクト

オブジェクトとは

名前をつけた箱()プロパティに複数の値を保存してまとめた集合体のことをオブジェクトといいます。配列は0から始まる連番の部屋に値を入れましたが、オブジェクトは保存する値に関する名前をつけた箱(プロパティ)に値を入れておくことができます。 オブジェクトは主に『ある場所に関する複数のデータをまとめて管理』する際に使用されます。 尚、オブジェクトには配列で利用できた「length」が存在しないので注意しましょう!

オブジェクトを作る:オブジェクトリテラル

var party = [
{name: '田中', job: '勇者', maxLife: 1000, life: 1000}, ←0番地
{name: '佐藤', job: '僧侶', maxLife: 400, life: 200}, ←1番地
];

オブジェクトを作成する場合は上記のように「{}中カッコ」の中に「プロパティ名:値」を記述していきます。2つ目以降の値は「,カンマ」で区切りながら記述します。 今後値が追加されることを見越して最後の値の後に「,カンマ」を記述しておいても構いません。 プロパティ名は「'シングルコート」や「"ダブルコート」で囲んで記述することもできます。 作成したオブジェクトは変数に代入して利用します。配列の時と同様に変数内に直接値を管理せず、アドレス先にある広い場所(実際はメモリ領域)に値を管理します。

上記のオブジェクトを使ってlengthの表記

「勇者」と「勇者の体力上限値」をコンソールを使って表示するには

var party = [
{name: '田中', job: '勇者', maxLife: 1000, life: 1000}, ←0番地
{name: '佐藤', job: '僧侶', maxLife: 400, life: 200}, ←1番地
];

console.log('1回目の出力');
console.log(party);
console.log(party.length);

console.log('2回目の出力');
console.log(party[0]);
console.log(party[0].name);
console.log(party[0].life);

※オブジェクト:partyの0番地(田中)のnameとlifeを上記のように記述する

オブジェクト内の値を変更する

値の入っているオブジェクトのプロパティにさらに値を代入するとプロパティの値を変更することができます。

var player = {
name: '田中',
job: '勇者',
maxLife: 1000,
life: 1000,
};

console.log('1回目の出力');
console.log(player1);
console.log(player1.name);
console.log(player1.life);
console.log(player1.job);

【player1は200ダメージを受けた!】
player.life = 800;

console.log('2回目の出力');
console.log(player1);
console.log(player1.name);
console.log(player1.life);

新たに映画「E.T」のオブジェクトを作って管理

var movie = {
title: 'E.T',
release: '1982年',
director: 'スピルバーグ',
};

console.log('映画情報の出力');
console.log(movie);
console.log(movie.title);
console.log(movie.release);
console.log(movie.director);

JSON(JavaScript Object Notation)の使い方

JSON(JavaScript Object Notation)は『JavaScriptの配列とオブジェクトを使って記述されたデータ形式』のことをいいます。JavaScriptのプログラム以外でもデータ交換用フォーマットとして広く使われています。

JSON形式データを作成する

var party = [
{name: '田中', job: '勇者', maxLife: 1000, life: 1000}, ←0番地
{name: '佐藤', job: '僧侶', maxLife: 400, life: 200}, ←1番地
];

配列とオブジェクトを多元化してデータを作成します。今回はパーティの人数を配列管理、パーティーのキャラクター情報をオブジェクトで管理しています。

  1. 配列:同じカテゴリーやグループに属する複数の値を管理
    ※length→使える
  2. オブジェクト:ある物事に関する複数のデータをまとめて管理
    ※length→使えない

上記の特徴から1次元目「人数管理」は配列、2次元目「キャラクター情報」はオブジェクトで管理しています。

JSON形式データを使用(参照)する

今回のデータは1次元目が配列のため「length」を使うことができます。コンソールに「party.length」を表示すると「2」となります。パーティの人数確認などに使えます。次に2次元目のキャラクター情報をコンソールに表示すると、1次元目配列の部屋番号、2次元目のプロパティ名を記述します。 配列の部屋番号は「 [] 角カッコ 」、オブジェクトのプロパティ名は「.ドット」を使用して記述するので注意しましょう。

var party = [
{name: '田中', job: '勇者', maxLife: 1000, life: 1000}, ←0番地
{name: '佐藤', job: '僧侶', maxLife: 400, life: 200}, ←1番地
];

console.log('1回目の出力');
console.log(party);
console.log(party.length);

console.log('2回目の出力');
console.log(party[0]);
console.log(party[0].name);
console.log(party[0].life);

【ステップアップ】

※数字を入力することでパーティの情報が表示される

転職を本気で考えている方向けのプログラミングスクール!【WebCampPRO】