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

推薦する

あなたのウェブサイトはIE8に適していますか?

オリンピック期間中にIE8ベータ2がリリースされ、英語版のリリースに合わせて中国語版も第一波でリリー...

Vueはメニューナビゲーションを実装するためにelement-uiを使用します

この記事では、Element-uiを使用してメニューナビゲーションを実装するVueの具体的なコードを...

Alibaba Cloud ホストが IP を使用して Web サイトにアクセスできない問題の解決策 (セキュリティ グループ ルールを構成することで解決)

Alibaba Cloud ホストを購入したばかりで、その速度を試すのが待ちきれませんでした。しか...

getdata テーブル テーブル データ 結合 mysql メソッド

パブリック関数 json_product_list($where, $order){ グローバル ...

シンプルなナビゲーションバー機能を実現するHTML+CSS

さっそく、コードを見てみましょう(初心者:特に言うことはありません) <!DOCTYPE ht...

CSS と JavaScript を使用して管理ダッシュボードのレイアウトを構築するためのサンプル コード

あなたが作成するものこの新しいチュートリアルでは、CSS と JavaScript を使用して、レス...

Vue大画面表示適応方法

この記事では、vueの大画面表示適応の具体的なコードを参考までに紹介します。具体的な内容は以下のとお...

UDP シンプル サーバー クライアント コード例

UDP の理論については詳しく説明しません。UDP に関する HelloWorld プログラムを紹介...

MySQLデータベースについて学びましょう

目次1. データベースとは何ですか? 2. データベースの分類は? 3. データベースとデータ構造の...

HTMLリンクを書くときは、HTTPリクエストを減らすためにサブフォルダに必ずスラッシュを追加してください。

サブフォルダーの末尾にスラッシュがない場合、2 つの HTTP リクエストが生成され、効率に影響しま...

mysql 8.0.18.zip のインストールと構成方法のグラフィック チュートリアル (Windows 64 ビット)

以前にインストールされたバージョンのデータベースをアンインストールする方法については、この記事を参照...

HTML で Web ページに動的な時計を書く

HTML を使用して動的な Web クロックを作成します。コードは次のとおりです。 <!DOC...

UbuntuでGRUBの起動時間を変更する

grubの起動時間を変更するためのオンライン検索は基本的に/etc/default/grubを変更す...

MySQL 8.0.19 のインストールと設定方法のグラフィックチュートリアル

この記事は、参考のためにMySQL 8.0.19のインストールと設定のグラフィックチュートリアルを記...