🥩

【JavaScript　配列】インデックスを使ってお買い物に行こう

2024/04/04に公開

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

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

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

var nerimono = new Array(3);

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

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

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

インデックスの特徴

かまぼこはインデックス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']
];

先ほどと異なり[]の中に[]が入っています。これを二次元配列と呼びます。
イメージしにくいので絵にしてみました。

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

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

今度は配列を列で見てみましょう。

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

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

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

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

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