ホームページ ウェブフロントエンド jsチュートリアル JS でのデータ型検出の 4 つの方法の簡単な紹介

JS でのデータ型検出の 4 つの方法の簡単な紹介

Aug 06, 2018 pm 05:09 PM

JSでは1つのvarであらゆる型の変数を定義できるのでとても便利ですが、関数の戻り値が何型なのか、入力情報が何型なのかを知りたい場合には面倒な事もあります。このとき、データを検出する必要がありますが、データの種類をどのように検出するのでしょうか。

データ型検出メソッド:

  • typeof: データ型を検出するために使用される演算子

  • instanceof: インスタンスが特定のクラスに属しているかどうかを検出するために使用されます

  • constructor: コンストラクター関数とinstanceofは非常に似ています

  • Object.prototype.toString.call(); 最も正確で一般的に使用されるメソッド

typeof
typeof: データ型を検出するために使用される演算子、使用方法は typeof + 検出されたコンテンツです。

typeof を使用してデータ型を検出します。まず、文字列が返され、その文字列には対応するデータ型が含まれます。 1. typeof null の結果は「object」です

2. オブジェクト内の左右の値のデータ型を検出するために typeof が使用されるため、オブジェクト内の値が配列であるか、正規表現であるか、その他の値であるかを具体的に分解することはできません。データ型、最終的に返される結果は「object」です


instanceof
instanceof:インスタンスが特定のクラスに属しているかどうかを検出するために使用されます。使用方法:instanceinstanceofクラス名

インスタンスオブの制限事項
1. リテラルの処理には使用できません 作成された基本型の値: 基本的なデータ型の場合、リテラルによって作成された結果とインスタンスによって作成された結果の間には一定の違いがあります。インスタンスによって作成される値は、標準のオブジェクト データ型の値であり、標準の Number クラスのインスタンスです。リテラル メソッドによって作成される結果は、厳密なインスタンスではなく、基本的なデータ型の値です。 , Number.prototype が使用可能

var num  = 2;
console.log(typeof num); // ->控制台输出字符串numberconsole.log(typeof typeof typeof typeof function () {}); 
 // 输出的结果为字符串String,因为第一次使用typeof检测后结果为一个字符串数据类型的数据,以后每次检测都是String
ログイン後にコピー
    instanceof
    instanceof:用来检测某个实例是不是属于某个类;使用方法: 实例 instanceof 类名

    instanceof的局限性
    1. 不能用来处理字面量创建出来的基本类型值:对于基本的数据类型来说,字面量方式创建出来的结果和实例方式创建出来的结果是有一定的区别的,从严格的意义上来讲,只有实例创建出来的结果才是标准对象数据类型的值,也是标准的Number这一个类的实例;对于字面量方式创建的结果是基本的数据类型值,不是严谨的实例,但是由于JS的松散性,导致可以使用Number.prototype上提供的方法

     console.log(1 instanceof Number);//->控制台输出false
     console.log(new Number(1) instanceof Number);//-> 控制台输出true
    ログイン後にコピー
    1. instanceof只要在当前实例的原型链上,我们检测出来的结果都为true

    2. 在类的原型链继承当中,我们最后检测出来的结果未必正确

     function Fn() {
     }  
     var  ary = new Array;
     Fn.prototype = ary;//原型继承:让子类的原型等于父类的一个实例
     var  f =new Fn; // f->Fn.prototype->Array.prototype->Object.prototype
     console.log(f instanceof Array); //-> true
    ログイン後にコピー

    constructor:构造函数
    constructor:构造函数 这种方法与instanceof非常相似

    var obj = [];
    console.log(obj.constructor === Array ); //->trueconsole.log(obj.constructor === RegExp); //->false//console还可以出来基本的数据类型var num = 1;
    console.log(num.constructor === Number);//->true// constructor检测和instanceof一同,一般情况下是检测不了的var  reg = /^$/;
    console.log(reg.constructor === RegExp);//-> trueconsole.log(reg.constructor === RegExp);//-> false
    ログイン後にコピー

    局限性:我们可以把类的原型进行重写,在重写的过程中很有可能出现把之前的constructor覆盖了,这样检测出来的结果就是不准确的;对于特殊的数据类型null和undefined,它们的所属类是Null和Undefined,但是浏览器吧这两个类保护起来了,不允许我们进行访问使用

    function Fn() {}  
    Fn.prototype = new Array;var  f =new Fn;
    console.log(f.constructor);//-> Array
    ログイン後にコピー

    Object.prototype.toString.call()
    这种方法是我们真是项目中最长用的也是现在最准确的一种方式
    首先获取Object原型上的toString方法,让方法执行,并且改变方法中的this关键字的指向
    在了解这种方式之前我们先了解下toString这个方法
    toString:从字面上来看是转化成字符串,但是某些toString方法不仅仅是转化成字符串;对于Number、String、Boolean、Array、RegExp、Date、Function原型上的toString方法都是①把当前的数据类型转化为字符串的类型(它们的作用仅仅只是用来转成字符串);但是在Object原型上的toString方法不同于这些,②它的作用是返回当前方法的执行主体(方法中的this)所属的类的详细信息。
    第一中类型转成字符串

            //Number.prototype.toString方法是转化为字符串  
            console.log((1).toString()); //->这里的toString是Number.prototype.toString用法是转成字符串-> '1'
            console.log((1).__proto__.__proto__.toString());//[object Object]
            console.log((128).toString(2/8/10));//把数字转化为二进制、八进制、十进制
    ログイン後にコピー

    Object原型上的

    instanceof で提供されるメソッドが現在のインスタンスのプロトタイプチェーン上にある限り、検出した結果は true になります


    クラスのプロトタイプチェーン継承では、最終的に検出した結果は正しくない可能性があります

 ({name:'编程'}).toString();
 console.log(obj.toString());//-> toString中的this是Obj,返回的是obj所属类的信息->[Object Object]第一个Object代表当前实例是对象数据类型的(这个是固定死的),第二个Object代表的是obj所属的类是ObjectMath.toString();//->toString中的this是Math,返回的是Math所属类的信息 ->  [Object Math]console.log(Object.prototype.toString.call([]));                //->[object Array]console.log(Object.prototype.toString.call(/^$/));               //->[object Array]console.log(({}).toString.call(new  Date));                      //->[object Date]console.log(Object.prototype.toString.call(1));                  //->[object Number]console.log(Object.prototype.toString.call('编程'));             //->[object String]console.log(Object.prototype.toString.call(null));               //->[object Null]console.log(Object.prototype.toString.call(undefined));          //->[object Undefined]console.log(Object.prototype.toString.call(function () {}));     //->[object Function]
