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

推薦する

jQueryはhide()とtoggle()関数を使用してカメラブランド表示の非表示機能を実現します。

最近、jQuery を学習しているときに、show()、hide()、toggle() 関数に出会い...

MySQL のデータベース パフォーマンスに影響を与える要因の説明

データベースのパフォーマンスに関する話面接では、「データベースにどのくらい精通していますか?」など、...

Linux での Tomcat8 のインストールとアンインストールに関する詳細なグラフィック チュートリアル

[ Tomcat8 の Linux インストール ] Tomcat をアンインストールする - まず...

Dockerを使用してブログサイトを素早く構築する方法の詳細な説明

目次1. 準備2. 展開プロセス3. アクセステストHalo は、ブログに慣れている学生に追加のオプ...

JavaScript で DOM 要素を監視する MutationObServer の詳細

1. 基本的な使い方これは MutationObserver コンストラクターを通じてインスタンス化...

MySQL 集計統計データの低速クエリの最適化

前面に書かれた注文テーブル、アクセス記録テーブル、商品テーブルなど、日常生活でデータベースを操作する...

React仮想リストの実装

目次1. 背景2. バーチャルリストとは何か3. 関連概念の紹介4. 仮想リストの実装4.1 ドライ...

MySQL binlog ログを開く方法

binlog は、すべての mysql dml 操作を記録するバイナリ ログ ファイルです。 bin...

プロジェクトに必須の 8 つの JavaScript コード スニペット

目次1. ファイル拡張子を取得する2. コンテンツをクリップボードにコピーする3. スリープ時間は何...

MySQLはデータベースのN+1クエリ問題を解決します

導入HibernateやMyBatisなどのORMフレームワークでは、部門に関連付けられたユーザーオ...

MySQL 8.0.13 のインストールと設定方法のグラフィックチュートリアル (Win10 の場合)

MySQL 8.0.13 のインストールと設定方法を皆さんと共有したいと思います。お役に立てれば幸...

Linux での GDB 入門チュートリアル

序文gdb は Linux で非常に便利なデバッグ ツールです。コマンドライン モードのデバッグ ツ...

MySQLにおける分散ロックの考え方をDBの助けを借りて詳しく説明します

序文スタンドアロン ロックであっても分散ロックであっても、共有データに基づいて現在の操作の動作を判断...

JavaScript を使用して文字列内の最も繰り返しの多い文字を取得する方法

目次トピック分析する使用目的解決:コードは次のように実装されます。分析:配列とポインタ解決:コードは...

MySQLテーブル構造を変更するコマンドを表示する

簡単な説明エディターはデータベースのエンコードが間違っているために問題に遭遇することが多く、これは頭...