JSにおけるデータ型の正しい判定方法の例

序文

Javascript は動的型付け言語です。変数は宣言から最終的な使用までの間に多くの関数を経由し、データ型も変化する可能性があります。そのため、変数のデータ型を判断することが特に重要です。

typeof は型を正しく判別できますか?

typeof は、右側に単項式を取り、その式のデータ型を返す演算子です。返される結果は、そのタイプの文字列 (すべて小文字) の形式で表現され、数値、ブール値、シンボル、文字列、オブジェクト、未定義、関数などの 7 つのタイプが含まれます。

歴史的な理由により、プリミティブ型を判断する場合、typeof null は object と等しくなります。さらに、オブジェクトと配列はオブジェクトに変換されます。以下にいくつか例を挙げます。

    typeof 1 // '数値'
    typeof "1" // '文字列'
    typeof null // 'オブジェクト'
    typeof undefined // 'undefined'
    
    typeof [] // 'オブジェクト'
    typeof {} // 'オブジェクト'
    typeof function() {} // '関数'

したがって、typeof は基本的なデータ型を判別できますが、関数以外の複雑なデータ型を判別することは困難であることがわかります。したがって、通常は複雑なデータ型を決定するために使用される 2 番目の方法を使用できますが、基本的なデータ型を決定するためにも使用できます。

オブジェクトの戻り値には、次の 3 つのケースがあります。

値はnullです
値はオブジェクトです
値は配列です

null の場合は === を直接使用して判断できますが、配列やオブジェクトの場合はどうでしょうか?心配しないで、続けましょう。

instanceof は型を正しく判別できますか?

Instanceof は、A が B のインスタンスであるかどうかを判断するために使用されます。式は、A instanceof B です。A が B のインスタンスである場合は true を返し、そうでない場合は false を返します。

Instanceof はプロトタイプチェーンによって判断されますが、オブジェクトの場合、Array も Object に変換され、基本型の string と boolean を区別できません。判定したい内容を左に、型を右に置くことでJSの型判定を行うことができます。instanceofは、あるインスタンスオブジェクト（左）のプロトタイプチェーン上にコンストラクタ関数（右）のプロトタイププロパティが出現するかどうかを検出するために使用されるため、複雑なデータ型の判定にのみ使用できます。例えば：

    関数Func() {}
    定数関数 = 新しい関数()
    console.log(func instanceof Func) // true
    
    定数オブジェクト = {}
    定数arr = []
    obj instanceof オブジェクト // true
    arr instanceof オブジェクト // true
    arr 配列のインスタンス // true
    
    定数 str = "abc"
    const str2 = 新しい文字列("abc")
    str 文字列のインスタンス // false
    str2 文字列のインスタンス // true

instanceof だけを使うとうまくいかないようですが、typeof では配列とオブジェクトを区別できないという結論に達しました。そこで、instanceof を組み合わせて完全な判定ロジックを記述してみましょう。

    関数 myTypeof(データ) {
        const type = typeof データ
        データ === null の場合 {
            'null'を返す
        }
        if (type !== 'object') {
            戻り値の型
        }
        if (データインスタンス配列) {
            '配列'を返す
        }
        'オブジェクト'を返す
    }

オブジェクトプロトタイプtoString呼び出し()

上記では、typeof と instanceof による型判定のバージョンを実装しましたが、コードをより簡潔にする他のチャネルはありますか?答えは、Object.prototype.toString.call() を使用することです。

すべてのオブジェクトには toString() メソッドがあり、オブジェクトをテキスト値として表す場合や、文字列を期待する方法でオブジェクトを参照する場合に自動的に呼び出されます。デフォルトでは、Object から派生したすべてのオブジェクトは toString() メソッドを継承します。このメソッドがカスタムオブジェクトでオーバーライドされていない場合、toString()は以下を返します。

    Object.prototype.toString.call(new Date()) // [オブジェクト Date]
    Object.prototype.toString.call("1") // [オブジェクト文字列]
    Object.prototype.toString.call(1) // [オブジェクト番号]
    Object.prototype.toString.call(undefined) // [オブジェクト Undefined]
    Object.prototype.toString.call(null) // [オブジェクト Null]

したがって、上記の知識ポイントに基づいて、次のような一般的なタイプ判断方法をまとめることができます。

    関数 myTypeof(データ) {
        var toString = Object.prototype.toString;
        var dataType = data instanceof Element ? "element" : toString.call(data).replace(/\[object\s(.+)\]/, "$1").toLowerCase()
        データ型を返す
    };

    myTypeof("a") // 文字列
    myTypeof(1) // 数値
    myTypeof(window) // ウィンドウ
    myTypeof(document.querySelector("h1")) // 要素

コンストラクタ

コンストラクタの判定方法はinstanceofと似ていますが、Objectのコンストラクタ検出はinstanceofとは異なります。コンストラクタはオブジェクト型だけでなく、基本的なデータ型の検出も処理できます。

知らせ：

1.null と undefined にはコンストラクタがありません。

2. 数字を判断するときは () を使用します。例: (123).constructor。123.constructor と書くとエラーになります。

3. クラスが継承されると、オブジェクトが上書きされ、検出結果が正しくないため、コンストラクタが失敗します。

    関数A() {};
    関数B() {};
    A.プロトタイプ = 新しいB();
    console.log(A.constructor === B) // false

    var C = 新しい A();
    console.log(C.constructor === B) // 真
    console.log(C.constructor === A) // 偽 

    C.コンストラクタ = A;
    console.log(C.constructor === A); // 真
    console.log(C.constructor === B); // 偽

配列.isArray()

Array.isArray() は、渡された値が配列であるかどうかを判断するために使用されます。オブジェクトが Array<String, String> の場合は true を返し、それ以外の場合は false を返します。

    Array.isArray([1, 2, 3]); // 真
    Array.isArray({foo: 123}); // 偽
    Array.isArray("foobar"); // 偽
    Array.isArray(未定義); // 偽

通常の判断

オブジェクトと配列を文字列に変換して、フォーマットの判断を行い、最終的な型を取得することができます。

    関数 myTypeof(データ) {
        const str = JSON.stringify(データ)
        (/^{.*}$/.test(データ)) の場合 {
            'オブジェクト'を返す
        }
        (/^\[.*\]$/.test(データ)) の場合 {
            '配列'を返す
        }
    }