配列、オブジェクト【JavaScript】

配列

["値1", "値2", "値3"]

[10, 20, 30, 40, 50]

配列は複数の値をまとめて管理できます。それぞれの値を要素と呼びます。

要素は[ ](角括弧)で囲い、値と値は,(コンマ)で区切ります。

配列は定数に代入することができます。定数名は複数形にします。

画像はconsole.log(fruits)によって、配列が出力されています。

インデックス番号

配列の要素にはそれぞれ番号が付いています。インデックス番号は0から始まります。上の画像では"apple"が0、"banana"が1、"orenge"が2です。

[ ]でインデックス番号を指定することで、要素を一つずつ取り出すことも可能です。

要素の更新

画像のように値を再代入することができます。

fruits[0]がappleからstrawberryに変わりました。

配列とfor文

for文を使うことで要素を順に取り出すことができます。

for文の条件式は「iが0~2の間ループする」という意味です。

console.logでは変数[i]を呼び出しています。

lengthメソッド

lengthは配列の要素数を返します。

上の画像では要素が3つあるので3が出力されています。

for文の条件式にlengthを用いることで、配列の要素数を取得できます。

この記述にすると、配列の要素数が変わっても問題なく繰り返すことが可能です。

オブジェクト

{プロパティ1:"値1", プロパティ2:"値2"}

{プロパティ1:1000, プロパティ2:2000}

オブジェクトは値にプロパティと呼ばれる名前を付けて管理できます。

要素は{ }で囲みます。プロパティと値は:(コロン)で繋ぎます。

オブジェクトも定数に代入することができます。

オブジェクトの値のみを取り出すことも可能です。

取り出す際は(drink.name)のように「オブジェクト.プロパティ」とします。

要素の更新

オブジェクトも値に新しい値を再代入することができます。

オブジェクトを要素に持つ配列

const drink = [

　{name:"コーヒー", price:275},

　{name:"ミルクティー", price:357}

];

 

配列の要素にはオブジェクトを用いることができます。

オブジェクト同士は,(コンマ)で区切り、記述が長くなるのでそれぞれ改行します。

インデックス番号を指定することで、対応するオブジェクトを取り出せます。

(drink[1])で呼び出しています。

また、配列の中のオブジェクトの値を取り出すこともできます。

(drink[1].name)で呼び出しています。

undefined

存在しない要素を取得しようとすると「undefined」と表示されます。