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

配列

配列​

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

基礎演習​

要素の和​

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

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 で表示このプログラムを実行する

中級演習​

配列の最大値​

引数に配列を一つ取り、その配列の最大値を求める関数 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 で表示このプログラムを実行する