ログイン後にコピー
constructor:constructor

constructor:constructor このメソッドはinstanceof

と非常によく似ていますrrreee制限: クラスのプロトタイプを書き換えるプロセス中に、前のコンストラクターが上書きされる可能性が非常に高いため、特殊なデータ型については検出された結果が不正確になります。 null と未定義、それらが属するクラスは Null と Unknown ですが、ブラウザーはこれら 2 つのクラスを保護しており、アクセスを許可しませんrrreee

🎜Object.prototype.toString.call() 🎜このメソッドは、プロジェクトで最も一般的に使用されており、現在最も正確です。 まず、オブジェクト プロトタイプの toString メソッドを取得し、メソッドを実行して、メソッド内の this キーワードのポインティングを変更します。このメソッドを理解するには、まず toString メソッドについて学びます🎜toString: 文字通り文字列に変換されますが、一部の toString メソッドは文字列に変換されるだけではありません。文字列に変換されます。Number、String、Boolean、Array、RegExp、Date、および Function プロトタイプの場合、toString メソッドは、①現在のデータ型を文字列型に変換します (これらの関数は文字列に変換するためにのみ使用されます)。 ObjectプロトタイプのtoStringメソッドはこれらとは異なります。 ② 現在のメソッドの実行本体(メソッド内のthis)が属するクラスの詳細情報を返す機能です。 🎜最初の型は文字列に変換されます🎜rrreee🎜オブジェクトのプロトタイプ上🎜rrreee🎜 比較すると、4番目の方法の精度が最も高いため、私たちのプロジェクトでよく使われます。分かりましたか!!!🎜🎜関連する推奨事項:🎜🎜🎜🎜JavaScript でデータ型を検出するいくつかの方法の詳細な説明概要🎜🎜🎜🎜js データ型を判別するいくつかの方法🎜🎜

以上がJS でのデータ型検出の 4 つの方法の簡単な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか? 独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか? Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか? ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか? Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか? フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか? Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか? ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか? Mar 18, 2025 pm 03:16 PM

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

誰がより多くのPythonまたはJavaScriptを支払われますか? 誰がより多くのPythonまたはJavaScriptを支払われますか? Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

ソースマップを使用して、マイナイドJavaScriptコードをデバッグするにはどうすればよいですか? ソースマップを使用して、マイナイドJavaScriptコードをデバッグするにはどうすればよいですか? Mar 18, 2025 pm 03:17 PM

この記事では、ソースマップを使用して、元のコードにマッピングすることにより、Minified JavaScriptをデバッグする方法について説明します。ソースマップの有効化、ブレークポイントの設定、Chrome DevtoolsやWebpackなどのツールの使用について説明します。

Console.log出力の違い結果:なぜ2つの呼び出しが異なるのですか? Console.log出力の違い結果:なぜ2つの呼び出しが異なるのですか? Apr 04, 2025 pm 05:12 PM

Console.log出力の違いの根本原因に関する詳細な議論。この記事では、Console.log関数の出力結果の違いをコードの一部で分析し、その背後にある理由を説明します。 �...

初心者向けのタイプスクリプト、パート2:基本データ型 初心者向けのタイプスクリプト、パート2:基本データ型 Mar 19, 2025 am 09:10 AM

エントリーレベルのタイプスクリプトチュートリアルをマスターしたら、TypeScriptをサポートするIDEで独自のコードを作成し、JavaScriptにコンパイルできるはずです。このチュートリアルは、TypeScriptのさまざまなデータ型に飛び込みます。 JavaScriptには、NULL、未定義、ブール値、数字、文字列、シンボル(ES6によって導入)とオブジェクトの7つのデータ型があります。 TypeScriptはこれに基づいてより多くのタイプを定義し、このチュートリアルではすべてを詳細に説明します。 ヌルデータ型 JavaScriptのように、Typescriptのnull

See all articles