js判断类型为数字的方法汇总

2019-11-28

方法一：

判断类型时，最最容易想到的就是typeof，但是如果通过typeof来判断是否为number类型，如果被判断的是NaN返回的结果也会是number，因此我们还需要用isNaN来排除NaN的情况。

1
2
3

function isNumber (obj) { 
    return typeof obj === 'number' && !isNaN(obj) 
}

此外isNaN()相比Number.isNaN()会把被判断的参数强制转换成数字再进行判断，而Number.isNaN()只有在参数是真正的数字类型，且值为NaN时才会返回true。

Number.isNaN(NaN)         // true
Number.isNaN(Number.NaN)  // true
Number.isNaN(0 / 0)       // true
    
Number.isNaN(null)        // false
Number.isNaN(37)          // false
Number.isNaN("37")        // false
 
Number.isNaN("NaN")       // false 不会隐式转换
window.isNaN('NaN')       // true 会隐式转换

方法二：

isNaN(obj) 等价于isFinite()。Infinity在js表示数字的无穷大,判断是否可用做数字的最佳方法则是isFinite()，因为该方法会筛除掉NaN和Infinity两个关键字。

1
2
3

function isNumber (obj) { 
    return typeof obj === 'number' && isFinite(obj)     
}

同样的， Number.isFinite()方法用来检测传入的参数是否是一个有穷数（finite number）。和全局的 isFinite() 函数相比，这个方法不会强制将一个非数值的参数转换成数值，这就意味着，只有数值类型的值，且是有穷的（finite），才返回 true。

Number.isFinite(Infinity)  // false
Number.isFinite(NaN)       // false
Number.isFinite(-Infinity) // false
 
Number.isFinite(0)         // true
Number.isFinite(2e64)      // true
 
Number.isFinite('0')       // false, 全局函数 isFinite('0') 会返回 true

方法三：

用Object.prototype.toString来实现，只是代码量要稍微大一点。

1
2
3

function isNumber (obj) { 
    return Object.prototype.toString.call(obj) === '[object Number]' && !isNaN(obj) 
}

或者

1
2
3

function isNumber (obj) {
    return Object.prototype.toString.call(obj) === '[object Number]' &&  isFinite(obj)     
}

多扯一点，toString()方法返回一个表示该对象的字符串。默认情况下，toString()方法被每个Object对象继承。如果此方法在自定义对象中未被覆盖，toString()返回 “[object type]” ，其中type是对象的类型。
但是，待检测对象也许会重写toString()方法，这时就无法检测toString来判断类型。所以要保证能够检测类型，需要调用Object.prototype.toString来进行判断。如下：

let X = function (x) {
    this.name = x
}
 
let x =  new X()
 
x.toString() // "[object,Object]"  使用继承的toString
Object.prototype.toString.call(x) // "[object,Object]"
 
X.prototype.toString = function () { // 重写父类的toString方法
    return 'not type'
}
 
x.toString() // "not type"   使用重写后的toString，就不再返回类型
 
Object.prototype.toString.call(x) // "[object,Object]"

但是返回的” [ object, Type]” 不太好分辨，可以进行特殊的处理，直接返回类型名称。

// 获取类型
function getType (target){
    let types = {}
    let temp = Object.prototype.toString.call(target)
    //types映射类型
    'Boolean Number String Null Undefined Symbol Function Array Date RegExp Object Error NodeList'.split(' ').map(value => {
        types[`[object ${value}]`] = value.toLowerCase()
    })
 
    if (types[temp]) {
        return types[temp]
    } else if (temp.indexOf('HTML') !== -1) { // 判断是否为DOM元素
        return 'element' 
    } else {
            return
        }
    }
    
// 测试
 
getType(1) //  "number"
getType(Symbol(1)) // "symbol"
getType([]) // "array"
getType({}) // "object"
getType(document.querySelectorAll('div')) // "nodelist"

这样就可以便捷的获取到类型名称了。
这里有提到了原型链，可以参看一篇写的很通熟易懂的博文，放上链接原型链。

方法四：

据说这个方法是世界上最短的数字判断代码。

1
2
3

function isNumber (obj) { 
    return obj === +obj 
}

下面是通过该方法进行的延伸。
1、判断字符串：

1
2
3

function isString (obj) { 
    return obj === obj+'' 
}

2、判断布尔类型：

1
2
3

function isBoolean (obj) { 
    return obj === !!obj 
}

方法五：

用正则来实现，这也是我们最常用的方式。

function isNumber (obj) {
  let reg = /^[0-9]+.?[0-9]*$/
  if (reg.test(obj)) {
    return true
  }
  return false
}

一个正在成长的前端小白~