オブジェクトとは
オブジェクトは配列と同じく複数のデータをまとめて管理するのに使われる。
配列は複数の値を並べて管理するのに対して、オブジェクトはそれぞれの値にプロパティと呼ばれる名前をつけて管理する。
配列
[値１; 値２; 値３]
オブジェクト
{プロパティ名１: 値１, プロパティ名２: 値２}オブジェクトの作り方
配列を作るときは[]で囲ったが、オブジェクトは{}で囲む。
プロパティ名はコロン「 : 」でつなぎ、プロパティ間はカンマ「 , 」で区切る。
{name: "日本酒", price: 1500}オブジェクトを定数に代入する
オブジェクトも定数に代入することができる。
const item = {name: "日本酒", price: 1500};
console.log(item);{name: "日本酒", price: 1500}オブジェクトの値を取り出す
オブジェクトの値を取り出すには、対応するプロパティ名を使って「オブジェクト.プロパティ名」のように書く。
const item = {name: "日本酒", price: 1500};
console.log(item.name);日本酒オブジェクトの値を更新する
「オブジェクト.プロパティ名 = 新しい値」とすることで、オブジェクトの値を更新することができます。
const item = {name: "日本酒", price: 1500};
item.price = 3000; priceプロパティの値を更新
console.log(item.price);
3000オブジェクトを要素に持つ配列
配列の要素には、文字列や数値だけでなく、オブジェクトも使うことができる。
以下は配列の要素にオブジェクトを指定した場合。
[{プロパティ１: 値１...}, {プロパティ２: 値２...}]このままだと、コードが横に長くなり見づらいため、見やすくするために要素ごとに改行することが多い。
const items = [
{name: "日本酒", price: 1500}, オブジェクトの区切りはカンマ
{name: "ビール", price: 300}
];配列の中のオブジェクトを取り出す
復習：配列の要素には、先頭からインデックス番号が割り振られていた。
それと同じように配列の値がオブジェクトの場合でも、配列[インデックス番号]で対応するオブジェクトを取得できる。
const items = [ インデックス番号
{name: "日本酒", price: 1500}, [0]
{name: "ビール", price: 300} [1]
];
console.log(items[1]);{name: "ビール", price: 300}配列の中のオブジェクトの値を取り出す
さらに、配列の中のオブジェクトのプロパティの値を取り出すには、「配列[インデックス番号].プロパティ名」と書く。
const items = [ インデックス番号
{name: "日本酒", price: 1500}, [0]
{name: "ビール", price: 300} [1]
];
console.log(items[1].price);300存在しない要素を取得する
要素を取得する際に、配列に対して存在しないインデックス番号を指定したり、オブジェクトに対して存在しないプロパティを指定するとどうなるか？
配列の場合
const animals = ["dog","cat","sheep"];
console.log(animals[1]);
console.log(animals[5]); ??? 存在しないインデックス番号cat
undefinedオブジェクトの場合
const character = {name: "伊代", age: 16};
console.log(character.name);
console.log(character.email); ???存在しないプロパティ伊代
undefinedundefined（アンディファインド）
配列の存在しないインデックス番号の要素や、オブジェクトの存在しないプロパティの要素を取得しようとすると、undefinedと出力される。
undefinedは特別な値で、値が定義されていないことを意味する。
上記の存在しない要素を取得しようとした時の結果は以下の通り。
undefinedを避ける
undefinedとif文
undefinedと等しいかどうかで処理を分岐させる。
const characters = [・・・];
for(let i = 0; i < characters.length; i++) {
const character = characters[i];
if(character.age === undefined) {
// ageの値がundefined（定義されていない）時の処理
} else {
// ageの値が定義されているときの処理
}
}const characters = [
{name: "ルパン", age: 27},
{name: "次元", age: 29},
{name: "五エ門", age: 27},
{name: "不二子"}
];
for (let i = 0; i < characters.length; i++) {
console.log("--------------------");
const character = characters[i];
console.log(`名前は${character.name}です`);
if (character.age === undefined) {
console.log("年齢は秘密です");
} else {
console.log(`${character.age}歳です`);
}
}--------------------
名前はルパンです
27歳です
--------------------
名前は次元です
29歳です
--------------------
名前は五エ門です
27歳です
--------------------
名前は不二子です
年齢は秘密ですオブジェクトを要素に持つオブジェクト
オブジェクトの値には、文字列や数値だけではなく、オブジェクトを使うことができる。
以下は「character」というオブジェクトの「favorite」プロパティに対応する値にオブジェクトを使用している。
const character = {
name: "ルパン",
age: 27,
favorite: {
food: "ラーメン",
sports: "サッカー",
color: "若草色" favoriteのプロパティの値がオブジェクトになっている
}
};オブジェクトを呼び出す
このようなオブジェクトは、「オブジェクト名.プロパティ.プロパティ」のように呼び出す。
const character = {
name: "ルパン",
age: 27,
favorite: {
food: "ラーメン",
}
};
console.log(character.favorite);
console.log(character.favorite.food);{food: "ラーメン"}
ラーメン配列を要素に持つオブジェクト
オブジェクトの値には配列を使うこともできる。
const character = {
name: "ルパン",
age: 27,
food: ["ラーメン", "うどん", "焼きそば"]
}; １つのプロパティに複数の値を当てはめるとき、配列も使うことができる
コメント