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

推薦する

Vue コンポーネント値転送中のデータ損失の分析と解決

序文前回の記事では、JavaScript の 2 つのデータ型、基本型と参照型、および参照型の浅いコ...

フレックスマルチカラムレイアウトで発生する問題と解決策の詳細な説明

フレックス レイアウトは間違いなくシンプルで使いやすいです。レイアウトをよりシンプルかつ高速にします...

JDBC を使用して Mysql データベースに接続する際に発生する可能性のある問題の概要

まず、いくつかの概念を明確にします。 JDBC: Javaデータベース接続、Oricalによって規定...

JavaScriptの信頼性の低い未定義

undefined JavaScript では、値が undefined かどうかを判断したい場合は...

MySql テーブル、データベース、シャーディング、パーティショニングの知識の詳細な説明

1. はじめにデータベース内のデータ量が一定レベルに達すると、システムパフォーマンスのボトルネックを...

div が contentEditable=true に設定されている場合、コンテンツをリセットした後にカーソルを配置することはできません。

最近、絵文字にコメントする機能が必要なコメント機能に取り組んでいたため、 contentEditab...

HTML と CSS を使用して絵文字付きのコメント ボックスを作成する方法のチュートリアル

絵文字付きの HTML コメント ボックス。絵文字は Json データを通じて読み込まれ、好みに応じ...

Vue Element フロントエンドアプリケーション開発: Vuex での API ストアビューの使用

目次概要1. フロントエンドとバックエンドの分離とWeb APIの優先ルート設計2. Axiosネッ...

Linux コマンドを素早く習得する 4 つの方法

Linux マスターになりたいなら、いくつかの Linux コマンドを習得することが不可欠です。 L...

VMware に CentOS7 をインストールし (静的 IP アドレスを設定)、Docker コンテナ経由で mySql データベースをインストールする (非常に詳細なチュートリアル)

2 年生から、これらのインストールと設定の仕方を尋ねられました。簡単なチュートリアルを作成し、ここ...

Portainer を使用して複数の Docker コンテナ環境を管理する方法を説明します。

目次Portainerは複数のDockerコンテナ環境を管理します2. Dockerを管理する2.1...

JavaScript es6 における var、let、const の違いの詳細な説明

まず、よくある質問は、ECMAScript と JavaScript の関係は何ですか? ECMAS...

docker 環境でのデータベース バックアップ (postgresql、mysql) のサンプル コード

目次posgresql バックアップ/リストアMySQL バックアップ/復元posgresql バッ...

MySQL 5.7 をバイナリモードでインストールし、Linux でシステムを最適化する手順

この記事では主に、MySQL バイナリ パッケージのインストール/起動/シャットダウンのプロセスを紹...

Vue はブラウザのパスワード記憶機能を無効にするサンプル コードを実装します

情報を探すインターネットで見つかったいくつかの方法: autocomplete="off&...