ITコラム

JavaScript

2017.10.13

JavaScript【 array 】2 ～要素の追加と削除

1つの変数に複数のデータが格納できる配列変数はとても便利です。
配列変数は、変数定義後にデータを追加したり、削除したりすることができます。
今回は、配列変数に要素を追加する方法と削除する方法について紹介します。

1. 要素の追加

作成された配列変数に対して、後から要素（データ）を追加することができます。

使っていないインデックスを指定して値を代入すると、既存の配列変数に要素が追加されます。

    var 変数名 = [値1, 値2, 値3];
    変数名[3] = 値4;

これは、要素数3の配列変数に、インデックス番号が3の要素を追加した例です。
インデックスは 0 から始まるため、インデックス番号と要素数は違うことに注意が必要です。
　
先ほどの例は、インデックス番号が連続するように要素を追加しましたが、任意のインデックス番号を指定して要素を追加することもできます。

    var 変数名 = [値1, 値2, 値3];
    変数名[6] = 値4;

この例は、要素数3の配列変数に、インデックス番号が6の要素として値を追加した例です。

これは、次のように配列変数を定義した場合と同じです。

    var 変数名 = [値1, 値2, 値3, , , ,値4];

インデックス番号3から5の要素は値が代入されていないので、未定義値(undefined)が格納されているものとして扱われます。

下のサンプルは、上記と同じ中身の配列変数の値を出力するプログラムです。
表示ボタンをクリックしてみて下さい。

ソースコードは次の通りです。

<script type="text/javascript">
<!--
function dispAry() {
    var ary = ["値1", "値2", "値3"];
    ary[6] = "値4";

    for (var i = 0; i < ary.length; i++) {
        document.getElementById("dat").value += ary[i] + "　";
    }
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px;">
    <form>
      　<input type="button" value="表示" onClick="dispAry()">
　      <input type="text" id="dat">
    </form>
</div>

for文の中の「ary.length」は、配列の要素数を返す lengthプロパティを使用した記述です（詳しくはArrayオブジェクトとはをご参照下さい）。
上のサンプルでは、要素数が7なので、「i < ary.length」は「i < 7」の意味です。
ここでも、要素数とインデックス番号が1ずれる点に注意しましょう。

for文の仕組みについては、for文の使い方をご参照下さい。

▲目次へ戻る

2. 要素の削除

配列の要素を削除する場合は、Arrayオブジェクトで用意されているメソッドを使用します。
Arrayオブジェクトについては、Arrayオブジェクトとはをご参照下さい。

配列の要素は、先頭や末尾、指定位置など、様々な条件を付けて削除します。

次のサンプルは、値1から値7まで7つの要素を持つ配列変数のうち、一部の要素を削除して残りの要素を出力するプログラムです。
各ボタンをクリックしてみて下さい。

　配列変数の要素：｛値1、値2、値3、値4、値5、値6、値7｝

ソースコードは次の通りです。

<script type="text/javascript">
<!--
var ary = [];

function setArray() {
    ary = ["値1", "値2", "値3", "値4", "値5", "値6", "値7"];
}

function dispArray() {
    for (var i = 0; i < ary.length; i++) {
        document.getElementById("dat2").value += ary[i] + "　";
    }
}

function dispAry1() {
    document.getElementById("dat2").value = "";
    setArray();
    ary.shift();
    dispArray();
}

function dispAry2() {
    document.getElementById("dat2").value = "";
    setArray();
    ary.pop();
    dispArray();
}

function dispAry3() {
    document.getElementById("dat2").value = "";
    setArray();
    ary.splice(2, 1);
    dispArray();
}

function dispAry4() {
    document.getElementById("dat2").value = "";
    setArray();
    ary = ary.slice(1, 6);
    dispArray();
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px;">
　配列変数の要素 ： ｛値1、値2、値3、値4、値5、値6、値7｝
    <form>
        <div style="display:inline-flex">　
          　<input type="button" value="先頭を削除" onClick="dispAry1()">
          　<input type="button" value="末尾を削除" onClick="dispAry2()">
          　<input type="button" value="途中を削除" onClick="dispAry3()">
          　<input type="button" value="両端を削除" onClick="dispAry4()">
        </div>
　      <input type="text" id="dat2">
    </form>
</div>

要素の削除以外のソースコードの内容については、for文の使い方等をご参照下さい。
　

先頭の要素を削除

var ary = ["値1", "値2", "値3", "値4", "値5", "値6", "値7"];
ary.shift();

先頭の要素を削除する場合は、shift()というメソッドを利用します。
shiftメソッドを使用すると、元の配列の中身が変更されます。
　

末尾の要素を削除

var ary = ["値1", "値2", "値3", "値4", "値5", "値6", "値7"];
ary.pop();

末尾の要素を削除する場合は、pop()というメソッドを利用します。
popメソッドを使用すると、元の配列の中身が変更されます。
　

途中の要素を削除

var ary = ["値1", "値2", "値3", "値4", "値5", "値6", "値7"];
ary.splice(2, 1);

指定した位置から任意の数だけ要素を削除する場合は、splice()というメソッドを利用します。

第1引数には先頭に残す要素数を、第2引数には削除する要素数を、それぞれ指定します。
上の例では、「先頭に2つの要素を残して、要素を1つ削除する」という指定をしているので、インデックス番号2の要素が削除されます。
仮に、「ary.splice(2, 3);」と指定すると、インデックス番号2、3、4の3つの要素が削除されます。

spliceメソッドを使用すると、元の配列の中身が変更されます。
　

両端の要素を削除

var ary = ["値1", "値2", "値3", "値4", "値5", "値6", "値7"];
ary = ary.slice(1, 6);

途中の要素を残して先頭と末尾の要素を削除する場合は、slice()というメソッドを利用します。

第1引数には先頭から削除する要素数、第2引数には残す要素の、1から数えた最後の番号（インデックス番号ではなく、1からスタート）を指定します。
上の例では、「先頭から1つの要素を削除して、6番目の要素までは残して7番目以降の要素を削除する」という指定をしているので、インデックス番号0と6の要素が削除されます。
仮に、「ary.slice(2, 5);」と指定すると、インデックス番号0、1、5、6の4つの要素が削除されます。

sliceメソッドを使用しても、元の配列は変更されず、指定した要素を削除した後のデータは返り値として取得できます。
ですので、元の配列を変更させるためには「ary = ary.slice(1, 6);」のように、返り値を変数に代入する必要があります。

▲目次へ戻る