BLOGブログ

BLOG

3

JavaScript 配列

Webサイト制作

配列とは

配列とは複数の値をまとめて管理するものです。

const numbers =[2,3,5];
const foods =[“rice”,”ramen”,”bread”];

console.log(foods); → 結果 [“rice”,”ramen”,”bread”] 
※配列の結果が出力されているが、配列の要素ではないので注意

インデックス番号

配列にはインデックス番号という番号がついています。インデックス番号は0から始まることに注意してください。

[“rice”,”ramen”,”bread”]  rice=0 ramen=1 bread=2がインデックス番号になります。

配列の要素を取得するにはインデックス番号を使用します。

console.log(foods[0]); → 結果 rice

配列の更新

foods[1] =”udon”;
console.log(foods[0]); → 結果 うどん

配列と上書きしたいインデックス番号を指定して代入すると値が更新される。

配列の繰り返し

配列の要素を繰り返し表示するにはfor文を使用します。

for(let i =0 ; i<3 ; i++){
console.log(foods[i]);
}

これでfoodsのインデックス番号0~2が表示されます。

繰り返しに便利なlength

配列.lengthを使用することで配列の要素数を取得することができます。
for文に使用すると

for(let i=0 ; i < foods.length ; i++){
console.log(foods[i]);
}

この記述を配列の繰り返し処理でよく使用される書き方なので、覚えておくのがよいでしょう。

オブジェクト

配列とよく似たものにオブジェクトがあります。
オブジェクトとは配列と同じように複数のデータをまとめて管理するのに使用されます。
配列は複数の値を並べて管理するのに対して、オブジェクトはそれぞれの値をプロパティと呼ばれる名前をつけて管理します。

オブジェクトの記述方法

オブジェクトは配列と違い{}で囲みます。
プロパティと値の間はコロン(:)で繋ぎ、要素と要素はコンマ(,)で区切ります。

const goods = {name:”ボールペン”,price:100}

オブジェクトの取得と更新

オブジェクトの取得にはオブジェクト.プロパティ名というようにドット(.)で繋げます。

console.log(goods.name); → 結果 ボールペン

更新方法はオブジェクト.プロパティ名 = 新しい値とすることで値の更新が可能です。

goods.price=500;
console.log(goods.price); → 結果 500

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

const items =[
{name:”pen”, price:”100円”},
{name:”ball”,price:”300円”}
];

記述方法は[{オブジェクト},{オブジェクト2}];と記述する

オブジェクトの取得

上記の配列はインデックス番号が0から順番に振られており、オブジェクトを取り出す際はインデックス番号を使用する

console.log(items[1]); → 結果 {name:”ball”,price:”300円”}

オブジェクトの値を取得

配列内のオブジェクトのプロパティの値を取り出すには配列[インデックス番号].プロパティ名を使用します。

console.log(items[1].name); → 結果 ball


RELATED

関連記事

コメント

この記事へのコメントはありません。

PAGE TOP