web制作のしおり

日々の学習をアウトプットします。

19.JavaScriptって何?③ ~基本もようやく大詰め~

基本も大詰め

変数や関数、条件分岐についていままで進めてきました。

配列、オブジェクト、繰り返し処理について今日は進めていきます。

 

配列

配列でできることは「複数のデータを管理する」こと。

その方法は

  • インデックスという0からスタートする数字
  • 複数のデータ

これら2つを紐づけて、インデックスでデータ群を管理する

というものです。

 

具体的には、

 

配列名 = [データ0, データ1,  データ2]

 

のように書いて配列を定義します。

各データにアクセスする為には、

 

配列名[1]

 

のようにすることで、データ1を取得できます。

 

実際には、

 

const scores = [54, 32, 60]

 

のようにするとscoresという名前の配列が用意され、データが格納されます。

 

インデックス0番に54が

インデックス1番に32が

インデックス2番に60が

それぞれ対応しています。

例えば、インデックス1番の32を取得するには

 

scores[1]とすると

32が取得できるわけです。

 

これが インデックスで複数のデータを管理する「配列」 です。

 

オブジェクト

オブジェクトでできることは配列と同じく「複数のデータを管理する」こと。

その方法は

  • キー(プロパティ)と呼ばれる変数名
  • 複数のデータ

これら2つを紐づけて、キー(プロパティ)でデータ群を管理する。

というものです。

 

 

具体的には、

 

オブジェクト名 = {

  プロパティ名1 : 98,

  プロパティ名1 : 32,

  プロパティ名3 : 54,

}

 

のように書いて、オブジェクトを定義します。

各データにアクセスするには、

 

オブジェクト名.プロパティ名1

 

とすることで、98というデータにアクセスできます。

 

実際には、

 

scores ={

     math : 98,

     english : 32,

     science : 54

}

 

と書いて、scoresという名前のオブジェクトを定義します。

そして、98というデータを取得するには

 

scores.math

とすることでデータが取得できます。

 

配列とは違い、複数のデータを単純な順番(インデックス)ではなく、

意味を持たせて管理できるという点でオブジェクトの方が

管理性には優れているように思います。

規則的にデータにアクセスするには、配列の方が良さそうです。

それは次の繰り返し処理と関連しています。

 

繰り返し処理

繰り返し処理には

  1. 配列のデータすべてに対して、1つずつ処理をする
  2. カウンタを使って、指定した回数処理を行う
  3. 配列の関数を使って、データすべてに対して1つずつ処理をする

上記の3種類の方法があります。

 

配列のデータすべてに対して、1つずつ処理をする

 

for(let 変数名 of 配列名){

変数に対する処理

}

 

上記の処理内容をかみ砕くと

 

配列から1つデータを取り出して、

変数に代入して、その変数に対して処理をする。

です。

 

実際の例では、

 

for(let score of scores) {

 console.log(score)

}

 

と書くと、配列scoresのデータを1つずつ取り出して、

変数scoreに代入し、console.log(score)で代入した値を出力する。

 

 

カウンタを使って、指定した回数処理を行う

 

for (let カウンタ変数=初期値; 終了条件; カウンタの増減){

 処理

}

 

噛み砕いて書くと、

 

カウンタ変数が終了条件でなければ、処理を実行し、

処理を実行した後にカウンタの変数を増減させる。

終了条件に合致するまで処理を繰り返す。

 

実際は

for(let count = 0; count < 5; count++){

  console.log(count)

}

と書くと、count変数のデータが5未満の間は、

count変数の値を出力して、countの値をプラス1をする。

 

配列の関数を使って、データすべてに対して1つずつ処理をする

 

配列.forEach(function (引数) {

引数を使った処理

})

 

噛み砕いて書くと、

配列から1つずつデータを取り出して、引数に代入。

引数を使った処理を、配列のデータすべてに実施する。

 

実際は

 

scores.forEach(function (score) {

console.log(score)

})

 

と書くと、

scores配列から1つずつデータを取り出して、引数scoreに代入。

そして、scoreのデータを出力する。

これをscores配列のデータすべてに対して実施する。

 

今日のまとめ

  • 配列はインデックスとデータを紐づけて複数のデータを管理する
  • オブジェクトはキーとデータを紐づけて複数のデータを管理する
  • 配列はデータすべてに対する処理と相性が良い
  • オブジェクトは意味のあるデータ管理ができる
  • 繰り返し処理には大きく3種類ある

 

ボリュームが多いですね。一度で理解しきるのも難しいと思うので、

繰り返し使って覚えていきたいと思います。

 

では、また