0

0

JS中数据类型检测的四种方法简单介绍

php是最好的语言

php是最好的语言

发布时间:2018-08-06 17:09:06

|

1715人浏览过

|

来源于php中文网

原创

JS中我们只用一个var就能定义所有类型的变量,非常方便,但是也同样给我们造成了困扰,如果我们想知道一个函数的返回值是什么类型的,或者输入的信息是什么类型的时候就要通过对数据进行检测,所以我们该如何进行数据类型的检测呢? 

数据类型检测方式:

  • typeof:用来检测数据类型的运算符

  • instanceof:用来检测某个实例是不是属于某个类

  • constructor:构造函数 作用和instanceof非常相似

  • Object.prototype.toString.call();   最准确的最常用的方法

typeof
typeof:用来检测数据类型的运算符;使用方式是  typeof + 检测的内容。

使用typeof检测数据类型,首先返回的都是一个字符串,字符串中包含对应的数据类型;
var num  = 2;
console.log(typeof num); // ->控制台输出字符串numberconsole.log(typeof typeof typeof typeof function () {}); 
 // 输出的结果为字符串String,因为第一次使用typeof检测后结果为一个字符串数据类型的数据,以后每次检测都是String

typeof的局限性
 1.  typeof null 的结果为“object”
 2.  不能具体细分是数组还是正则,还是对象中的其他值,因为使用typeof检测数据类型,对于对象数据类型中左右的值,最后返回的结果都是“object”


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. 在类的原型链继承当中,我们最后检测出来的结果未必正确

    易语言学习手册 十天学会易语言图解教程  pdf版
    易语言学习手册 十天学会易语言图解教程 pdf版

    十天学会易语言图解教程用图解的方式对易语言的使用方法和操作技巧作了生动、系统的讲解。需要的朋友们可以下载看看吧!全书分十章,分十天讲完。 第一章是介绍易语言的安装,以及运行后的界面。同时介绍一个非常简单的小程序,以帮助用户入门学习。最后介绍编程的输入方法,以及一些初学者会遇到的常见问题。第二章将接触一些具体的问题,如怎样编写一个1+2等于几的程序,并了解变量的概念,变量的有效范围,数据类型等知识。其后,您将跟着本书,编写一个自己的MP3播放器,认识窗口、按钮、编辑框三个常用组件。以认识命令及事件子程序。第

    下载
 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原型上的

 ({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]

所有经过对比我们第四中方式的准确性是最高的,所以也是我们项目中经常使用的。Are you get it!!!

相关推荐:

详解在javaScript中检测数据类型的几种方式总结

js 判断数据类型的几种方法

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

14

2026.01.30

c++ 字符串格式化
c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

9

2026.01.30

java 字符串格式化
java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

12

2026.01.30

python 字符串格式化
python 字符串格式化

本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

4

2026.01.30

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

20

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

18

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

19

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

3

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号