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 相关文章推荐
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 Javascript
JavaScript Eval 函数使用
Mar 23 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
Feb 23 Javascript
js中将URL中的参数提取出来作为对象的实现代码
Aug 16 Javascript
js当一个变量为函数时 应该注意的一点细节小结
Dec 29 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
jquery使用$(element).is()来判断获取的tagName
Aug 24 Javascript
详解express与koa中间件模式对比
Aug 07 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
vue文件树组件使用详解
Mar 29 Javascript
用 js 写一个 js 解释器过程详解
Aug 02 Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 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
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
Node.js五大应用性能技巧小结(必须收藏)
2017/08/09 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
Vue实现固定定位图标滑动隐藏效果
2019/05/30 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
详解 Python中LEGB和闭包及装饰器
2017/08/03 Python
Python实现购物车功能的方法分析
2017/11/10 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
Python 将Matrix、Dict保存到文件的方法
2018/10/30 Python
python多线程与多进程及其区别详解
2019/08/08 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
企业管理专业个人求职信范文
2013/09/24 职场文书
计算机专业个人简短的自我评价
2013/10/23 职场文书
报告会主持词
2014/04/02 职场文书
建房协议书
2014/04/11 职场文书
统计学教授推荐信
2014/09/18 职场文书
努力工作保证书
2015/02/28 职场文书
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android