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

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

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. 値を個々にチェック

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

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

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

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

    ary2.push(ary[0]);

    for(let i = 0; i < ary.length; i++){
        flag = true;
        for(let 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文の使い方をご参照下さい。

▲目次へ戻る

　

2. 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() {
    let ary = [1,3,4,2,3,2,3,3,4,5,2];

    let 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メソッドをご参照下さい。）
　
また、重複する要素を除去した後、ソートをかけたい場合は、配列のソートをご参照下さい。

▲目次へ戻る