ITコラム

People selecting a vagetable from a table

JavaScript

2017.10.30

JavaScript【 array 】１２～配列の重複チェック

配列変数を使用する際に、同じ値がいくつも格納されていると不都合な場合があります。
このような問題を回避するため、今回は、配列の重複チェックの方法について紹介します。

１．値を個々にチェック

　
配列変数に格納されている値が重複していないか、値を1つずつチェックする方法があります。

値を個々にチェックして、重複する値を除去してみます。
表示ボタンをクリックして下さい。

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

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

    ary2.push(ary[0]);

    for(var i = 0; i < ary.length; i++){
        flag = true;
        for(var j = 0; j < ary2.length; j++){
            if(ary[i] === ary2[j]){
                flag = false;
            }
        }

        if(flag){
            ary2.push(ary[i]);
        }
    }

    document.getElementById("dat").value = ary2;
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px 20px 1px;">
    <form>
        [1,3,4,2,3,2,3,3,4,5,2]

        上記の配列の重複データを除去します
        <div style="display:inline-flex;">
          　<input type="button" value="表示" onClick="dispAry()">　
            <input type="text" id="dat" placeholder="ここに表示されます">
        </div>
    </form>
</div>

元の配列aryの値のうち、重複していない値を配列ary2にpushメソッドで格納して、配列ary2を表示しています。
（pushメソッドについては、pushメソッドとはをご参照下さい。）

まず「ary2.push(ary[0]);」として、配列aryの最初の値を配列ary2に格納して、配列aryの次の値から、配列ary2の中の値と重複しないかをチェックし、重複する場合は変数flag に false を代入しています。

重複チェックの結果、変数flag が true の場合のみ、配列ary2に値を追加していく仕組みです。

for文の詳細については、for文の使い方をご参照下さい。

▲目次へ戻る

２．filterメソッドでチェック

　
filterメソッドを使うと、先ほどのように複雑なfor文を使うことなく値の重複チェックを行うことができます。

filterメソッドは、Arrayオブジェクトで用意されているメソッドで、定義されたコールバック関数を配列の各要素に対して呼び出し、コールバック関数が true を返す値の配列を返します。
（Arrayオブジェクトについては、Arrayオブジェクトとはをご参照下さい。）
　
　
filterメソッドは、次のように記述します。

重複除去後の配列変数　=　元の配列変数．filter（　function（ x, i, self ）｛
　return　self ．indexOf（ x ）　===　i ;
｝）；

filterメソッドの引数に指定したコールバック関数を、元の配列変数の要素1つ1つに順に適用して、true を返す要素のみを要素とした配列を生成して返します。

コールバック関数には3つの引数を指定することができます。
第1引数（ x ）には、元の配列要素の値が代入されます。
第2引数（ i ）は、元の配列要素のインデックス番号を表しています。
第3引数（ self ）は、元の配列自体です。

indexOf(x) は、配列の要素が初めて現れるインデックス番号を返します。
（indexOfメソッドについては、indexOfメソッドをご参照下さい。）
　
　
filterメソッドを使って、重複する値を除去します。
表示ボタンをクリックしてみて下さい。

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

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

    var ary2 = ary.filter(function (x, i, self) {
        return self.indexOf(x) === i;
    });

    document.getElementById("dat").value = ary2;
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px 20px 1px;">
    <form>
        [1,3,4,2,3,2,3,3,4,5,2]

        上記の配列の重複データを除去します
        <div style="display:inline-flex;">
          　<input type="button" value="表示" onClick="dispAry()">　
            <input type="text" id="dat" placeholder="ここに表示されます">
        </div>
    </form>
</div>

ary の重複要素である「3」が初めて出現するインデックス番号（ self.indexOf(3) の返り値）は 1 となります。

「3」が格納されている要素のインデックス番号は 1、4、6、7 なので、このうち最小のインデックス番号 1 の要素である「3」のみが新しい配列の要素として抽出されます（ self.indexOf(3) === i; が true となるのは最初に出現した「3」の場合のみです）。

「2」と「4」についても、同様に、self.indexOf(x) === i; が true を返すのはインデックス番号がそれぞれ 3 と 2 の場合のみとなり、そのインデックス番号の値のみが、新しい配列の要素として抽出されます。
　
重複する要素のうち、最後の要素を残したい場合は、indexOfメソッドの変わりに、lastIndexOfメソッドを使用します。
（lastIndexOfメソッドについては、lastIndexOfメソッドをご参照下さい。）
　
また、重複する要素を除去した後、ソートをかけたい場合は、配列のソートをご参照下さい。

▲目次へ戻る