配列

複数の値をまとめて扱う

例えば、果物の名前について値がいくつもあるとき、それぞれを定数(または変数)として定義するより、「果物の名前一覧」といったように関連する値をまとめて管理するほうが便利。

const fruit1 = "apple";
const fruit2 = "banana";
const fruit3 = "orange";
つにまとめたい

配列とは

複数の値をまとめて管理するには、配列を使う。

配列は、[値1,値2,値3]のように作る。

配列に入っているそれぞれの値のことを要素と呼ぶ。

[値1,値2,値3]  カンマで区切る
文字列をまとめた配列
["apple", "banana", "orange"]

数値をまとめた配列
[21, 43, 12]

配列を定数に代入する

配列も1つの値なので、定数に代入することができる。

このとき、配列に代入する定数名は、慣習上複数形にすることが多いので覚えておく。

const fruits = ["apple", "banana", "orange"];
console.log(fruits);
["apple", "banana", "orange"]  配列が出力される

インデックス番号

配列の要素にはそれぞれインデックス番号という番号がついている。

なお、インデックス番号は、0から始まるので注意

["apple", "banana", "orange"]
    0        1         2    インデックス番号  

配列の要素の取得

配列[インデックス番号]とすることで配列の要素を取得することができる。

例えば、「apple」の取得はappleのインデックス番号である0を用いて、fruits[0]とすることで可能。

const fruits = ["apple", "banana", "orange"];
   インデックス番号  0         1         2
console.log(fruits[0]);
console.log(fruits[2]);
apple
orange

配列の要素を更新する

要素に値を代入することで、その要素を上書きすることができる。

const fruits = ["apple", "banana", "orange"];
   インデックス番号  0         1         2
cosole.log(fruits[0]);
fruits[0] = "grape";インデックス番号0の要素の値を更新
console.log(fruits[0]);
apple
grape

値の再代入と更新の違い

一度、定義した定数には、配列自体を再度代入することはできないが、配列の要素を更新することはできる。

配列の要素を更新する

const fruits = ["apple", "banana", "orange"];
cosole.log(fruits[0]);
fruits[0] = "grape";要素の値を更新できる
console.log(fruits[0]);

定数に配列を再代入する

const fruits = ["apple", "banana", "orange"];
cosole.log(fruits[0]);
const fruits = ["grape"];定数に再代入することはできない
console.log(fruits[0]);

配列とfor文

配列に対して繰り返し処理を行うことがよく出てくる。

配列fruitsの要素数が3の場合、すべての要素を出力するには以下のように書く必要がある。

const fruits = ["apple", "banana", "orange"];
console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);

これをfor文で書き直すと以下のようになり、配列の中に格納されているすべての値を簡単に出力することができる。

この際、変数の値はから始めることに注意。

const fruits = ["apple", "banana", "orange"];
for (let i = 0; i < 3; i++) {
      iが0~2の間ループする
  console.log(fruits[i]);
}              変数iを用いて要素を取得

length(レングス)

配列.lengthとすることで、配列の要素の数を取得できる。

const fruits = ["apple", "banana", "orange"];
console.log(fruits.length);
                ドットでつなげる
3

また、lengthを用いれば以下の「i < 3」の部分を「i < fruits.length」に書き換えることができる。

配列の要素数が変わっても問題なく繰り返すことができるので便利。

配列の繰り返し処理でよく使う書き方なので覚えておく。

const fruits = ["apple", "banana", "orange"];
for (let i = 0; i < 3; i++) {
  console.log(fruits[i]);
}

↓↓↓

const fruits = ["apple", "banana", "orange"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

コメント

タイトルとURLをコピーしました