🥩 【JavaScript 配列】インデックスを使ってお買い物に行こう
作成日: 2021/08/28
1

買い物にやってきました。
この店は配列で商品を並べている不思議なスーパーです。

😀<今日は「かまぼこ」と「国産牛肉」と「だんご」を買うぞ〜

まずはかまぼこを買うためにねりものコーナーへ移動します。
ねりものコーナーを見つけました。

var nerimono = new Array(3);

nerimono[0] = 'かまぼこ';
nerimono[1] = 'はんぺん';
nerimono[2] = 'ちくわ';

ねりものコーナーの什器(配列)に並べられているかまぼこを自分のカゴに入れましょう。
でも入れ方がわかりません、はんぺんやちくわはいらないのです。

配列はインデックスを使ってものを取り出すことができます。

インデックスの特徴

  • インデックスとは配列の中身に勝手についている番号のこと(勝手についているものなので私たちが何か手を加える必要は無い)
  • 0から始まるので、3つものが入っていてもインデックスは0、1、2となる(コード内のnerimono[0]に注目! )

かまぼこはインデックス0ですね。console.logで買い物カゴに入れておきましょう。

console.log(nerimono[0]);

次は国産牛肉を探しましょう。
どうやらこのスーパーは精肉コーナーの店員さんに欲しいものを直接言う必要があるそうです。

精肉コーナーの什器(配列)を発見しました。
ねりものコーナーより狭いので商品が一行にぎゅっとまとまって並んでいます、インデックスも見当たりません。
しかし取り出し方はそれほど大きく変わりません。

nerimono[0]のようにお肉にもそれぞれインデックスがついています。
一番左から0、1、2ですね。

var niku = ['ブラジル産鶏肉', '国産牛肉', 'アメリカ産豚肉'];

😀<国産牛肉は2番目にいるからインデックスは2・・・?
👨<2だね?アメリカ産豚肉をどうぞ
😀<間違えました!やっぱり1をお願いします

console.log(niku[1]);

無事に国産牛肉をカゴに入れられました。

最後は今日のおやつだんごを買うために和菓子コーナーへ移動します

😀<和菓子コーナーはすごく狭いな・・・

var oyatsu;
oyatsu = [
    ['daifuku', 'dango'],
    ['manjyu', 'yokan']
];

先ほどと異なり[]の中に[]が入っています。これを二次元配列と呼びます。
イメージしにくいので絵にしてみました。
スクリーンショット 2021-08-28 15.58.33.jpg

ここでだんごがどこにいるのかよく見てみましょう。
だんごは1段目に置いてありますね。
これをインデックスにあてはめると・・・
wagasi-02.jpg

😀<1段目のインデックスは0か。でも2種類並んでいるからだんごだけ欲しいんだよね。だんごのインデックスはなんだろう?

今度は配列を列で見てみましょう。
wagasi-03.jpg

団子のインデックスは1ですね。

つまり、1段目のインデックス0+列のインデックス1でだんごをカゴに入れられそうです。

console.log(oyatsu[0][1]);

無事にだんごを取り出せました!
お買い物終了です。

😀<配列はイメージしにくいから買い物をするのも一苦労だった・・・書き方(商品の並べ方)も複数あるし。


Javascrip勉強中。CodeCampやってます。ド文系の美術専門学校卒です。