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 が動作しない問題の解決方法 (ブラウザでコンパイルできない)

推薦する

Macでのファイル権限の表示と設定の詳細な説明

序文Mac システムのターミナルでファイルの権限を変更するには、Linux の chmod コマンド...

MySQLパーティションテーブルは月別に分類されています

目次テーブルを作成するデータベース ファイルを表示します。入れるクエリ消去補足:Mysqlは月テーブ...

iframe なしの div ネスト HTML

最近、宿題をしているときに、iframe を使用せずにページをネストする必要があったため、jquer...

リフレッシュリダイレクトを実現する HTML ヘッドタグメタ

コードをコピーコードは次のとおりです。 <html> <ヘッド> <m...

Ubuntu 16.04 で MySQL マスター スレーブ同期を設定する方法

準備1. マスターとスレーブのデータベースのバージョンは一致している必要があります2. マスターデー...

DIVマスクを使用して、マウスでチェックボックスを直接チェックすることが無効である問題を解決します

フロントエンドの開発過程で、チェックボックスが必要な状況が発生しました。ユーザー操作の利便性を考慮し...

Docker で MySQL をデプロイする詳細なプロセス (Docker でデプロイされる一般的なアプリケーション)

以前にも紹介しました: docker (一般的なアプリケーションのデプロイ): docker dep...

win10 で mysql8.0.23 をインストールし、「サービスが制御機能に応答しません」という問題を解決する方法

Windows10にmysqlをインストールする1. 公式サイトからMySQLをダウンロードするウェ...

MySQL サービスを起動できない問題の解決策を含む MySQL 5.7.17 インストール チュートリアル

.net 開発に関しては、Microsoft の SQL Server データベースに精通しており、...

Nexusプライベートサーバー構築原理とチュートリアル分析

1つ。 Nexus プライベート サーバーを構築する理由は何ですか?社内の開発メンバーは全員外部ネッ...

MySQLビューの原理と使用法の詳細な説明

この記事では、例を使用して MySQL ビューの原理と使用方法を説明します。ご参考までに、詳細は以下...

MySQL累積計算実装方法の詳しい説明

目次序文需要分析MySQL ユーザー変数累積計算にMysqlユーザー変数を使用する要約するこの記事で...

Vueはmockjsを使用してシミュレートされたデータケースの詳細を生成します

目次プロジェクトにmockjsをインストールするVueプロジェクトでmockjsを使用する基本的なプ...

jQueryブリージングカルーセルの制作原理を詳しく解説

この記事では、jQueryブリージングカルーセル制作原理の具体的なプロセスを参考までに紹介します。具...

MySQL 結合クエリ構文と例

接続クエリ:これは、2 つのクエリ (またはテーブル) の各行をペアで接続した結果です。つまり、1 ...