データ型の判断における js typeof と instanceof の違いと、その開発と使用について

データ型の判断における js typeof と instanceof の違いと、その開発と使用について

序文:

日常の開発では、変数のデータ型や変数が null かどうかを判別する必要がある状況によく遭遇します。型を判別するための演算子はどのように選択しますか?この記事では、開発者が習得しなければならないtypeofinstanceofに関する知識のポイントと、開発での使用に関する提案をまとめ、記録します。同時に、面接中にこのような問題に遭遇することがよくあります。

1. typeof演算子

typeof演算子は、変数のデータ型を決定します。具体的には、変数が文字列、数値、ブール値、または未定義であるかどうかを判断するのに最適な方法です。戻り値は文字列型で、使用方法は次のとおりです。typeof typeof関数ではなく演算子ですが、変数をパラメータとして渡すために使用できます。
a、typeof operand
b、typeof (operand)

(1)戻り値は文字列型であり、

戻り値

意味価値

"未定義"

未定義

「ブール値」

ブール

"弦"

"番号"

数値

"物体"

オブジェクト(関数ではない)またはnull

"関数"

関数

"シンボル"

シンボル

(2)一般的な使用方法

        console.log(typeof undefined); //'未定義'
        console.log(typeof true);//'bpplean'
        console.log(typeof ("number")); //'文字列'
        console.log(typeof "number"); //'文字列' 
        console.log(typeof 1);//'数値'
        console.log(typeof Symbol());//'シンボル'
        //Array や Null などの特殊なオブジェクトの場合、typeof は常に object を返します。これが typeof の制限です。console.log(typeof null); //'object'
        console.log(typeof [1, 2, 3]);//'オブジェクト'
        console.log(typeof undefined); //'未定義'
        //typeof演算子を使用して関数を他のオブジェクトと区別します function f1() { console.log(111); }
        console.log(typeof f1); //'関数'  
        console.log(typeof f1()); // 111 '未定義'

(3)typeofを使って変数が存在するかどうかを調べることはできない

        var a;
        (a === 未定義)の場合{
            console.log("変数が存在しません")
        } それ以外 {
            console.log("変数が存在します")
        }
     // 変数が存在しません

2. インスタンスオブ演算子

typeofプリミティブ値には便利ですが、参照値にはあまり役立ちません。通常、値がオブジェクトであるかどうかではなく、それがどのようなタイプのオブジェクトであるかが重要になります。この問題を解決するために、 ECMAScript instanceof演算子を提供します。次のように使用します。

        関数 f1() { console.log(111);
        console.log(f1 インスタンスオブオブジェクト);//true
        console.log(f1 関数のインスタンス);//true
        console.log(f1 instanceof RegExp); //false


すべての参照値はObjectのインスタンスであるため、 instanceof演算子とObjectコンストラクターを使用して参照値をテストするとtrueが返されます。

  • 同様に、プリミティブ値に対してinstanceofを使用すると、プリミティブ値はオブジェクトではないため、常にfalseが返されます。

instanceof演算子は、コンストラクター関数のprototypeプロパティがオブジェクトのプロトタイプ チェーンのどこかに出現するかどうかを判断するために使用されます。実装原則は次のとおりです。

  関数 myInstanceof(left, right) {
    let proto = Object.getPrototypeOf(left), // オブジェクトのプロトタイプを取得します prototype = right.prototype; // コンストラクター関数のプロトタイプオブジェクトを取得します // コンストラクター関数のプロトタイプオブジェクトがオブジェクトのプロトタイプチェーン上にあるかどうかを判断します while (true) {
      if (!proto) が false を返す;
      if (proto === prototype) が true を返す。
      proto = Object.getPrototypeOf(proto);
    }
 }

3. typeof と instanceof の違いと開発での使用に関する提案

typeofinstanceどちらもデータ型を決定するメソッドです。違いは次のとおりです。

  • typeof変数の基本型を返し、 instanceofブール値を返します。
  • instanceof複雑な参照データ型を正確に判別できますが、基本データ型を正しく判別することはできません。
  • typeofにも欠点があります。基本データ型 ( nullを除く) は判別できますが、 function型以外の参照データ型は判別できません。

上記の 2 つの方法には欠点があり、すべてのシナリオのニーズを満たすことができないことがわかります。

