JavaScript判断数据类型有几种方法及区别介绍


Posted in Javascript onSeptember 02, 2020

有五种数据判断类型方法typeof 、instanceof、constructor、Object.prototype.toString.call()、jquery.type()

一、typeof方法

typeof是个操作符,可以判断基本数据类型(返回的结果只能是number,string,boolean,null,symbol,function,object)
返回值分以下几种
对于基本类型。除了null值返回object以外,其他均返回正确的结果
对于引用值来说,除了function返回function类型,其他都返回object类型
例:

console.log(
 typeof 100, //"number"
 typeof 'abc', //"string"
 typeof false, //"boolean"
 typeof undefined, //"undefined"
 typeof null, //"object"
 typeof [1,2,3], //"object"
 typeof {a:1,b:2,c:3}, //"object"
 typeof function(){console.log('aaa');}, //"function"
 typeof new Date(), //"object"
 typeof /^[a-zA-Z]{5,20}$/, //"object"
 typeof new Error() //"object"
 typeof new Number(100), //'object'
 typeof new String('abc'),// 'string'
 typeof new Boolean(true),//'boolean'
)
 

二、instanceof方法

一般用来检测引用数据类型,表达式为:A instanceof B,判断A是否是B的实例,如果 A 是 B 的实例,则返回 true,否则返回 false,由构造类型判断出数据类型

console.log(
 100 instanceof Number, //false
 'dsfsf' instanceof String, //false
 false instanceof Boolean, //false
 undefined instanceof Object, //false
 null instanceof Object, //false
 [1,2,3] instanceof Array, //true
 {a:1,b:2,c:3} instanceof Object, //true
 function(){console.log('aaa');} instanceof Function, //true
 new Date() instanceof Date, //true
 /^[a-zA-Z]{5,20}$/ instanceof RegExp, //true
 new Error() instanceof Error //true
)
//注意: instanceof 后面一定要是对象类型,大小写不能写错,该方法试用一些条件选择或分支

还需要注意null和undefined都返回了false,这是因为它们的类型就是自己本身,并不是Object创建出来它们,所以返回了false。

三、constructor方法

constructor是prototype对象上的属性,指向构造函数,

var num = 123;
var str = 'abcdef';
var bool = true;
var arr = [1, 2, 3, 4];
var json = {name:'wenzi', age:25};
var func = function(){ console.log('this is function'); }
var und = undefined;
var nul = null;
var date = new Date();
var reg = /^[a-zA-Z]{5,20}$/;
var error= new Error();

function Person(){
 
}
var tom = new Person();

// undefined和null没有constructor属性
console.log(
 tom.constructor==Person,
 num.constructor==Number,
 str.constructor==String,
 bool.constructor==Boolean,
 arr.constructor==Array,
 json.constructor==Object,
 func.constructor==Function,
 date.constructor==Date,
 reg.constructor==RegExp,
 error.constructor==Error
);
//所有结果均为true

注意:除了undefined和null之外,其他类型都可以通过constructor属性来判断类型

方法四:Object.prototype.toString 方法

用来检测对象类型

var toString = Object.prototype.toString;

toString.call(123); //"[object Number]"
toString.call('abcdef'); //"[object String]"
toString.call(true); //"[object Boolean]"
toString.call([1, 2, 3, 4]); //"[object Array]"
toString.call({name:'wenzi', age:25}); //"[object Object]"
toString.call(function(){ console.log('this is function'); }); //"[object Function]"
toString.call(undefined); //"[object Undefined]"
toString.call(null); //"[object Null]"
toString.call(new Date()); //"[object Date]"
toString.call(/^[a-zA-Z]{5,20}$/); //"[object RegExp]"
toString.call(new Error()); //"[object Error]"

toString是Object原型对象上的一个方法,该方法默认返回其调用者的具体类型更严格的讲,是 toString运行时this指向的对象类型, 返回的类型格式为[object,xxx],xxx是具体的数据类型,其中包括:String,Number,Boolean,Undefined,Null,Function,Date,Array,RegExp,Error,HTMLDocument等等都可以通过这个方法获取到

5、无敌万能的方法:jquery.type()

如果对象是undefined或null,则返回相应的“undefined”或“null”。

jQuery.type( undefined ) === "undefined"
jQuery.type() === "undefined"
jQuery.type( window.notDefined ) === "undefined"
jQuery.type( null ) === "null"

如果对象有一个内部的[[Class]]和一个浏览器的内置对象的 [[Class]] 相同,我们返回相应的 [[Class]] 名字

jQuery.type( true ) === "boolean"
jQuery.type( 3 ) === "number"
jQuery.type( "test" ) === "string"
jQuery.type( function(){} ) === "function"
jQuery.type( [] ) === "array"
jQuery.type( new Date() ) === "date"
jQuery.type( new Error() ) === "error" // as of jQuery 1.9
jQuery.type( /test/ ) === "regexp"

其他一切都将返回它的类型“object”。
6 . 自己也可以封装一个获取变量准确类型的函数

function gettype(obj) {
 var type = typeof obj;

 if (type !== 'object') {
 return type;
 }
 //如果不是object类型的数据,直接用typeof就能判断出来

 //如果是object类型数据,准确判断类型必须使用Object.prototype.toString.call(obj)的方式才能判断
 return Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, '$1');
}

总结

到此这篇关于JavaScript判断数据类型有几种方法及区别介绍的文章就介绍到这了,更多相关js 判断数据类型内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript中变量提升 Hoisting
Jul 03 Javascript
js动态改变select选择变更option的index值示例
Jul 10 Javascript
jQuery中通过ajax的get()函数读取页面的方法
Feb 29 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
Oct 04 Javascript
如何利用模板将HTML从JavaScript中抽离
Oct 08 Javascript
JavaScript获取URL中参数querystring的方法详解
Oct 11 Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
JS中parseInt()和map()用法分析
Dec 16 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
深入剖析JavaScript instanceof 运算符
Jun 14 Javascript
微信提示 在浏览器打开 效果实现过程解析
Sep 10 Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 #jQuery
JavaScript交换变量常用4种方法解析
Sep 02 #Javascript
Vue-cli打包后部署到子目录下的路径问题说明
Sep 02 #Javascript
Jquery $.map使用方法实例详解
Sep 01 #jQuery
JQuery基于FormData异步提交数据文件
Sep 01 #jQuery
vue实现路由懒加载的3种方法示例
Sep 01 #Javascript
JQuery使用数组遍历跳出each循环
Sep 01 #jQuery
You might like
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
javascript实时显示北京时间的方法
2015/03/12 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
JavaScript中绑定事件的三种方式及去除绑定
2016/11/05 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
Vue.js bootstrap前端实现分页和排序
2017/03/10 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
vue中如何使用ztree
2018/02/06 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
2018/10/29 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
[06:45]2018DOTA2亚洲邀请赛 4.5 SOLO赛 Sccc vs Maybe
2018/04/06 DOTA
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
如何用Python合并lmdb文件
2018/07/02 Python
python使用folium库绘制地图点击框
2018/09/21 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
Keras搭建自编码器操作
2020/07/03 Python
如何在python中判断变量的类型
2020/07/29 Python
Python中生成ndarray实例讲解
2021/02/22 Python
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
幼儿园中班新学期寄语
2014/01/18 职场文书
经典婚礼主持词
2014/03/13 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
mybatis-plus模糊查询指定字段
2022/04/28 Java/Android