データ型の判断における 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にさらにデータをインポートするためのソリューション

推薦する

ウェブページを最適化してメモリとCPUの使用率を削減

一部の Web ページは大きく見えなくても開くのに非常に時間がかかる場合があります。一方、他の We...

Vueのwatch、computed、methodsの違いのまとめ

目次1 はじめに2 基本的な使い方2.1 方法2.2 計算プロパティ2.3 リスナーを見る3 3つの...

VMware+centOS 8 で http プロトコルに基づく Git サービスを構築する方法

目次1. 原因2. デバイス情報3. 準備4. Apacheをインストールする5. gitを設定する...

Linux サーバーに SSH パスワードなしでログインする方法

テスト サーバーにログインするたびに、必ず ssh ログインのパスワードを入力する必要があります。ロ...

Vue イメージ ドラッグ アンド ドロップ ズーム コンポーネントの使用方法の詳細な説明

Vueイメージドラッグアンドドロップズームコンポーネントの具体的な使い方は参考までに。具体的な内容は...

HTML でマウスが停止したときに行全体の色 (tr) を変更する方法

純粋な CSS を使用して、マウスが行の上を通過するときに行の背景色を変更し、その行にフォーカスがあ...

CentOS8 yum/dnfで国内ソースを設定する方法

CentOS 8 ではソフトウェア パッケージのインストール プログラムが変更され、yum 構成方法...

JavaScript における一般的な配列操作

目次1. 連結() 2. 結合() 3. プッシュ() 5. シフト() 6. シフト解除() 7....

HTML入門チュートリアル HTMLタグ記号をすぐにマスター

補足<br />HTML について何も知らず、HTML の始め方がまだわからない場合は、...

dockerでredis5.0.3をインストールする方法

1. 公式5.0.3イメージを取得する [root@localhost ~]# docker pul...

MySQL ページング中にオフセットが大きすぎる場合の SQL 最適化の経験の共有

問題を見つけるコンテンツをリストで表示すると、リスト内のコンテンツの数は多いかもしれませんが、ユーザ...

Docker-Composeコマンドの使い方の詳しい説明

Docker コンテナはさまざまな方法で管理およびデプロイできます。 Docker コマンドを直接使...

重複したMySQLテーブルをマージして削除する簡単な方法

シナリオ:クロールされたデータは、別のメインテーブルと同じ構造を持つデータテーブルを生成するため、マ...

ノードの対応するバージョンに関する簡単な説明 node-sass sass-loader

目次ノードのバージョンが一致しない、ノードをアップグレードまたはダウングレードするnvm を使用して...