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

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

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

配列とは

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 arr = ["赤", "黄", "青"];
  console.log(arr[0]); // 赤
  console.log(arr[1]); // 黄
  console.log(arr[2]); // 青
</script>

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

空の配列を作成

  const arr = [];
  arr[0] = "赤";
  arr[1] = "黄";
  console.log(arr[0]); // 赤
  console.log(arr[1]); // 黄

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

要素の数を宣言して作成

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

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

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

  const arr = ["赤", "黄", "青"];

  // for文
  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]); //赤 黄 青
  }

  // foEach
  arr.forEach(function (a, b) {
    console.log(a); //赤 黄 青
    console.log(b); //0 1 2
  });

  // for...of文
  for (const c1 of arr) {
    console.log(c1); //赤 黄 青
  }

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

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

  const arr = ["あ", "い", "う", "え", "お"];

  // 要素数を返す
  console.log(arr.length); //5

  // 文字列を返す
  console.log(arr.toString()); //あ,い,う,え,お

  // 区切り文字で連結
  arrJoin = arr.join("-");
  console.log(arrJoin); //あ-い-う-え-お

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

値を切り出す(slice)

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

  const arr = ["あ", "い", "う", "え", "お"];

  // 値を切り出す
  console.log(arr.slice(1, 2)); //["い"]
  console.log(arr.slice(1, 3)); //["い", "う"]
  console.log(arr.slice(1)); //["い", "う", "え", "お"]

  //コピー
  const arrCopy = arr.slice();
  console.log(arrCopy); //["あ", "い", "う", "え", "お"]

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

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

  const arr = ["あ", "い", "う", "え", "お"];

  // 要素を検索
  console.log(arr.indexOf("い")); // 1 位置を返す
  console.log(arr.indexOf("A")); // -1 存在しない

  // 配列か
  console.log(Array.isArray(arr)); // true 配列である

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

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

  const arr1 = ["あ", "い", "う", "え", "お"];

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

  const arr2 = ["A", "B", "C"];

  // 連結
  const arr3 = arr1.concat(arr2);
  console.log(arr3); //["あ", "い", "う", "え", "お", "A", "B", "C"]

concatは、引数がない場合は配列のコピーになります。
引数がある場合は配列を連結して新しい配列を返します。
コピー先の配列の変更はコピー元の配列に変更を及ぼしません。

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

  const arr = ["い", "う", "え"];

  // 末尾に追加
  arr.push("お");
  console.log(arr); // ["い", "う", "え", "お"]

  // 先頭に追加
  arr.unshift("あ");
  console.log(arr); // ["あ", "い", "う", "え", "お"]

  // インデックスで指定して追加
  arr[1] = "ABC";
  console.log(arr); // ["あ", "ABC", "う", "え", "お"]

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

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

  let arr = ["あ", "い", "う", "え", "お"];

  //先頭を削除
  arr.shift();
  console.log(arr); // ["い", "う", "え", "お"]

  //末尾を削除
  arr.pop();
  console.log(arr); // ["い", "う", "え"]

  //全て削除
  arr = [];
  console.log(arr); // []

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

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

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

  const arr = ["あ", "い", "う"];

  // 追加
  arr.splice(1, 0, "Y");
  console.log(arr); //["あ", "Y", "い", "う"]

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

  // 削除
  arr.splice(1, 1);
  console.log(arr); //["あ", "い", "う"]

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

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

  const arr = ["い", "あ", "う"];

  // 逆順
  arr.reverse();
  console.log(arr); //["う", "あ", "い"]

  // 昇順にソート
  arr.sort();
  console.log(arr); //["あ", "い", "う"]

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