メインコンテンツまでスキップ

配列

配列​

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と表示されます。

GitHub で表示このプログラムを実行する

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); // 田中,佐藤,鈴木,内藤

演習問題1​

  • 配列があります。その配列の要素の和を求めてみましょう。
ヒント

for〜of文を使って、配列のそれぞれの要素に対して操作を実行します。

注記

次の配列をテスト用に使ってください。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
解答例: 配列の要素の和
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let sum = 0;
for (const number of numbers) {
  sum += number;
}

document.write(`配列の合計値は ${sum} です。`);
GitHub で表示このプログラムを実行する

別解

for〜of文を使わず、次のように書くこともできます。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let sum = 0;
for (let i = 0; i < numbers.length; i += 1) {
  sum += numbers[i];
}

document.write(`配列の合計値は ${sum} です。`);
GitHub で表示このプログラムを実行する

演習問題2（発展）​

引数に配列を一つ取り、その配列の最大値を求める関数findMaxNumberを作成しましょう。

注記

テスト用に、ランダムに生成された次の配列を使ってください。

const array1 = [3, 6, 8, 5, 0];
const array2 = [-8, -7, -3, -1, -5];
解答例: 配列の最大値
const array1 = [3, 6, 8, 5, 0];
const array2 = [-8, -7, -3, -1, -5];

function findMaxNumber(numbers) {
  if (numbers.length === 0) return; // 空配列を除外
  let maxNumber = numbers[0];
  for (const number of numbers) {
    if (maxNumber < number) {
      maxNumber = number;
    }
  }
  return maxNumber;
}

document.write(
  `<p>配列[${array1}]の最大値は${findMaxNumber(array1)}です。</p>`,
);
document.write(
  `<p>配列[${array2}]の最大値は${findMaxNumber(array2)}です。</p>`,
);
危険

配列の長さにかかわらず配列の最初の値を使うような処理をする場合は、長さが0である空の配列を除外することを忘れないでください！

GitHub で表示このプログラムを実行する