配列から1つ取り出す

01 / 06

中身をひとつだけ使いたい

配列をまるごと表示するのはできたけれど、ふだん使いたいのは中のひとつだよね。「2つ目の果物だけ表示したい」というように。

配列の中身には番号が振られていて、その番号を指定すれば取り出せるよ。

02 / 06

配列の後ろに [番号] と書くと、その位置の値が取り出せる。この番号をインデックスと呼ぶよ。

注意したいのは、1 ではなく 0 から始まること。1つ目が 0、2つ目が 1、3つ目が 2 だよ。

const fruits = ["りんご", "みかん", "もも"];console.log(fruits[0]);console.log(fruits[2]);

実行結果

りんご
もも

03 / 06

取り出したあとは、配列だったことを忘れていい。ただの文字列・ただの数値として扱えるよ。

計算にも使えるし、テンプレートリテラルにも埋め込める。

const scores = [80, 95, 60];console.log(scores[0] + scores[1]);console.log(`さいしょは${scores[0]}てん`);

実行結果

175
さいしょは80てん

04 / 06

ここが大事なところ。[ ] の中には数値だけでなく変数も書ける。

つまり変数の値を変えれば、取り出す場所も変わる。この性質が、次のレッスンで繰り返しと組み合わさると一気に強くなるよ。

const colors = ["あか", "あお", "きいろ"];let i = 1;console.log(colors[i]);i++;console.log(colors[i]);

実行結果

あお
きいろ

05 / 06

配列に無い番号を指定するとどうなるだろう？エラーにはならず、undefined（値が無い）が返ってくるんだ。

「3個しか無い配列の4番目」のように、範囲をこえた番号を指定したときに起きる。エラーで止まってくれないぶん、気づきにくいバグの原因になるよ。

const fruits = ["りんご", "みかん", "もも"];console.log(fruits[3]);console.log(fruits[100]);

実行結果

undefined
undefined

06 / 06

「最後の1つ」を取り出したいとき、要素数を毎回数えるのは面倒だ。配列は .length で要素の個数が分かるので、length - 1 が最後の番号になる。

1つ目が 0 から始まるぶん、最後の番号は個数より1つ小さいのがポイントだよ。

const fruits = ["りんご", "みかん", "もも"];console.log(fruits.length);console.log(fruits[fruits.length - 1]);

実行結果

3
もも