一般的にデータ型を検出する必要がある場合は、 Object.prototype.toStringを使用し、このメソッドを呼び出して“[object Xxx]”の形式で文字列を一様に返すことをお勧めします。次のように使用します。

        console.log(Object.prototype.toString.call(undefined)) //"[オブジェクトは未定義です]"
        console.log(Object.prototype.toString.call(true)) // "[オブジェクト ブール値]"
        console.log(Object.prototype.toString.call('1')) // "[オブジェクト 文字列]"
        console.log(Object.prototype.toString.call(1)) // "[オブジェクト番号]"
        console.log(Object.prototype.toString.call(Symbol())) // "[オブジェクト シンボル]"
        console.log(Object.prototype.toString.call({})) // "[オブジェクト Object]"
        console.log(Object.prototype.toString.call(function () { })) // "[オブジェクト Function]"
        console.log(Object.prototype.toString.call([])) //"[オブジェクト配列]"
        console.log(Object.prototype.toString.call(null)) //"[オブジェクト Null]"
        console.log(Object.prototype.toString.call(/123/g)) //"[オブジェクト正規表現]"
        console.log(Object.prototype.toString.call(new Date())) //"[オブジェクト Date]"
 

要約:

データ型の判断におけるjs typeofinstanceofの違いと、その開発と使用に関するこの記事はこれで終わりです。より関連性の高いjs typeofinstanceofコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Javascriptの基本ループの詳しい説明
  • JS ループで async と await を正しく使用する方法
  • JSにおける4つのデータ型判定方法
  • JavaScript で判決文をエレガントに記述する例
  • JavaScript で文字列を数値に変換する方法
  • parseInt parseFloat js 文字列変換数値
  • JavaScript の一般的なステートメント ループ、判定、文字列から数値

<<:  一定時間後にNavicatがデータベースから自動的に切断される問題の解決方法

>>:  MySQLからHiveにさらにデータをインポートするためのソリューション

推薦する

CentOS7 は Docker のバージョン 19 をデプロイします (簡単なので、従ってください)

1. 依存パッケージをインストールする [root@localhost ~]# yum insta...

Vueユーザーが長時間操作せずにログインページからログアウトするように実装する2つの方法

目次問題の説明フロントエンド制御(方法1)アイデアコードバックエンド制御(方法2)アイデアコード要約...

Vueカウンターの実装

目次1. カウンターの実装2. 成果を達成する1. カウンターの実装ページにカウンターを実装するだけ...

React+tsは二次リンク効果を実現します

この記事では、二次リンク効果を実現するためのReact+tsの具体的なコードを参考までに共有します。...

SSDストレージを有効にしたMySQLインスタンスの詳細な説明

SSDストレージを有効にしたMySQLインスタンスの詳細な説明特に OS と MySQL が同じディ...

SQL と MySQL のステートメント実行順序の分析

今日、問題が発生しました: MySQL の insert into、update、delete ステ...

JSはreduce()メソッドを使用してツリー構造データを処理します

目次意味文法例1. 初期値initが渡されない2. 初期値を渡す場合3. アレイの重複排除4. Re...

Centos7 での MySQL のインストールに関するチュートリアル

最近、自宅サーバーにクラウドディスクを導入する予定なので、一連の環境構築作業を始めました。MySQL...

JDBC 接続 (MySQL への接続) の 6 ステップのサンプル コード

JDBC の 6 つのステップ: 1. ドライバーを登録する2. データベース接続を取得する3. デ...

MySQL ベースのシーケンス実装方法

チームは新しいフレームを交換しました。すべての新しいビジネスでは、新しいフレームワークと新しいデータ...

ウェブページ作成に役立つコード

<br />ホームページの右側にあるスクロールバーを削除するにはどうすればよいですか? ...

Linux で Golang をインストールする方法

Go は、シンプルで信頼性が高く、効率的なソフトウェアを簡単に構築できるオープンソース プログラミン...

vue.js ベースの QQ チャット ルーム

目次導入効果のデモンストレーションは次のとおりです。 MChat コンポーネントのレンダリング: I...

MySQL データベースの詳細な説明 - 複数テーブル クエリ - 内部結合、外部結合、サブクエリ、相関サブクエリ

複数テーブルクエリ複数のテーブルから関連するクエリ結果を取得するには、単一の SELECT ステート...