JSにおける4つのデータ型判定方法

JSにおける4つのデータ型判定方法

この記事では、4 つの判断方法についてまとめます。

1. 型

typeof :(1)typeof (式)、 (2)typeof変数名の 2 つの方法で使用できる演算子です。戻り値は、変数のデータ型を記述する文字列です。したがって、これを使用して、 numberstringobjectboolean値、 functionundefined 、およびsymbolそれぞれの場合で返される内容を次の表に示します。

// 文字列 console.log(typeof('lili')); // 文字列 
// 数値 console.log(typeof(1)); // 数値 
// ブール値 console.log(typeof(true)); // ブール値 
// 未定義 
console.log(typeof(undefined)); // 未定義 
// オブジェクト console.log(typeof({})); // オブジェクト 
// 配列 console.log(typeof([])); // オブジェクト 
// ヌル 
console.log(typeof(null)); // オブジェクト 
// 関数 console.log(typeof(() => {})); // 関数 
// シンボル値 console.log(typeof(Symbol())); // シンボル 

2. インスタンス

instanceof演算子は、コンストラクターのprototypeプロパティがインスタンス オブジェクトのプロトタイプ チェーンに出現するかどうかを検出するために使用されます。戻り値はブール値であり、変数がオブジェクトのインスタンスに属しているかどうかを示すために使用されます。構文は次のとおりです。

オブジェクトインスタンスコンストラクタ 

定数arr = [1, 2]; 
// オブジェクトのプロトタイプが配列のプロトタイプチェーン内にあるかどうかを確認します console.log(arr instanceof Object); // true 
// 配列のプロトタイプ arr const proto1 = Object.getPrototypeOf(arr); 
コンソールログ(proto1); // [] 
// 配列のプロトタイプのプロトタイプ arr const proto2 = Object.getPrototypeOf(proto1); 
コンソールログ(proto2); // [] 
//オブジェクトのプロトタイプ 
console.log(オブジェクトプロトタイプ); 
// arr のプロトタイプが Object のプロトタイプと等しいかどうかを確認します console.log(proto1 === Object.prototype); // false 
// arr のプロトタイプが Object のプロトタイプと等しいかどうかを確認します console.log(proto2 === Object.prototype); // true 
 


3. コンストラクター

この判断方法は、実はプロトタイプ、コンストラクタ、インスタンスの関係に関係しています。より詳しい説明は後ほど行います。以下では、この 3 つの関係を簡単に理解するだけで十分です。

関数 (コンストラクター) を定義すると、JS エンジンはそれにprototypeを追加します。プロトタイプには、コンストラクターを指す対応するconstructorプロパティがあるため、プロトタイプとコンストラクターは互いを認識します。コンストラクターがインスタンス化されると、対応するインスタンスが生成されます。インスタンスは対応するプロトタイプのconstructorプロパティにアクセスできるため、インスタンスは誰がそれを生成したかを理解し、生成された後の新しいオブジェクトのデータ型を理解できます。

定数val1 = 1; 
console.log(val1.constructor); // [関数: 数値] 
定数val2 = 'abc'; 
console.log(val2.constructor); // [関数: 文字列] 
val3 が true である。 
console.log(val3.constructor); // [関数: ブール値] 


この方法ではデータ型を判別できますが、次の 2 つの欠点があります。

  • nullundefinedは無効なオブジェクトなので、 constructorは存在しません。これら 2 種類のデータは、他の手段で判断する必要があります。
  • 関数のconstructor不安定です。これは主にカスタム オブジェクトに反映されます。開発者がprototypeを書き換えると、元のconstructor参照は失われ、 constructorデフォルトでObject

4.toString()

toString()Objectのプロトタイプメソッドです。このメソッドが呼び出されると、デフォルトでは現在のオブジェクトの[[Class]]が返されます。これは[object Xxx]という形式の内部プロパティです。Xxx はオブジェクトのタイプです。したがって、 Object.prototype.toString()メソッドを使用すると、変数の型をより正確に判断できます。

この型によって返されるさまざまな変数型の結果は次のとおりです。

この方法を使用すると、型識別関数を簡単に構築できます。コードは次のとおりです。

