javascript 中判断数据类型有两种情况:1.基本数据类型 2.引用数据类型
1.基本数据类型:boolean,(object/null),string,number,undefined,function
判断方式:typeof
console.log(typeof 45) //number console.log(typeof true) //boolean console.log(typeof alert) //function console.log(typeof {}) //object console.log(typeof str) //undefined console.log(typeof "test") //string
2.引用数据类型:Date,Array,RegExp等
console.log(/a/g instanceof RegExp ? "RegExp" : false); //RegExp console.log([1,2,3] instanceof Array ? "Array" : false); //Array console.log(new Date() instanceof Date ? "Date" : false); //Date
如果是引用数据类型用typeof来检查就变成了下面的情况:
console.log(typeof /a/g ); //object console.log(typeof [1,2,3] ); //object console.log(typeof new Date()); //object
反过来用instanceof来检查基本数据类型是什么情况呢?
console.log(23 instanceof Number); //false console.log(true instanceof Boolean); //false console.log(alert instanceof Function); //true console.log({} instanceof Object); //true console.log(str instanceof undefined); //报错 console.log("test" instanceof String); //false
从结果看出,检查类型前,要先知道是基本数据类型,还是引用类型很重要。
于是在很多框架中出现了,isXXX这样的方法,用于类型判断,但研究源码发现,判断类型和上面的方式不一样。
判断类型不用typeof、instanceof呢?看看下面的代码
console.log((23).toString()); //23 console.log((/2/).toString()); ///2/ console.log(({}).toString()); //[object Object] console.log(alert.toString()); //函数源码 //console.log(str.toString()); //报错 str 未定义 console.log("test".toString()); //test
上面的代码中有一个很特别: [object Object],这是一个对象的toString方法,输出的结果与别的类型的toString方法不一样。如果其它类型也调用对象的toString方法会是什么样的结果呢?
console.log({}.toString.call(23)); //[object Number] console.log({}.toString.call(/2/)); //[object RegExp] console.log({}.toString.call({})); //[object Object] console.log({}.toString.call(alert)); //[object Function] //console.log({}.toString.call(str)); //报错 console.log({}.toString.call("test")); //[object String]
上面的输出是不是很有意义?看到这个结果,看以知道数据类型了。 其中{}.toString.call(23)(call起了关键作用,{}是一个字面量的写法。)简单理解就是让23调用对象的toString方法。
再看看几个例子:
console.log({}.toString.call([1,2,3])); //[object Array] console.log({}.toString.call(alert)); //[object Function] console.log({}.toString.call(true)); //[object Boolean]
看了上面的输出他们都有一个共同点:[object .....]这样的形式。
我们如果要判断常用的数据类型,只要定义好映射关系。就能正确的得到数据类型了。
//定义关系 var types={ "[object Number]":"Number", "[object Object]":"Object", "object Function]":"Function", "[object String]":"String", "[object Boolean]":"Boolean", "[object RegExp]":"RegExp", "[object Array]":"Array" } //类型判断调用函数 function type(para){ return types[{}.toString.call(para)]; } console.log(type(/a/)); //RegExp console.log(type({})); //Object console.log(type(true)); //boolean console.log(type([])); //Array console.log(type(12)); //Number
上面能正确判断类型够用吗?
我们再利用{}.toString.call()输出几个结果。
console.log({}.toString.call(new Date())); //[object Date] console.log({}.toString.call(document)); //[object XULDocument] console.log({}.toString.call(window)); //[object Window]
看看一个比较完整的判断:mass FrameWork GitHub
var class2type={ "[objectHTMLDocument]":"Documnt", "[objectHTMLCollection]":"NodeList", "[objectStaticNodeList]":"NodeList", "[objectIXMLDOMNodeList]":"nodeList", "[objectDOMWindow]":"Window", "object gloabal":"Window", "null":"Null", "NaN":"NaN", "undefined":"Undefined" }, toString = class2type.toString; "Boolean,Number,String,Function,Array,Date,RegExp,Window,Document,Arguments,NodeList".replace(/[^,]+/g,function(name){ class2type["[object "+ name +"]"] = name; }); var type = function(obj,str){ var result = class2type[(obj == null || obj !==obj) ? obj : toString.call(obj)] || obj.nodeName || "#"; if(result.charAt(0) ==="#"){//兼容旧式浏览器与处理个别情况,如window.opera //利用IE678 window == document为true,document == window竟然为false的神奇特性 if(obj == obj.document && obj.document != obj){ result ="Window";//返回构造器名字 }else if(obj.nodeType === 9 ){ result = "Document";//返回构造器名字 }else if(obj.callee){ result = "Arguments";//返回构造器名字 }else if(isFinite(obj.length) && obj.item){ result = "NodeList"; //处理节点集合 }else{ result = toString.call(obj).slice(8,-1); } } if(str){ return str === result; } return result; }
使用如下:
console.log(type(1)); //Number console.log(type(document)); //Document console.log(type(true)); //Boolean console.log(type([],"Array")); //true
注意:
1.replace的用法。
2.null,undefined判断
3.个别浏览器的处理。
学习中.....
相关推荐
一个可以直接使用的判断数据类型的js文件,里面整理了比较全面的判断各种数据类型分方法,前端的小伙伴看过来
主要介绍Javascript如何判断数据类型和数组类型,通俗易懂,需要的朋友可以参考下。
主要介绍了JavaScript数据类型和判断方法的相关资料,帮助大家更好的理解和学习JavaScript,感兴趣的朋友可以了解下
主要介绍了JavaScript 判断数据类型的4种方法,帮助大家更好的理解和学习JavaScript,感兴趣的朋友可以了解下
主要介绍了JavaScript判断数据类型有几种方法及区别介绍,本文给大家分享多种方法通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
typeof typeof用的比较多的时候,是判断某个全局变量在不在,假如某个页面定义了一个全局变量。假如你做如下判断: //haorooms是全局变量 ...此外,typeof还可以进行数据类型的判断!如下: var haorooms=string; c
这篇文章主要介绍了JavaScript如何判断input数据类型,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在HTML中接收用户输入信息一般都会用到<input/>。我...
JavaScript 中常见数据类型有Number、String、Boolean、Object、Array、Json、Function、Date、RegExp、Error、undefined、Null等十几种。ES6还有新增的数据类型有Symbol、Set、Map等。在实际应用中,我们经常需要...
前端学习(三)——javaScript学习笔记(一)认识、数据类型、循环判断.xmind
最近对javascript数据类型的验证又有了一个新的认识,原来可以判断得这么简单又如此全面。 我们自定义了isString,isNumber ,isDate ,isError ,isRegExp ,isBoolean ,isNull ,isUndefined ,isObject等方法。现在将...
主要介绍了关于JavaScript的变量的数据类型的判断方法,JS是一种弱类型语言,其数据类型的相关特性有时也受到不少开发者的诟病,需要的朋友可以参考下
最近做了一个项目,其中有关于js判断数据类型的处理,在网上搜了相关资料,并且亲自测试了各种数据类型的判断,绝对安全。下面小编把具体内容总结分享给大家,大家参考下! 一、JS中的数据类型 1.数值型(Number...
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
判断字符串得到string,数字和NaN得到number,函数会得到function等,但是判断数组,对象和null时都会得到object,详细请看js数据类型,这就是typeof的局限性,并不能准确的判断该变量的”真实身份”。那如何判断一...