JavaScript 配列の仕組みと使い方のサンプル

JavaScriptの配列の仕組みと使い方のサンプルです。

仕組み	配列とは
作成	初期化して作成 / 空の配列を作成 / 要素の数を宣言して作成
取得	要素を取得(for文,forEach,for...of文)
	要素数・文字列を返す(length,toString,join) / 値を切り出す(slice)
	要素を検索(indexOf)・配列か(isArray) / 配列のコピーと連結(concat)
更新	要素を追加・変更(push,unshift,添字) / 要素を削除(shift,pop,空の配列)
	要素を追加・変更・削除(splice)
並び替え	要素を逆順・昇順にソート(reverse,sort)
二次元配列	二次元配列を作成 / 入れ子の構造の配列
関数	配列で関数を使用(forEach/map/filter/reduce)※別ページ

配列とは

a = [ 値1 , 値2 , 値3 ];

上記は複数の値を変数aに代入しています。
この変数aは配列として複数の値を持ちます。

配列の図

１つの変数で複数の値を保持できます。
各項目を要素(element)といいます。
要素の位置をインデックス(添字)で管理します。上記図では[0]、[1]、[2]、[3]です。
インデックスは0から始まります。
JavaScriptの配列は、要素ごとにデータ型が異なっていても格納可能です。
→例：配列の値として文字列型、数値型、論理型をセットする。
JavaScriptの配列は可変長です。要素の追加や削除は可能です。
以下はMDNのArrayオブジェクトのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array

初期化して作成

<script>
	const a = ["赤","黄","青"];
	console.log(a[0]); // 赤
	console.log(a[1]); // 黄
	console.log(a[2]); // 青
</script>

2行目は、リテラルで配列を作成しています。リテラルとはコード中に記述された値です。

空の配列を作成

<script>
	const a = [];
	a[0] = "赤";
	a[1] = "黄";
	console.log(a[0]); // 赤
	console.log(a[1]); // 黄
</script>

空の配列を作成した後に値をセットしています。

要素の数を宣言して作成

<script>
  const c1 = new Array(3);
  c1[0] = "赤";
  c1[1] = "黄";
  c1[2] = "青";
  c1[3] = "黒";
  c1[4] = "白";
  console.log(c1); //["赤", "黄", "青", "黒", "白"]
</script>

JavaScriptの配列は可変長のため宣言した要素数以上を追加できます。

要素を取得(for文、forEach、for...of文)

<script>
  const color = ["赤", "黄", "青"];
  // for文
  for (let i = 0; i < color.length; i++) {
    console.log(color[i]); //赤 黄 青
  }
  // foEach
  color.forEach(function (a, b) {
    console.log(a); //赤 黄 青
    console.log(b); //0 1 2
  });
  // for...of文
  for (const c1 of color) {
    console.log(c1); //赤 黄 青
  }
</script>

for...of文は、IE11未対応です。

要素数・文字列を返す(length,toString)

lengthは、要素数を返します。
toStringは、文字列を返します。
joinは、引数の区切り文字で連結して新しい文字列を返します。

<script>
  const a = ["あ", "い", "う", "え", "お"];
  // length
  console.log(a.length); //5
  // toString
  console.log(a.toString()); //あ,い,う,え,お
  // join
  const b = a.join("-");
  console.log(b); //あ-い-う-え-お
</script>

値を切り出す(slice)

sliceは、値を切り出し新しい配列として返します。

<script>
  const a = ["あ", "い", "う", "え", "お"];
  // slice
  console.log(a.slice(1, 2)); //["い"]
  console.log(a.slice(1, 3)); //["い", "う"]
  console.log(a.slice(1)); //["い", "う", "え", "お"]
  const c = a.slice(); //コピー
  console.log(c); //["あ", "い", "う", "え", "お"]
</script>

sliceの１つ目の引数は開始位置で2つ目の引数は終了位置です。
引数がない場合は配列のコピーになります。
コピー先の配列の変更はコピー元の配列に変更を及ぼしません。

要素を検索(indexOf)・配列か(isArray)

