JavaScriptで配列を作る・ループ処理を行う
JavaScript備忘録 Vol.4
目次
- 配列を作る
- 要素にアクセスする
- ループ処理との組み合わせ
今回もJavaScriptの記事になっています。
配列を作る
例えば商品の金額を管理したい場合
{ const price1 = 120; const price2 = 110; const price3 = 100; }
としても良いですが、
同じ定数名で管理した方が便利な場合があります。
ここで配列を作ってあげます。
ついでに結果をコンソールに表示して見てみましょう
配列は[a, b, c];
のように[ ]
の中にカンマ区切りで書いていきます。
したがって今回の場合は
const prices = [120, 110, 100]; console.log(prices);
となり、出力結果は
となります。
また一番左の三角マークをクリックすると配列の中身を見ることができ、
今回の場合は
0番目
が120
1番目
が110
2番目
が100
となっていることがわかります。
配列では番号は0番目から始まります。
この0番目1番目2番目といった数字をインデックス番号
、添字
なんて言ったりします。
要素にアクセスする
次はこの配列に格納されている要素へのアクセスの仕方を見ていきましょう
では真上の例文で見ていきましょう
const prices = [120, 110, 100]; console.log(prices);
例えばこれで、インデックス番号が1の要素のみをコンソールに出力したいとします。
その場合は
console.log(prices[1]);
のように配列名[インデックス番号]
とすることでその要素を取得することができます。
結果はこんな感じですね。
また、取得した要素を変更することもできます。
const prices = [120, 110, 100]; prices[1] = 200; console.log(prices);
こんな感じで要素に対し再代入を行うことで要素の値が変わります。
インデックス番号1の要素が200
になってますね
また
今回prices
をconst
を用い定数定義をしているにも関わらず、配列内の要素の値が変更されてしまっています。
scores = 10;
といったような再代入を行うことはできないのですが、配列の要素への再代入はできることとなっていますので注意が必要です。
ループ処理との組み合わせ
ループ処理については前の記事で紹介しているので、ループ処理部分の解説は省きます。
では例文
今回出力にはテンプレートリテラルを使用していきます。
const prices = [120, 110, 100]; for(let i = 0; i < prices.length; i++){ console.log(`Price: ${prices[i]}`); }
そんなに難しくないですよね
今回初めて出てきたのがprices.length
でしょうか
配列名.length
とすることで配列の要素数を取得することができます。
今回の場合は配列には3つの要素が入っていますので
例えば
console.log(prices.length)
とすることで3
が出力されます。
それをfor文の範囲を指定する部分に用いているので
iは3未満
となります。
つまりコンソールにはprices[0]
, prices[1]
, prices[2]
が順番に出力されていくわけですね。
出力結果がこちら
さらに、一緒にインデックス番号も表現してみましょう。
今回このfor文の中でのインデックス番号はi
になりますので
const prices = [120, 110, 100]; for(let i = 0; i < prices.length; i++){ console.log(`Price${i}: ${prices[i]}`); }
このようにテンプレートリテラルを使ってiを出力してあげればいいですね
簡単でしたね!
今回はここまで
次回は・・・まだまだJS!
それではまた次回!