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

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

配列の比較
同じ値の配列を比較する
参照先を渡して比較する
配列の値を比較する方法１(toStringメソッド)
配列の値を比較する方法２(for文)

配列の比較

参照型の変数には、参照先のアドレスが格納されます。値は指定されたアドレスにあります。
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になります。

参照先を渡して比較する

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

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

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

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

2行目と3行目は同じ値の配列です。
6行目は、配列の参照先を渡しています（参照渡し）。
8行目は、参照先が同じなのでif文の判定はtrueになります。

配列の値を比較する方法１(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文で配列の値を１つずつ比較しています。