配列
配列
JavaScript における配列は、複数の値を並べて一つにまとめたオブジェクトです。[ から ] で囲まれた部分は配列を生成する式になります。
const studentNames = ["田中", "佐藤", "鈴木"];
これで、3 つの文字列値 "田中", "佐藤", "鈴木" が順番に並んで格納された配列が作成され、変数 studentNames に格納されました。
配列を使用するには、配列を生成する際と同じく [, ] 記号を用います。この括弧に囲まれた部分に数値（インデックス）を指定すると、配列の要素にアクセスできます。
document.write(studentNames[0]); // 田中
document.write(studentNames[2]); // 鈴木
studentNames[1] = "内藤";
配列のインデックスは 0 から始まります。このため、2 番目の要素のインデックスは 1 で、n 番目の要素のインデックスは n - 1 になります。
また、長さが N の配列の最後の要素のインデックスは N - 1 になります。
[ 〜 ] の中には非負整数値になる任意の式を記述できます。変数を使用することも可能です。
const six = 6;
document.write(studentNames[six / 2 - 1]); // 鈴木
課題
次のプログラムを実行すると何と表示されるでしょうか。
document.write([3, 2, 1][0]);
解答
[3, 2, 1] で配列が生成され、[0] で 0 番目の要素が指定されているので、3 と表示されます。
for 〜 of 文
for 〜 of 文を用いると、配列の要素を順番に取り出す処理を簡単に記述できます。
const studentNames = ["田中", "佐藤", "鈴木"];
for (const studentName of studentNames) {
document.write(studentName);
}
このプログラムを実行すると、 田中佐藤鈴木 と表示されます。
for 〜 of 文の構造は次の通りです。
for (変数の宣言/変数名 of 配列) {
処理;
}
配列の要素を順番に取り出し、 of の左側に指定された変数に設定してから、内部の処理を実行していきます。
配列のプリセット変数/関数
JavaScript の配列には、便利な変数や関数が定義されています。正確にはオブジェクトとクラスの回でそれぞれ扱うプロパティ、メソッドというものですが、今のところは特殊な書き方をする変数や関数であると考えればよいでしょう。
配列.length 変数
配列.length という変数には、指定した配列の長さが自動的に反映されます。
const studentNames = ["田中", "佐藤", "鈴木"];
document.write(studentNames.length); // 3
const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
document.write(numbers.length); // 10
配列.push 関数
関数.push関数 は、指定した配列の末尾に新しい値を追加する関数です。
const studentNames = ["田中", "佐藤", "鈴木"];
studentNames.push("内藤");
document.write(studentNames); // 田中,佐藤,鈴木,内藤
課題
配列.push関数を用いて、フィボナッチ数列の配列を作ってみましょう。- 作成した配列の各要素を
for ～ of文を用いて出力してみましょう。 - 作成した配列の各要素を、通常の
for文と配列.length変数を用いて出力してみましょう。
変数 i を 0 から (作成した配列の length 変数の値) - 1 まで順番に増やしながら、配列の i 番目の要素を表示しましょう。
解答
// f.push 関数を用いて、フィボナッチ数列の配列を作成
const f = [1, 1];
for (let i = 0; i < 100; i += 1) {
f.push(f[f.length - 1] + f[f.length - 2]);
}
// 作成した配列の各要素を for ～ of 文を用いて出力
for (const item of f) {
document.write(item);
}
// 作成した配列の各要素を、通常の for 文と f.length 変数を用いて出力
for (let i = 0; i < f.length; i += 1) {
document.write(f[i]);
}