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

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

目次

配列の比較

 

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

 

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

配列の値を比較するサンプルその1です。
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

 

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

配列の値を比較するサンプルその2です。
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文で配列の値を1つずつ比較しています。

関連の記事

JavaScript if文のサンプル
JavaScript if文の == と === の違い
JavaScript 配列を作成するサンプル
JavaScript for...in文とfor...of文のサンプル
JavaScript 配列のメソッドのサンプル(Arrayオブジェクト)

プログラムでつまったらteratailに登録して質問しましょう!↓↓↓

△上に戻る