MORIAWASE

好きなもの、好きなだけ、盛り合わせ

今日の人気記事です!

配列とオブジェクトとメソッドを勉強したから教えてみる。

      2016/05/31

ファンクションに続き、配列object(オブジェクト)method(メソッド)も勉強してみました。すべてjavascriptです。

ファンクション(関数)のことが理解できると、すんなりと頭に入りますね。

はい。というわけで、昨日勉強したことを早速ここで熱く語ってみます。

※今回の記事では<script>タグは割愛し、関数だけ紹介しています。実行する時は<script>タグで囲ってみてください。

配列

配列とは、値がグループ化されたものです。配列の基本的な形がこちら。

わかりやすいですね。あとは、こちらの「hairetsu」という変数の中に様々な値(数字や文字列など)を入れるだけ。

これで、「hairetsu」という変数の中に、「あ」と「い」と「う」と「え」と「お」が入りました。すべて文字列です。

 

値を取り出す時は、配列の名前の後に[]をつけて、「0〜」の数字を指定します。左から順番に0から始まる(1ではない)ことに注意です。

今回の例だと、「あ」が0番目になり、「お」が4番目になります。

上記のコードだと、「え」がコンソールに表示されます。

hairetsu-1

 

配列のすべての値を取り出すとこんな感じ。

hairetsu-2

配列の中に配列を入れる

配列の中に配列を追加することもできます。基本の形がこれ。

カンマで区切れば、いくつでも追加することができます。

取り出す時は先ほどと同じ考えです。

  • あ行→0
  • か行→1
  • さ行→2

「い」を取り出す時は0番目の1番目、「せ」を取り出す時は2番目の3番目、となります。

hairetsu-3

 

この配列の中の配列も無限に追加できるので、こんなこともできます。

オブジェクト

オブジェクトとは、名前と値がグループ化されたものです。基本的な形がこちら。

配列や無名関数と同じような形ですね。この中に名前と値(文字列や数字など)を入れることができます。左が名前、右が値です。

↑このように、名前の後に「:」をつけ、その後ろに値を書きます。この場合では…

  • mojiretsuと”文字列”
  • suujiと60

がセットになっています。ちなみに、名前と値がセットになったものを「プロパティ」、名前を「プロパティ名」と呼びます。

 

取り出し方は簡単で、実行したい処理の後に変数名[“名前(プロパティ名)”])を追加するだけ。

または、変数名と名前(プロパティ名)を「.」で繋げてもOKです。こっちの方がよく見かける気がします。

object-1

メソッド

メソッドとは、オブジェクト内の関数のことです。難しいように思えますが、全くそんなことはありません。

オブジェクトの中に、ファンクションがあるだけです。

名前と値がグループ化されたもの(プロパティ)の他に、関数も入れることができるんです。実行する時もこれまでの考え方と同じです。

もちろん、先ほどのように省略可能。

 

実際にメソッドを実行してみましょう。こんな感じのコードを用意しました。

「likefood」というオブジェクトの中に3つのプロパティと、1つのメソッドがあります。それらがグループ化されたものが「likefood」です。

a(メソッド)を実行すると、likefoodの中のsaladaの値をコンソールに表示してくれます。

method-1

 

やってることはこれと同じなんですけどね。

 

また、引数を使うこともできます。ファンクションの時に理解したので大丈夫ですね。

method-2

this

でも、いちいち「likefood.salada」とか「likefood.ramen」とか、変数名を書くのって面倒じゃないですか?

途中で「あ、やっぱり”lovefood“っていう変数名にしよう♪」なんてことになったら、メソッドの変数名もすべて変えなければいけません。

そんな時に使いたいのが「this」です。そのメソッドが入っている変数名の代わりに使うことができます。

 

今回の例だと、「likefood」の代わりに「this」を使うことができます。

まとめ

勉強し始めたばかりですが、javascriptの80%くらい理解できたような気がします。

ファンクションしか知らなかったため最低月給は25万円でしたが、これで月給30万円はいくはずです。

よーし!早速アプリの開発しちゃうぞー♪(まだ早い)

ドットインストールで勉強するなら、こちらの記事もおすすめ!

atom-1
これは便利すぎる。なぜ今まで使ってなかったんだろうか。 今までコードエディターはMac対応のBrackets(ブラ

 - プログラミング学習