JavaScript【 array 】9 ～ 配列の比較

JavaScriptでは、配列はオブジェクトの1つですので、配列同士をそのまま比較すると 意図した結果が得られない場合があり、注意が必要です。
今回は、配列を比較する方法について紹介します。

1. 配列をそのまま比較

　
配列同士をそのまま比較してみます。

var fruits1 = ["りんご", "みかん", "ぶどう", "メロン", "もも"];
var fruits2 = ["りんご", "みかん", "ぶどう", "メロン", "もも"];

if(fruits1 == fruits2) {
    document.getElementById("dat").value = "TRUE！";
} else {
    document.getElementById("dat").value = "FALSE！";
}

上記のソースコードを実行します。
比較ボタンをクリックしてみて下さい。

　
中身は全く同じ配列ですが、そのまま比較すると、等しくない と判定されてしまいます。

因みに、各配列の中身を出力してみると、同じ内容が表示されます。

　
先ほどは、2つの配列にそれぞれ同じデータを格納して比較しましたが、今度は、1つの配列にデータを格納した後、その配列をコピーして2つ目の配列を作成し、比較してみます。

var fruits1 = ["りんご", "みかん", "ぶどう", "メロン", "もも"];
var fruits2 = fruits1;

if(fruits1 == fruits2) {
    document.getElementById("dat").value = "TRUE！";
} else {
    document.getElementById("dat").value = "FALSE！";
}

上記のソースコードを実行します。
比較ボタンをクリックしてみて下さい。

　
この場合は、等しい と判定されました。

因みに、この場合も、各配列の中身を出力してみると、先ほどと同じ内容が表示されます。

　
この2つのサンプルの違いは、配列がオブジェクトであるということに原因があります。

オブジェクトは、コピーをする際に、コピー先にデータを渡すのではなく、データを格納している場所のアドレスを渡します。
その結果、コピー元のオブジェクトも、コピー先のオブジェクトも、共に同じデータを捉えている状態になります。
（詳しくは、配列のコピーをご参照下さい。）

このオブジェクトの性質から、
　var fruits1 = [“りんご”, “みかん”, “ぶどう”, “メロン”, “もも”];
　var fruits2 = [“りんご”, “みかん”, “ぶどう”, “メロン”, “もも”];
と定義した2つの配列は、別々の場所にあるそれぞれ独立した2つの配列で、
　var fruits1 = [“りんご”, “みかん”, “ぶどう”, “メロン”, “もも”];
　var fruits2 = fruits1;
と定義した2つの配列は、同じ場所にある1つの配列を、2つの変数名で表している状態です。

そして、オブジェクト同士を比較するということは、同じ1つのオブジェクトを参照している状態かどうかを判定することになり、上の2つのサンプルのように、データ自体は同じでも 異なる判定結果が生じ得ることになります。

プログラムの中で配列の比較を行う場合は、中身のデータ自体を比較したいのが常だと思います。
そして、その場合は、配列同士を直接比較するのは妥当ではありません。

▲目次へ戻る

2. toStringメソッドで比較

　
配列同士を直接比較しても、配列の中にあるデータの比較は行えないことが分かりました。

配列に格納されたデータの比較を行いたい場合は、toStringメソッドを使用します。

toStringメソッドは、Arrayオブジェクトで用意されているメソッドで、配列の文字列表現を返すためのメソッドです。
（Arrayオブジェクトについては、Arrayオブジェクトとはをご参照下さい。）

toStringメソッドを使用して配列を比較する場合は、次のように記述します。

if( 配列変数1.toString() == 配列変数2.toString() ) {

}

　
toStringメソッドを使用して配列を比較します。
比較ボタンをクリックしてみて下さい。

　
1つの配列をコピーして2つ目の配列を定義した場合も、当然、同様の結果が得られます。

　
　
ソースコードは次の通りです（配列の定義部分は適宜変更して下さい）。

<script type="text/javascript">
<!--
var fruits1 =  ["りんご", "みかん", "ぶどう", "メロン", "もも"];
var fruits2 =  ["りんご", "みかん", "ぶどう", "メロン", "もも"];

function compAry() {
    if(fruits1.toString() == fruits2.toString()) {
        document.getElementById("dat").value = "TRUE！";
    } else {
        document.getElementById("dat").value = "FALSE！";
    }
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px 20px 1px;">
    fruits1 = ["りんご", "みかん", "ぶどう", "メロン", "ぶどう", "もも"];
    fruits2 = ["りんご", "みかん", "ぶどう", "メロン", "ぶどう", "もも"];

    fruits1.toString()　と　fruits2.toString()　とを比較します
    <form>
        <div style="display:inline-flex;">
          　<input type="button" value="比較" onClick="compAry()">　
            <input type="text" id="dat" placeholder="TRUE!　or　FALSE!" size="40">
        </div>
    </form>
</div>

▲目次へ戻る

3. JSON文字列に変換して比較

　
配列を、toStringメソッドで文字列に変換するのと同様に、JSON文字列に変換して配列を比較する方法もあります。

JSON

JSON（ジェイソン）は、「JavaScript Object Notation」の略で、シンプルで軽量な テキストフォーマットの一種です。
null、真偽値、数値、文字列、オブジェクトのデータを、JSON文字列で表現することができます。

JSONクラスで用意されている stringifyメソッドを使用すると、JavaScriptの配列データをJSON文字列に変換することができます。

配列をJSON文字列に変換して比較する場合は、次のように記述します。

if(JSON.stringify( 配列変数1 ) == JSON.stringify( 配列変数2 )) {

}

JSON文字列に変換して配列を比較します。
比較ボタンをクリックしてみて下さい。

　
因みに、fruits1.toString() と、JSON.stringify(fruits1) とを出力すると、それぞれ次のように表示されます。

　
　
JSON文字列に変換して配列を比較したサンプルのソースコードは次の通りです。

<script type="text/javascript">
<!--
var fruits1 =  ["りんご", "みかん", "ぶどう", "メロン", "もも"];
var fruits2 =  ["りんご", "みかん", "ぶどう", "メロン", "もも"];
function compAry() {
    if(JSON.stringify(fruits1) == JSON.stringify(fruits2)) {
        document.getElementById("dat").value = "TRUE！";
    } else {
        document.getElementById("dat").value = "FALSE！";
    }
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px 20px 1px;">
    fruits1 = ["りんご", "みかん", "ぶどう", "メロン", "ぶどう", "もも"];
    fruits2 = ["りんご", "みかん", "ぶどう", "メロン", "ぶどう", "もも"];

    JSON.stringify(fruits1)　と　JSON.stringify(fruits2)　とを比較します
    <form>
        <div style="display:inline-flex;">
          　<input type="button" value="比較" onClick="compAry()">　
            <input type="text" id="dat" placeholder="TRUE!　or　FALSE!" size="40">
        </div>
    </form>
</div>

▲目次へ戻る