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

ブログ    

推薦する

HTML 要素に注釈を付けるときにクラスと ID のどちらが優れているかを分析する

Web ページには、非常に複雑な HTML 構造があります。CSS を使用して関連するスタイルを定義...

Dockerコンテナはルーティングを介して直接通信し、ネットワーク通信を実現します。

概要Docker 自体の現在のデフォルト ネットワークについては、単一ホスト上の異なる Docker...

SpringBoot と Vue の相互作用におけるクロスドメイン問題の解決策

目次ブラウザ同一生成元ポリシー1. VUEフロントエンド構成プロキシはクロスドメインの問題を解決しま...

JS 手ぶれ補正機能の実装と使用シナリオ

目次1. 手ぶれ補正機能とは何ですか? 1. なぜ手ぶれ補正機能が必要なのでしょうか? 2. 手ぶれ...

JSコードコンパイラMonacoの使い方

序文私が必要としているのは、構文の強調表示、関数プロンプト、自動行折り返し、およびコードの折りたたみ...

Java で ffmpeg を呼び出してビデオ形式を flv に変換する方法の詳細な説明

Java で ffmpeg を呼び出してビデオ形式を flv に変換する方法の詳細な説明注:以下のプ...

MySQL で distinct メソッドを使用する詳細な例

明確な意味: distinctive は、一意のレコードの数を照会するために使用されます。つまり、d...

SpringBootをDockerにデプロイし、jarパッケージを置き換える方法の詳細な説明

目次プロジェクトディレクトリDockerファイルファイルの展開画像を生成するコンテナを起動するウェブ...

Vue は Ctrip のカルーセル効果を模倣します (スライディング カルーセル、以下は高度に適応)

まずケースを見てみましょう。vue+swiper を使用して実装します。スライドの高さが異なる場合、...

VMware ESXi 6.0 および仮想マシンのインストール チュートリアルの展開 (画像とテキスト)

社内には以前からアイドル状態だった、構成の整ったサーバーがあったので、EXSI 6.0 を使って複数...

HTMLタグオーバーフロー処理アプリケーション

CSSを使用してスクロールバーを変更する1.コンテンツがオーバーフローした場合のオーバーフロー設定水...

MySQL GRANT ユーザー認証の実装

承認とは、ユーザーに特定の権限を付与することです。たとえば、新しく作成したユーザーに、すべてのデータ...

中国語と英語のフォント名の比較表(FounderとArphicを含む)

CSS ファイルでは、フォント名が文字化けしていることがよくあります。これは、作成者が中国語フォン...

Centos7 DockerでNginxファイルを変更するプロセスの詳細な説明

1. docker に nginx をインストールします。 docker に Nginx をインスト...

MySQL 5.7.20 圧縮版のダウンロードとインストールの簡単なチュートリアル

1. ダウンロードアドレス:参考: http://dev.mysql.com/downloads/m...