関数タイプ(ターゲット) { 
    const ret = typeof(ターゲット); 
    定数テンプレート = { 
        "[オブジェクト配列]": "配列",  
        "[オブジェクト オブジェクト]":"オブジェクト", 
        "[オブジェクト番号]":"番号 - オブジェクト", 
        "[オブジェクト ブール値]":"ブール値 - オブジェクト", 
        "[オブジェクト文字列]":'文字列オブジェクト' 
    } 
    if(ターゲット === null) { 
        'null' を返します。 
    } 
    そうでない場合(ret == "オブジェクト"){ 
        const str = Object.prototype.toString.call(target); 
        テンプレート[str]を返します。 
    } 
    それ以外{ 
        ret を返します。 
    } 
} 

console.log(type({})); // オブジェクト 
console.log(type(123)); // 数値 
console.log(type('123')); // 文字列 

以上で、JS における 4 つのデータ型判定方法についての説明は終了です。JS におけるデータ型判定方法についてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • js と jquery でデータ型を決定する 4 つの方法の概要
  • JavaScript でデータ型を判別する 4 つの方法
  • js データ型判定方法
  • js データ型とその判定方法の例
  • JSにおけるデータ型の正しい判定方法の例
  • JS を使用してデータ型を決定する 4 つの方法
  • JavaScriptの型判定方法をいくつか紹介

<<:  Docker ネットワークの原理とカスタム ネットワークの詳細な分析

>>:  scss で mixin が動作しない問題の解決方法 (ブラウザでコンパイルできない)

推薦する

Linux で unzip コマンドを使用して複数のファイルを解凍する方法

Linuxにunzipコマンドがない問題の解決策unzipコマンドを使用して.zipファイルを解凍す...

MySQL 5.7.21 履歴データディレクトリからデータを復元するチュートリアルの解凍バージョン

状況の説明: データベースが異常に起動およびシャットダウンしたため、サービスを再度起動したときに「起...

入力のid属性とname属性の違いの例

長い間ウェブサイトを作ってきましたが、入力時のnameとidの違いがまだわかりません。最近jQuer...

LinuxにNginxを素早くインストールする方法

目次nginxとは1. 必要な依存関係をダウンロードする2. nginxの圧縮パッケージをダウンロー...

Linux のプロセスクラッシュの原因をコアダンプ技術を使用して追跡する簡単な分析

最近、プロジェクトで問題が発生しました。サーバー側のプログラムが突然クラッシュして終了しました。クラ...

MySQL クラスター化インデックスのページ分割原理の分析例

この記事では、MySQL クラスター化インデックスのページ分割を例を使って説明します。ご参考までに、...

MySQLのnull値に関する小さな問題

今日、null 値をテストしていたところ、小さな問題が見つかりました。ここに記録しました。以前にも遭...

JavaScriptはブラウザがIEかどうかを判定します

フロントエンド開発者としては、IEの落とし穴は避けて通れません。他のブラウザはいいのにIEは壊れてい...

Ubuntu で中国語入力方法が使えない場合の解決策

Ubuntu では中国語入力方法の解決策はありません。仮想マシンや Ubuntu システムをインスト...

Vueデータ監視の原理の詳細な説明

目次1. はじめにII. 監視対象2.1 なぜオブジェクトを監視する必要があるのですか? 2.2 デ...

MySQL での Truncate の使用法の詳細な説明

序文:テーブルをクリアしたいときは、truncate ステートメントをよく使用します。ほとんどの場合...

ノードにおけるhttpモジュールの使用と実行プロセス

ノードにおけるhttpの役割は何ですか? httpモジュールの役割は、サーバーの作成と記述を支援する...

Dockerイメージをプライベートリポジトリにアップロードする方法の例

イメージは、GitHub と同様に Docker パブリック リポジトリに直接簡単にプッシュできます...

JavaScript+html はフロントエンドページでランダム QR コード検証を実装します

クールなフロントエンドページのランダムQRコード検証を参考までに共有します。具体的な内容は次のとおり...

Linuxでのcrontabの使い方と注意点の詳しい説明

Crontab は定期的な実行を設定するために使用されるコマンドです。そのデーモン プロセスは cr...