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

配列

配列​

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

基礎課題​

連続表示​

  • 引数に与えられた配列の、要素の和を取る関数 sumArray を書いてみましょう。
ヒント

変数 i を 0 から (作成した配列の長さ) - 1 まで順番に増やしながら、配列の i 番目の要素を足してみましょう。

解答
const array1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const array2 = [-3, -1, 9, -10, 3, 7, 6, 1, 0, 5];

function sumArray(array) {
  let sum = 0;
  for (let i = 0; i < array.length; i += 1) {
    sum += array[i];
  }
  return sum;
}

document.write(`sum of array1: ${sumArray(array1)} <br>`);
document.write(`sum of array2: ${sumArray(array2)} <br>`);
GitHub で表示このプログラムを実行する

中級課題​

最大値​

引数にひとつの配列が与えられたとき、その配列の最大値を求める関数 findMax を作成しましょう。

注記

テスト用に、ランダムに生成された以下の配列を使ってよいものとします。

const array1 = [3, 6, 8, 5, 0];
const array2 = [-8, -7, -3, -1, -5];
const array3 = [5986, 7202, 9347, 3593, 8166, 662, 2235, 9323, 2240, 943];
const array4 = [-878, -40, -324, -410, -592, -610, -880, -65, -423, -32];
ヒント

今までのように仮の初期値を置く方法では、配列の各値が非常に大きな負の値であった場合に仮の初期値が返ってきてしまいます。

どうすればいいでしょうか？

解答

配列の最初の値を初期値に設定することで解消します。

const array1 = [3, 6, 8, 5, 0];
const array2 = [-8, -7, -3, -1, -5];
const array3 = [5986, 7202, 9347, 3593, 8166, 662, 2235, 9323, 2240, 943];
const array4 = [-878, -40, -324, -410, -592, -610, -880, -65, -423, -32];

function findMax(array) {
  if (array.length === 0) return; // 空配列の例外処理
  let maxValue = array[0];
  for (let i = 0; i < array.length; i += 1) {
    if (array[i] > maxValue) maxValue = array[i];
  }
  return maxValue;
}

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

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

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