JavaScriptのオブジェクトの復習してみませんか？
プログラミング言語を学び始めて最初に学ぶと思われる「JavaScript」。
その中でも「オブジェクト」の使い方をおさらいしたいと考えていませんか？
オブジェクトを使った配列の書き方を復習したい
この様なJavaScriptの勉強をはじめた人や、使い方を忘れてしまった人向けのオブジェクトの復習となっています。
メインは、私がJavaScriptのオブジェクト・配列を復習する為に作成した記事なので、もしかすると役に立たない内容かもしれません。
その時は、温かく見守ってください。
スポンサードサーチ
オブジェクトってどういう意味？
オブジェクトとは、文字や数値などのプロパティを集めたものです。
複数のプロパティを集めた箱のようなものです。
「let」や「const」で、変数や定数を定義する際に値を代入しますが、複数のプロパティと値を代入する際にこのオブジェクトを代入すれば、色々なプロパティを持った変数・定数になります。
実際に、オブジェクトを使った例を紹介します。
JavaScriptのconstにオブジェクトを代入する①
オブジェクトのシンプルな例です。
const animals = [
{name: "ライオン", age: 10},
{name: "コアラ", age: 15}
];
// animalsの1つ目のプロパティを出力する
console.log(characters[0]);
// animalsの2つ目のプロパティの「name」の値を出力する
console.log(characters[1].name);
「const 定数名 =」で定数名を指定しています。
コード内の{}で囲まれた中身をオブジェクトと呼びます。
オブジェクト内の「name:」「age:」はプロパティと呼び、右はプロパティに対する値と呼びます。
オブジェクト全てを出力する際は、「console.log(定数名[インデックス番号]);」で出力します。
オブジェクト内の要素のみ出力する際は、「console.log(定数名[インデックス番号].プロパティ名);」で出力します。
スポンサードサーチ
JavaScriptのconstにオブジェクトを代入する②
オブジェクトにオブジェクトを入れる事も出来ます。
const cafe = {
name: "REALINEカフェ",
hours: {
// hoursの値に指定されたオブジェクトを代入してください
opentime: "10:00",
closetime: "20:00"
}
};
// 「店名:〇〇」を出力する方法
console.log(`店名:${cafe.name}`);
// 「営業時間:〇〇から△△」を出力する方法
console.log(`営業時間: ${cafe.hours.opentime}から${cafe.hours.closetime}`);
「const cafe」で定数名を指定します。
「cafe」の中に代入するオブジェクトとして、「name」と「hours」のプロパティを指定します。
更に「hours」プロパティの中にオブジェクト「{}」を設置し、「opentime」と「closing」のプロパティを設置します。
店名と営業時間の出力は、テンプレートリテラルで文字を連結して出力しています。
この様に、オブジェクトの中にオブジェクトを記述する事も出来ます。
JavaScriptのconstにオブジェクトを代入する③
オブジェクトにオブジェクトの代わりに、配列で文字を追加する事も出来ます。
const cafe = {
name: "REALINEカフェ",
// hoursに配列の値を使用する事も出来ます。
hours: ["OPEN: 10:00","CLOSE: 20:00"]
};
// 「店名:〇〇」を出力する方法
console.log(`店名:${cafe.name}`);
// 「営業時間:〇〇から△△」を出力する方法
console.log(`営業時間: ${cafe[0]}から${cafe[1]}`);
「const cafe」で定数名を指定します。
「cafe」の中に代入するオブジェクトとして、「name」と「hours」のプロパティを指定します。
更に「hours」プロパティの中に配列で文字の値を追加します。
店名と営業時間の出力は、テンプレートリテラルで文字を連結して出力しています。
この様に、オブジェクトの中にオブジェクトを記述する事も出来ます。
スポンサードサーチ
JavaScriptの習得は地道な努力が必要
いかがでしたか？
少しは、JavaScriptのlengthプロパティの使い方は復習出来ましたか？
他にもプログラミングの構文などの復習記事が有りますので、JavaScriptをはじめとするプログラミングに興味が有ればご覧ください。
JavaScriptのfor文の使い方：復習編
JavaScriptのlengthプロパティの使い方：復習編
プログラミングスクールに興味が有る方は、こちらをどうぞ。
