首页 > js教程 > 正文

JavaScript中对数据类型检测的方法总结

原创 2018-03-14 18:30:35 0 4

本篇文章讲述了JavaScript中对数据类型检测的方法,大家对JavaScript中对数据类型检测的方法不了解的话或者对JavaScript中对数据类型检测的方法感兴趣的话那么我们就一起来看看本篇文章吧, 好了废话少说进入正题吧!

在这之前,先说说js的类型,js有5大基本类型和一个复杂类型
5大基本类型:undefined,null,number,string,bollean
一个复杂类型:object

1.typeof

返回值类型:字符串

检测如下:

                      /*5大基本类型*/

var a = 123;
console.log(typeof a == "number");      //true

var a = '123';
console.log(typeof a == "string");      //true

var a = true;
console.log(typeof a == "boolean");     //true

var a = undefined;
console.log(typeof a == "undefined");   //true

var a = null;
console.log(a == null);                 //true

            /*复杂类型*/

var a = function(){};
console.log(typeof a == "function");    //true

对于其他引用类型的对象,typeof不能检测区分,都会返回Object,如日期类型,正则表达式类型等,因此我们不能区分到底检测的是什么(用下文其他方法检测)

typeof 方法函数封装

function typeOf(obj){
    return (obj === 'null') ? 'null' : (typeof obj)
}

在这最后,补充一个特殊的NaN

console.log(typeof NaN === "number");       //true

2.instanceof

instanceof 运算符可以用来检测一个对象是不是另一个对象的实例

语法:object1 instanceof object2
参数:object1-一个对象,constructor-另一个对象

返回值类型: 布尔值Boolean

怎样理解上面抽象的话呢?

也就是说,通过实例对象的原型链可以访问构造函数对象的原型对象上,这也就是instanceof的工作原理,这也说明了,instanceof并不关心对象的本身结构,只是关心对象与构造函数的关系。

var a = new Date();
console.log(a instanceof Date);         //true
console.log(a instanceof Object);       //true

var a = new RegExp('123');
console.log(a instanceof RegExp);       //true
console.log(a instanceof Object);       //true

var a = function(){};
console.log(a instanceof Function);     //true
console.log(a instanceof Object);       //true

var a = [];
console.log(a instanceof Array);        //true
console.log(a instanceof Object);       //true

var a = {};
console.log(a instanceof Object);       //true

这里我列出了比较常用的实例,如果大家真的对instanceof比较关心的话,点击这里MDN文档

3.constructor属性

constructor 属性返回对创建此对象的构造函数的引用。

返回值类型: 对象Object

这里说明一点的是,我们平时创建的,如: var a = 1, var b = ‘123’…,其实都是引用他们相对应的构造函数从而创建出来他们对于的类型,而不是表面我们看到的直接创建。

各个类型检验方法如下:

         /*5大基本类型*/

var a = 123;
console.log(a.constructor == Number);   //true

var a = '123';
console.log(a.constructor == String);   //true

var a = true;
console.log(a.constructor == Boolean);  //true

var a = undefined;
console.log(a && a.constructor);        //undefined

var a = null;
console.log(a && a.constructor);        //null

            /*复杂类型*/

var a = function(){};
console.log(a.constructor == Function); //true

var a = new Date();
console.log(a.constructor == Date);     //true

var a = new Object();
console.log(a.constructor == Object);   //true
var a = {};
console.log(a.constructor == Object);   //true

var a = new Array();
console.log(a.constructor == Array);    //true
var a = [];
console.log(a.constructor == Array);    //true

var a = new RegExp('abc');
console.log(a.constructor == RegExp);   //true
var a = /^abc$/;
console.log(a.constructor == RegExp);   //true

4.toString()方法

这个方法检测对象类型最安全,最准确的方法。

返回值类型:字符串String

/*toString 检测类型函数*/
function toStringType(obj){
    return Object.prototype.toString.call(obj).slice(8, -1);
}
            /*5大基本类型*/

var a = 123;
console.log(toStringType(a));       //"Number"

var a = '123';
console.log(toStringType(a));       //"String"

var a = true;
console.log(toStringType(a));       //"Boolean"

var a = undefined;
console.log(toStringType(a));       //"Undefined"

var a = null;
console.log(toStringType(a));       //"Null"

            /*复杂类型*/

var a = function(){};
console.log(toStringType(a));       //"Function"

var a = new Date();
console.log(toStringType(a));       //"Date"

var a = new Object();
console.log(toStringType(a));       //"Object"
var a = {};
console.log(toStringType(a));       //"Object"

var a = new Array();
console.log(toStringType(a));       //"Array"
var a = [];
console.log(toStringType(a));       //"Array"

var a = new RegExp('abc');
console.log(toStringType(a));       //"RegExp"
var a = /^abc$/;
console.log(toStringType(a));       //"RegExp"

如果你觉得返回的字符串大小写比较麻烦的话,你可以全部转化成小写

代码如下:

function toStringType(obj){
    return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
}

到现这个地方,大家可能有疑惑。

var a = 123;
console.log(a.toString()); //"123"

1.为什么这样写,返回的是“123”?
答:因为js中每个对象都预定义有自己的toString方法,类似于重写了toString

2.文章中为什么要用call方法?作用是什么?
答:call作用是改变作用域为当前作用域,以文章为例,即将Object的作用域执行环境变为a的,

3.slice的作用?

var a = 123;
console.log(Object.prototype.toString.call(a));  //"[Object Number]"

通过这个例子,相比你即明白了吧,是为了结果的直观性。

以上就是本篇文章的所有内容,大家要是还不太了解的话,可以自己多实现两边就很容易掌握了哦!

相关推荐:

PHP数据类型检测实例详解

JavaScript中数据类型检测方法的总结

以上就是JavaScript中对数据类型检测的方法总结的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:JavaScript js 方法
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • 原生javascript实现分享到朋友圈功能 支持ios和android_javascript技巧
  • jQuery链式调用与show知识浅析_jquery
  • JS实现登录页面记住密码和enter键登录方法推荐_javascript技巧
  • BootstrapTable与KnockoutJS相结合实现增删改查功能【一】_javascript技巧
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 相关视频章节