ITコラム

scale

JavaScript

2017.10.25

JavaScript【 array 】9 ~ 配列の比較

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

目次

 
1.配列をそのまま比較
2.toStringメソッドで比較
3.JSON文字列に変換して比較
 

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メソッドを使用して配列を比較します。
比較ボタンをクリックしてみて下さい。

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

fruits1.toString() と fruits2.toString() とを比較します

  

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

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

fruits1.toString() と fruits2.toString() とを比較します

  

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

<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 = [“りんご”, “みかん”, “ぶどう”, “メロン”, “ぶどう”, “もも”];
fruits2 = [“りんご”, “みかん”, “ぶどう”, “メロン”, “ぶどう”, “もも”];

JSON.stringify(fruits1) と JSON.stringify(fruits2) とを比較します

  

 
因みに、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>

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.