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

JavaScriptのinstanceof演算子とArray.isArray()メソッドの違いとは？

JavaScriptで「この値は配列かどうか」を判定する方法として、Array.isArray()メソッドとinstanceof演算子の2つがよく使われます。この2つは一見すると同じ役割を持っていますが、実は1つの重要な違いがあります。

Array.isArray()メソッドは普遍的（ユニバーサル）であり、どのような実行環境でも正しく機能します。一方、instanceof演算子は普遍的ではないため、新しく作られた環境（別のレルム）では正しく判定できない場合があります。

構文

Array.isArray() の場合

Array.isArray(array);

instanceof の場合

array instanceof Array;

通常の環境での動作例

次の例では、新しい環境を作成していないため、Array.isArray()とinstanceofのどちらを使っても同じ結果が得られます。

サンプルコード

<html>
<body>
<script>
    var a = [1,2,3,4,5];
    document.write(Array.isArray(a));
    document.write("</br>");
    document.write((a instanceof Array));
    document.write("</br>");
    var b = {}
    document.write(Array.isArray(b));
    document.write("</br>");
    document.write((b instanceof Array));
</script>
</body>
</html>

出力結果

true
true
false
false

配列「a」に対してはどちらの方法でもtrueが返り、空のオブジェクト「b」に対してはどちらもfalseが返ります。このように、通常の環境ではどちらの方法でも配列の判定に問題はありません。

新しい環境（iframe）での動作例

次に、新しい環境（新しいフレーム）を作成し、instanceof演算子がそこでも正しく機能するのかどうかを確認してみましょう。

次の例では、「iframe」要素を使って新しいフレームを生成しています。その後、その新しいフレーム内で配列風オブジェクトを作成し、両方の方法で判定を行います。

結果を見ると、instanceofは普遍的ではないため、フレーム内で作成された配列を本物の配列とは認識できず、falseを返してしまいます。一方、Array.isArray()はtrueを返します。これは、iframeの中には元のウィンドウとは別個のArrayコンストラクターが存在しており、instanceofが参照しているのは元のウィンドウ側のArrayだからです。

サンプルコード

<html>
<body>
<script>
    var iframeE = document.createElement('iframe');
    iframeE.style.display = "none";
    document.body.appendChild(iframeE);
    iframeArray = window.frames[window.frames.length - 1].Array;
    var a = new Array(1,2,3,"hi",4, "hello");
    var b = new iframeArray(1,2,3,4);
    document.write(Array.isArray(a));
    document.write("</br>");
    document.write(a instanceof Array);
    document.write("</br>");
    document.write(Array.isArray(b));
    document.write("</br>");
    document.write(b instanceof Array);
</script>
</body>
</html>

出力結果

true
true
true
false

まとめ

通常のスクリプト環境では、Array.isArray()とinstanceofは同じ結果を返します。しかし、iframeのように複数の実行環境（レルム）が混在する場面では、instanceofは信頼できません。確実に配列かどうかを判定したい場合は、環境に依存しないArray.isArray()を使用するのが安全です。


  1. JavaScriptにおける関数とメソッドの違いとは？わかりやすく解説

    JavaScriptにおいて、関数とメソッドは本質的には同じものです。両者の違いは、メソッドがオブジェクトのプロパティとして定義された関数であるという点にあります。つまり、独立して定義されたものを「関数」、オブジェクトに紐づけられたものを「メソッド」と呼びます。 JavaScriptの関数の基本形 まず、一般的な関数の定義方法を見てみましょう。 function functionname(param1, param2){ // 処理内容 } JavaScriptのメソッドの例 メソッドは、オブジェクトに関連付けられた関数です。次の例では、employeeオブジェクトの中にdetails

  2. JavaとJavaScriptの違いとは？歴史・技術・使い分けを徹底解説

    ウェブ開発者のジェレミー・キースは2009年、「JavaとJavaScriptの関係は、ハムとハムスターの関係のようなものだ」と語りました。この比喩がどれほど正確かは議論の余地がありますが、その本質は的確です。共通する言語的ルーツを持つにもかかわらず、JavaとJavaScriptはまったく異なる2つのプログラミング言語なのです。年月とともに両者の重なりも多少増えましたが、今なおJavaScriptはウェブサイトにインタラクティブ性をもたらすフロントエンド言語の主流であり続け、Javaはサーバーサイドやアプリケーション開発で人気を保っています。開発者を採用したい方、プログラミングを学びたい方