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

People selecting a vagetable from a table

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

目次

 
1.値を個々にチェック
2.filterメソッドでチェック

 

1.値を個々にチェック

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

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

[1,3,4,2,3,2,3,3,4,5,2]

上記の配列の重複データを除去します

  

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

<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文の使い方をご参照下さい。

▲目次へ戻る

 

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メソッドを使って、重複する値を除去します。
表示ボタンをクリックしてみて下さい。

[1,3,4,2,3,2,3,3,4,5,2]

上記の配列の重複データを除去します

  

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

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

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です