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

nas

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

目次

仕組み 配列とは
作成 初期化して作成 / 空の配列を作成 / 要素の数を宣言して作成
取得 要素を取得(for文,forEach,for...of文)
  要素数・文字列・新しい配列を返す(length,toString,join,slice)
  インデックス・配列かを返す(indexOf,isArray)
  配列を返す・配列のコピー(slice,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>

2行目で空の配列を作成し、3,4行目で値をセットしています。

要素の数を宣言して作成

<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 (let i = 0; i < color.length; i++) {
    console.log(color[i]); //赤 黄 青
  }
  color.forEach(function (a, b) {
    console.log(a); //赤 黄 青
    console.log(b); //0 1 2
  });
  for (const c1 of color) {
    console.log(c1); //赤 黄 青
  }
</script>

4行目は、for文で配列の各値を表示しています。
7行目は、forEachメソッドです。値とインデックスを取得できます。
11行目は、for...of文です。IE11未対応です。

 

要素数・文字列・新しい配列を返す(length,toString,join,slice)

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

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

  console.log(a.toString()); //あ,い,う,え,お

  const b = a.join("-");
  console.log(b); //あ-い-う-え-お

  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 = ["あ", "い", "う", "え", "お"];

  console.log(a.indexOf("い")); // 1
  console.log(a.indexOf("A")); // -1

  console.log(Array.isArray(a)); // true
</script>

 

配列を返す・配列のコピー(slice,concat)

sliceは、値を切り出し新しい配列として返します。
sliceの１つ目の引数は開始位置で2つ目の引数は終了位置です。
引数の終了位置がない場合は配列のコピーになります。
concatは、引数がない場合は配列のコピーになります。
引数がある場合は配列を連結して新しい配列を返します。

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

  console.log(a.slice(1, 2)); //["い"]
  console.log(a.slice(1, 3)); //["い", "う"]
  console.log(a.slice(1)); //["い", "う", "え", "お"]
  const b = a.slice(); //コピー
  b.push("A");
  console.log(b); //["あ", "い", "う", "え", "お", "A"]
  console.log(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>

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

要素を追加・変更(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>

関連の記事

JavaScript if文で配列を比較するサンプル
JavaScript for...in文とfor...of文のサンプル
JavaScript 配列で関数を使用(forEach/map/filter/reduce)
JavaScript 連想配列のサンプル

△上に戻る