
卒業生インタビュー
2021.03.03
【卒業生の声:森さん】文系の僕がプログラミングの道へ進むことは、不安も迷いもあった。今は、あの時思い切って良かったと心から思います
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
JavaScript
2017.10.25
JavaScriptでは、配列はオブジェクトの1つですので、配列同士をそのまま比較すると 意図した結果が得られない場合があり、注意が必要です。
今回は、配列を比較する方法について紹介します。
1.配列をそのまま比較
2.toStringメソッドで比較
3.JSON文字列に変換して比較
配列同士をそのまま比較してみます。
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つのサンプルのように、データ自体は同じでも 異なる判定結果が生じ得ることになります。
プログラムの中で配列の比較を行う場合は、中身のデータ自体を比較したいのが常だと思います。
そして、その場合は、配列同士を直接比較するのは妥当ではありません。
配列同士を直接比較しても、配列の中にあるデータの比較は行えないことが分かりました。
配列に格納されたデータの比較を行いたい場合は、toStringメソッドを使用します。
toStringメソッドは、Arrayオブジェクトで用意されているメソッドで、配列の文字列表現を返すためのメソッドです。
(Arrayオブジェクトについては、Arrayオブジェクトとはをご参照下さい。)
toStringメソッドを使用して配列を比較する場合は、次のように記述します。
if ( 配列変数1.toString( ) == 配列変数2.toString( ) ) {
}
toStringメソッドを使用して配列を比較します。
比較ボタンをクリックしてみて下さい。
fruits1.toString() と fruits2.toString() とを比較します
1つの配列をコピーして2つ目の配列を定義した場合も、当然、同様の結果が得られます。
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>
配列を、toStringメソッドで文字列に変換するのと同様に、JSON文字列に変換して配列を比較する方法もあります。
JSON(ジェイソン)は、「JavaScript Object Notation」の略で、シンプルで軽量な テキストフォーマットの一種です。
null、真偽値、数値、文字列、オブジェクトのデータを、JSON文字列で表現することができます。
JSONクラスで用意されている stringifyメソッドを使用すると、JavaScriptの配列データをJSON文字列に変換することができます。
配列をJSON文字列に変換して比較する場合は、次のように記述します。
if ( JSON.stringify ( 配列変数1 ) == JSON.stringify ( 配列変数2 ) ) {
}
JSON文字列に変換して配列を比較します。
比較ボタンをクリックしてみて下さい。
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>
卒業生インタビュー
2021.03.03
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
スキルアップ
2021.03.03
プログラミング学習は「挫折しやすい」というイメージがありますよね。実際に学習を始めてみて、挫折しそうだと感じている方もいらっしゃるでしょう。本記事では、プログラミング学習で挫折する4つの原因を解説。さらに、プログラミング […]
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
INTERNOUS,inc. All rights reserved.