JavaScript if文で配列を比較するサンプル

JavaScriptのif文の配列の比較のサンプルです。

説明	if文で配列を比較するときの注意点
	同じ値の配列を比較する
方法	配列の値を比較する方法１(toStringメソッド)
	配列の値を比較する方法２(for文)
参考	参照先を渡して比較する(シャローコピー)

if文で配列を比較するときの注意点

JavaScriptの変数のデータ型は、基本型と参照型があります。

基本型とは？

数値や文字列のデータ型は、基本型です。
変数に数値や文字列を代入した場合、値が格納されます。

参照型とは？

参照型のデータは、変数に代入するとアドレスが格納されます。
値は、指定されたアドレスの先にあります。

配列は、参照型です。

そのため、if文で単純に配列の変数を比較した場合、値ではなく参照先(アドレス)が等しいか判定することになるので注意が必要です。

配列の変数を比較した場合

配列の変数を比較した場合のサンプルです。

<script>
    const color1 = ["red", "yellow", "blue"];
    const color2 = ["red", "yellow", "blue"];

    if (color1 == color2) {
        console.log("OK");
    } else {
        console.log("NG"); //NG
    }
</script>

2行目と3行目は同じ値の配列です。
5行目は、配列の変数を比較しています。参照先が異なるのでif文の判定はfalseになります。

配列の値を比較する方法１(toStringメソッド)

配列の値を比較するサンプルその１です。
ArrayオブジェクトのtoStringメソッドを使用します。

<script>
    const color1 = ["red", "yellow", "blue"];
    const color2 = ["red", "yellow", "blue"];

    if (color1.toString() == color2.toString()) {
        console.log("OK"); //OK
    } else {
        console.log("NG");
    }

    console.log(color1.toString()); //red,yellow,blue
    console.log(color2.toString()); //red,yellow,blue
</script>

2行目と3行目は同じ値の配列です。
5行目のtoStringメソッドは、配列の値を文字列にして比較するのでif文の判定はtrueになります。

以下は、MDNのArrayオブジェクトのtoStringメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/toString

配列の値を比較する方法２(for文)

配列の値を比較するサンプルその２です。
for文を使用します。

<script>
    const color1 = ["red", "yellow", "blue"];
    const color2 = ["red", "yellow", "blue"];

    let flg = "一致";

    for (let i = 0; i < color1.length; i++) {
        if (color1[i] !== color2[i]) {
            flg = "不一致";
            break;
        }
    }
    console.log(flg); //一致が表示される
</script>

2行目と3行目は同じ値の配列です。
7行目のfor文でループさせています。
8行目のif文で配列の値を１つずつ比較しています。

参照先を渡して比較する(シャローコピー)

参照先を渡して比較するサンプルです。

<script>
    let color1 = ["red", "yellow", "blue"];
    let color2 = [];

    //参照先を渡す
    color2 = color1;

    if (color1 == color2) {
        console.log("OK"); //OK
    } else {
        console.log("NG");
    }

    color1[1] = "オレンジ";

    console.log(color1); // ["red", "オレンジ", "blue"]
    console.log(color2); // ["red", "オレンジ", "blue"]
</script>

2行目と3行目は配列です。
6行目は、配列color1の参照先を変数のcolor2に代入しています。
参照先のコピーは、シャローコピーと呼ばれます。(shallow=浅い)

8行目のif文は、同じ参照先なのでtrueになります。
14行目は、変数color1の値を変更しています。
16,17行目は、変数の値を表示しています。
変数の参照先が同じため、color1とcolor2の値が同じになっています。