indexOfは、指定した値が存在する場合は位置(数値)を、存在しない場合-1を返します。
isArrayは、引数が配列のときはtrue、そうでない場合はfalseを返します。

<script>
  const a = ["あ", "い", "う", "え", "お"];
  // indexOf
  console.log(a.indexOf("い")); // 1
  console.log(a.indexOf("A")); // -1
  // isArray
  console.log(Array.isArray(a)); // true
</script>

配列のコピーと連結(concat)

concatは、引数がない場合は配列のコピーになります。
引数がある場合は配列を連結して新しい配列を返します。

<script>
  const a = ["あ", "い", "う", "え", "お"];

  let c = a.concat(); // コピー
  c.push("A");
  console.log(c); //["あ", "い", "う", "え", "お", "A"]
  console.log(a); //["あ", "い", "う", "え", "お"]

  const d = ["A", "B", "C"];
  const e = a.concat(d); // 連結
  console.log(e); //["あ", "い", "う", "え", "お", "A", "B", "C"]
</script>

コピー先の配列の変更はコピー元の配列に変更を及ぼしません。

要素を追加・変更(push,unshift,添字)

<script>
  const a = ["い", "う", "え"];

  a.push("お");
  console.log(a); // ["い", "う", "え", "お"]

  a.unshift("あ");
  console.log(a); // ["あ", "い", "う", "え", "お"]

  a[1] = "ABC";
  console.log(a); // ["あ", "ABC", "う", "え", "お"]
</script>

pushは、配列の末尾に要素を追加します。
unshiftは、配列の先頭に要素を追加します。
変更は、インデックス(添字)で指定して値を代入します。

要素を削除(shift,pop,空の配列)

<script>
  let a = ["あ", "い", "う", "え", "お"];

  a.shift();
  console.log(a); // ["い", "う", "え", "お"]

  a.pop();
  console.log(a); // ["い", "う", "え"]

  a = [];
  console.log(a); // []
</script>

shiftメソッドは、先頭の要素を削除します。
popメソッドは、末尾の要素を削除します。
空の配列を代入すると全ての要素を削除します。constの場合エラーになります。

要素を追加・変更・削除(splice)

配列.splice(数値, 数値, 値)

<script>
  const a = ["あ", "い", "う"];
  a.splice(1, 0, "Y"); // 追加
  console.log(a); //["あ", "Y", "い", "う"]

  a.splice(1, 1, "A"); // 変更
  console.log(a); //["あ", "A", "い", "う"]

  a.splice(1, 1); // 削除
  console.log(a); //["あ", "い", "う"]
</script>

追加:引数の1つめは追加する位置、2つめは0、3つめは追加する値を指定。
変更:引数の1つめは変更する位置、2つめは変更する要素の数、3つめは変更後の値を指定。
削除:引数の1つめは削除する位置、2つめは削除する要素の数を指定。

要素を逆順・昇順にソート(reverse,sort)

<script>
  const a = ["い", "あ", "う"];
  a.reverse();
  console.log(a); //["う", "あ", "い"]

  a.sort();
  console.log(a); //["あ", "い", "う"]
</script>

reverseは、逆順にします。降順ではありません。
sortは、昇順にソートします。

二次元配列を作成

<script>
    const a = [
        ["赤", "黄", "青"],
        ["緑", "白", "黒"],
    ];
    console.log(a[0][0]); //赤
    console.log(a[0][1]); //黄
    console.log(a[0][2]); //青
    console.log(a[1][0]); //緑
    console.log(a[1][1]); //白
    console.log(a[1][2]); //黒
</script>

入れ子の構造の配列

<script>
    const b = [
        "色の種類",
        ["赤","黄","青"],
        ["緑","白","黒"]
    ];
    console.log(b[0]); // 色の種類
    console.log(b[1]); // (3) ["赤", "黄", "青"]
    console.log(b[2]); // (3) ["緑", "白", "黒"]
    console.log(b[1][0]); // 赤
    console.log(b[1][1]); // 黄
    console.log(b[1][2]); // 青
</script>