男子プログラマーになりたいやつ

未経験から一端のエンジニア目指し日々勉強中です。

JavaScriptで配列を作る・ループ処理を行う

<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a> オブジェクト編

f:id:TomozQ:20201027132042j:plain

JavaScript備忘録 Vol.4

目次
  • 配列を作る
  • 要素にアクセスする
  • ループ処理との組み合わせ




今回もJavaScriptの記事になっています。

配列を作る

例えば商品の金額を管理したい場合

{
  const price1 = 120;
  const price2 = 110;
  const price3 = 100;
}

としても良いですが、

同じ定数名で管理した方が便利な場合があります。


ここで配列を作ってあげます。

ついでに結果をコンソールに表示して見てみましょう

配列は[a, b, c];のように[ ]の中にカンマ区切りで書いていきます。

したがって今回の場合は

const prices = [120, 110, 100];

console.log(prices);

となり、出力結果は

f:id:TomozQ:20201026204746p:plain

となります。

また一番左の三角マークをクリックすると配列の中身を見ることができ、

f:id:TomozQ:20201026204932p:plain

今回の場合は

0番目120
1番目110
2番目100

となっていることがわかります。

配列では番号は0番目から始まります。

この0番目1番目2番目といった数字をインデックス番号添字なんて言ったりします。


要素にアクセスする

次はこの配列に格納されている要素へのアクセスの仕方を見ていきましょう

では真上の例文で見ていきましょう

const prices = [120, 110, 100];

console.log(prices);

例えばこれで、インデックス番号が1の要素のみをコンソールに出力したいとします。

その場合は

console.log(prices[1]);
のように配列名[インデックス番号]とすることでその要素を取得することができます。

結果はこんな感じですね。

f:id:TomozQ:20201026204942p:plain

また、取得した要素を変更することもできます。

const prices = [120, 110, 100];
prices[1] = 200;

console.log(prices);

こんな感じで要素に対し再代入を行うことで要素の値が変わります。

f:id:TomozQ:20201026204952p:plain インデックス番号1の要素が200になってますね

また

今回pricesconstを用い定数定義をしているにも関わらず、配列内の要素の値が変更されてしまっています。
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]が順番に出力されていくわけですね。

出力結果がこちら

f:id:TomozQ:20201026205004p:plain

さらに、一緒にインデックス番号も表現してみましょう。

今回このfor文の中でのインデックス番号はiになりますので

const prices = [120, 110, 100];
for(let i = 0; i < prices.length; i++){
  console.log(`Price${i}: ${prices[i]}`);
}

このようにテンプレートリテラルを使ってiを出力してあげればいいですね

f:id:TomozQ:20201026205015p:plain

簡単でしたね!




今回はここまで

次回は・・・まだまだJS!

それではまた次回!