【JavaScript入門】オブジェクトを使ってみよう！

オブジェクト

オブジェクトも配列と同じようにグループ化されたデータになります。配列は値のみがグループ化されていましたが、オブジェクトでは名前と値のペアがグループ化されています。

var user = {
email: "DAI@gmail.com",
score:80
};
console.log(user["email"]);

プロパティ

上述したemail: "DAI@gmail.com"やscore:80など名前と値のペアのことをプロパティと呼びます。また、email、scoreをプロパティ名と呼びます。プロパティとプロパティの間には「,」カンマが必要です。

プロパティへのアクセス

2つ方法があります。配列と同じように「user[]」として、添字をプロパティ名にすれば OK です。

console.log(user["email"]);

もしくは大括弧を使わずに「.」で続けて記載してもOKです。

console.log(user.email);

値の書き換え

オブジェクトも値の書き換えが可能です。 user の score が 100 点だったという場合は「user.score = 100;」とすればOKです。

オブジェクトのメソッド

オブジェクトはプロパティの値に関数を持つことが可能です。オブジェクトのプロパティの値に関数が来た場合、その関数のことをオブジェクトの「メソッド」と呼びます。

var user = {
email: "DAI@gmail.com",
score:80,
greet: function(name) {
console.log("hello," + name);
}
};
user.greet("TOM");

this

メソッドの中で使える「this」というキーワードがあります。メソッド内で this というキーワードを使うと、今自分がいるオブジェクトを参照することができます。例えば、このオブジェクトの email を表示したい場合、下記のように書けばOKです。

console.log("hello, " + name + "from " + this.email);

this は user を指し、「this.email」で「"DAI@gmail.com"」が返ってきます。

組み込みオブジェクト

あらかじめJavaScriptが用意してくれているオブジェクトがあります。それを使うと便利なメソッドやプロパティが使えるようになります。

String オブジェクト

文字列オブジェクトを作るには、「new String("…");」としてあげて、何の文字列に対して作りたいかを引数で渡してあげます。

var s = new String("DAI");

そうすることで s に対して色んなメソッドやプロパティが使えるようになります。

どのようなメソッドやプロパティが使用できるかについてはMDNのサイトを参照願います。

developer.mozilla.org

代表的なプロパティ、メソッド

length

文字数を返してくれます。

 var s = new String("DAI");
console.log(s.length);

replace

文字を置き換えることができます。

var s = new String("DAI");
console.log(s.replace("I","i"));

substr

部分文字列を返してくれます。

var s = new String("DAI");
console.log(s.substr(1,2)); 

※添字は０から始まるので「AI」となります。

文字列リテラル

下記のようにnew Stringを省略しても結果は同じになります。

var s = "DAI";
console.log(s.substr(1,3)); 

「文字列オブジェクト」と「文字列リテラル」は異なるものですが、文字列リテラルにメソッドやプロパティを付けるとJavaScript側で「文字列オブジェクトを使いたい」と解釈して、一瞬文字列オブジェクトに変換してくれるため実行結果が同じになります。

Arrayオブジェクト

文字列の時と同じようにnew を使って下記のようにすればOK です。

var a = new Array(100, 300, 200);

どのようなメソッドやプロパティが使用できるかについてはMDNのサイトを参照願います。

developer.mozilla.org

代表的なプロパティ、メソッド

length

配列に使うと要素の個数を返してくれます。

要素を追加する命令

先頭に追加　・・・　unshift

末尾に追加 　・・・ pop

先頭から除去 ・・・ shift

末尾から除去 ・・・  push

途中に追加　  ・・・ splice

例）100、300、200 の後に 500 を追加したい場合は「a.push(500);」とすれば OK です。

var a = new Array(100, 300, 200);

a.push(500); 

console.log(a);　//結果は100、300、200、500 となります。

 例）spliceは第 1 引数に追加や削除をしたい場所を指定し、第 2 引数には、削除したい要素の数を指定します。300、200を削除し、800,1000を追加したい場合は下記のようになります。

var a = new Array(100, 300, 200);
a.splice(1,2,800,1000); 
console.log(a);　//結果は100、800、1000 となります。

Mathオブジェクト

数学的な値を算出するにはMathオブジェクトを使用します。Mathに関してはnew する必要がありません。どのようなメソッドやプロパティが使用できるかについてはMDNのサイトを参照願います。

developer.mozilla.org

代表的なプロパティ、メソッド

PI

円周率を求めることができます。

console.log(Math.PI);

ceil

実数を切り上げてくれます。

console.log(Math.ceil(5.3)); //結果は6

floor

実数を切り下げしてくれます。

console.log(Math.floor(5.3)); //結果は5

round

四捨五入してくれます。

console.log(Math.round(5.3)); //結果は5

random

ランダム値を生成してくれます。

console.log(Math.random(5.3));

Dataオブジェクト

日付のオブジェクトですが、「new Date();」とすると現在時刻のオブジェクトが取得できます。どのようなメソッドやプロパティが使用できるかについてはMDNのサイトを参照願います。

注意

JavaScript では、月は 0 から始まるため、2 月は 1 と指定します。2 月 11 日 10 時 20 分 30 秒の場合、下記の記載となります。

var d = new Date(2014, 1, 11, 10, 20, 30);

現在時刻を取得して現在時刻の日付オブジェクトを作りそこに対してメソッドを使うと、年などを取得することができます。

var d = new Date();

console.log(d.getFullYear());　//年を取得

console.log(d.getMonth());　//１０月に実行した場合、結果は9

console.log(d.getTime());　//基準日からの経過ミリ秒を取得

windowオブジェクト

ブラウザ自体も window というオブジェクトで JavaScript から扱うことができます。

例）オブジェクトのプロパティを表示

console.dir(window);

例）window の高さを表示

console.log(window.outerHeight);

例）今見ているページから別の URL に飛ばす

window.location.href = 'URL';