JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【JavaScript】変数が配列かどうか判定する3つの方法（isArray・instanceof・constructor）

JavaScriptでは、ある変数が配列（Array）であるかどうかを判定したい場面はよくあります。本記事では、代表的な3つの判定方法を、サンプルコードと出力結果付きでわかりやすく解説します。

1）Array.isArray() メソッド

Array.isArray() メソッドは、引数として渡された変数が配列かどうかをチェックします。変数が配列であれば true を返し、そうでなければ false を返します。ES5以降で利用できる標準メソッドであり、現在最も推奨されている判定方法です。

構文

Array.isArray(variableName)

例

<html>
<body>
<script type="text/javascript">
   arr = [1,2,3,4,5];
   str = "私は日本が大好きです";
   document.write( Array.isArray(arr));
   document.write("</br>");
   document.write( Array.isArray(str));
</script>
</body>
</html>

出力結果

true
false

2）instanceof 演算子

instanceof 演算子は、オブジェクトのプロトタイプチェーン上に、指定したコンストラクターの prototype プロパティが存在するかどうかを調べます。以下の例では、変数に Array のプロトタイプが存在するかどうかを確認しています。

なお、この方法には注意点があります。iframe など異なるグローバル環境をまたいで受け渡しされた配列の場合、プロトタイプチェーンが異なるために誤判定が起こる可能性があります。確実性を求めるのであれば、Array.isArray() を使用する方が安全です。

構文

variable instanceof Array

例

<html>
<body>
<script type="text/javascript">
   arr = [1,2,3,4,5];
   str = "私は日本が大好きです";
   document.write(str instanceof Array);
   document.write("</br>");
   document.write(arr instanceof Array);
</script>
</body>
</html>

出力結果

false
true

3）constructor プロパティを確認する

constructor プロパティは、その変数を生成したコンストラクターへの参照を持っています。ここでは「変数の constructor が Array と一致するかどうか」を比較しており、変数が配列であれば true を表示し、それ以外の場合は false を表示します。

ただし、constructor プロパティは後から書き換えが可能なため、意図的に改変されたオブジェクトに対しては信頼性の低い判定となる場合があります。簡易的なチェック方法として捉えておきましょう。

構文

variable.constructor === Array

例

<html>
<body>
<script type="text/javascript">
    arr = [1,2,3,4,5];
    str = "私は日本が大好きです";
    document.write(str.constructor === Array);
    document.write("</br>");
    document.write(arr.constructor === Array);
</script>
</body>
</html>

出力結果

false
true

まとめ

3つの判定方法にはそれぞれ特徴があり、状況に応じた使い分けがおすすめです。

  • Array.isArray()： 最もシンプルで確実。特別な理由がない限り、まずこのメソッドを使用しましょう。
  • instanceof 演算子： 同一のグローバル環境内での判定に有効ですが、iframe 間では誤判定の可能性があります。
  • constructor プロパティ： 手軽にチェックできる一方、書き換え可能なため信頼性は低めです。

基本的には Array.isArray() を第一候補とし、用途や実行環境に応じて他の方法を検討すると良いでしょう。

  1. 【JavaScript】配列内に数値（整数）が含まれているかどうかを判定する方法

    はじめに本記事では、配列の中に数値型（number）の要素が含まれているかどうかを判定するJavaScript関数の実装方法を解説します。今回求められている仕様は以下のとおりです。関数は要素の配列を受け取る配列内に number 型の要素が1つでも存在するかをチェックする存在すれば true、存在しなければ false を返す実装例const arr = ["123", "", "21345", "90"];const findInteger = (arr = []) => {  cons

  2. JavaScriptの配列をC#の配列に変換する方法をわかりやすく解説

    フロントエンド（JavaScript）とバックエンド（C#）の間でデータを受け渡す際、JavaScriptの配列をそのままC#で扱うことはできません。そこで、配列を一度文字列に変換し、C#側で分割（Split）して配列として復元するという手法がよく使われます。この記事では、その具体的な手順をサンプルコード付きで解説します。 手順1：JavaScriptで配列を作成する まず、変換元となるJavaScriptの配列を用意します。 <script> var myArr = new Array(5); myArr[0] = Welcome; myArr[1] =