类型判断是我们在编程中常遇到的棘手问题,严格的变量类型约束会为代码减少很多致命的BUG。本文是对常用到的类型判断的一个整理,以求以最简洁的方式来判断变量的类型。
本文所有的如果没特指,都是基于ES5的原生javascript
众所周知,JavaScript中变量可能包含两种不同的数据类型的值:基本类型和引用类型。基本类型是指简单的数据段,有Number、String、Boolean、Udefined、Null,而引用类型指那些可能包含多个值的对象,有Object、Array、Date、RegExp、Function。在JavaScript中,我们通过var来声明变量,由于JavaScript是若语言类型,我们无法在申明的时候规定他的类型,JavaScript变量的类型是随变量的值改变而改变的。所以我们要判断变量值的类型。下图列举一些常见的类型:
类型 | 举例 |
---|---|
Null | null |
Udefined | udefined、未赋值的变量 |
Boolean | true、false |
Number | -1、0 、 1、 NaN |
String | ‘1’、’a’ |
Array | []、new Array() |
Object | {}、new Object() |
Function | function(){} |
读到这里也许你会问,这有什么棘手的,就这几种类型背下来不就行了么?然而我想告诉你:在大胆猜测的同时,也要用实践去证明你的猜测。然后你当你用typeof去检测它们的类型时,你就崩溃了:明明是Null为什么结果却是oject,明明是Array为什么还是obejct?…所以除了使用typeof方法外我们必须药寻找其他的方法,那么这些方法有哪些呢?请继续往下读(para表示要判断的变量):
用来判断是否为number类型的专有方法。但是需要注意的是,如果使用typeof判断那么结果会是number。
常用来判断一个变量是否存在,面对Arry、Object等引用类型变量时无论是否为空都会被转换成true
事实证明typeof并不是万能的,在对除Null以外的基本类型变量是相当有威力的,但是对引用类型变量和null时都会被识别成object
前面的typeof死在半路,无法打探到引用类型变量和null的真实情报,但是我们得出了另一个情报:他们都是obejct。那么我们就完全可以利用Object原型上的toString()方法来判断
类型 | 值 | isNaN(para) | !para | typeof para | toString(para) |
---|---|---|---|---|---|
Null | null | true | true | obejct | [obejct Null] |
Udefined | udefined | true | true | udefined | [obejct Udefined] |
Boolean | true/false | true | false/true | true | [obejct Boolean] |
Number | -1 | false | false | number | [obejct Number] |
Number | 0 | false | true | number | [obejct Number] |
Number | 1 | false | false | number | [obejct Number] |
Number | NaN | true | true | number | [obejct Number] |
String | ‘1’ | false | false | string | [obejct String] |
String | ‘a’ | true | false | string | [obejct String] |
String | ‘’ | true | true | string | [obejct String] |
String | ‘ ‘(中间包含空格) | true | false | string | [obejct String] |
Array | []/[4] | true | false | obejct | [obejct Array] |
Object | {}/{n:4} | true | false | obejct | [obejct Object] |
Function | function(){} | true | false | obejct | [obejct Function] |
根据上面的表格对比,我整理了一些常见的方法。并且再比较结果精准的情况下尽可能的简化比较过程.
字符串’1‘会被识别成number
- function isNumber(para) {
- return ! isNaN(para);
- };
在必要的情况下使用:此方法会把字符串’1‘识别成string类型
- function isStrictNumber(para) {
- return ! isNaN(para) && typeof para === 'number';
- };
- function isString(para) {
- return typeof para === 'string';
- };
在必要的情况下使用:此种方法会把字符串’1‘识别成number类型
- function isStrictString(para) {
- return isNaN(para) && typeof para === 'string';
- };
注意:使用typeof判断null结果为object
- function isBasicType(para) {
- return typeof para !== 'obejct';
- };
此方法只能识别null,如果要包含’’,请结合方法isStringNull()一起使用
- function isNull(para) {
- return ! para && typeof para === 'object';
- };
此方法只能识别”,如果要包含null,请结合方法isNull()一起使用
- function isStringtNull(para) {
- return ! para && typeof para === 'string';
- };
- function isUndefined(para) {
- return typeof para === 'undefined';
- };
当为null,undefined,”,0,-0,false,NaN
- function isFalse(para) {
- return ! para;
- };
- function isAllObject(_v) {
- return typeof _v === 'obejct';
- };
- function isObject(_v) {
- return !! v && typeof _v === 'obejct';
- };
- function isStrictObject(_v) {
- return Object.prototype.toString.call(_v) === '[object Object]';
- };
- function isArray(para) {
- return Object.prototype.toString.call(para) === '[object Array]';
- };
这里特指{}类JSON对象
- function isObject(para) {
- return Object.prototype.toString.call(para) === '[object Object]';
- };
- function isFunction(para) {
- return typeof para === 'function';
- };
当我们需要判断其他类型时,完全可以参照上面的表来写出自己的方法哦。
当然现在前端各种流行库不断推陈出新,我们完全可以直接使用别人封装好的库来实现这些功能,比如underscore.js、lodash.js等,但是编码的乐趣不就是在于自己解决最本质的问题么。所以即使有这么多的流行库大行其道,也不妨碍我们了解这些知识的初心,说不定哪天你自己也写出一个很火的库呢~
当然随着ES6标准的不断被各大浏览器厂商支持,ES6的普及度越来越广,这些方法都会被内置到原生javascript内部吧(有些方法已经加进去了~)。
本文标题:Javascript常用见问题之判断类型
文章作者:2ue
发布时间:2017年03月31日 – 17:03
最后更新:2017年11月15日 – 10:11
原始链接:http://2ue.github.io/2017/03/31/javascript-type/
许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。
来源: http://www.jqhtml.com/9627.html