isNaN问题

isNaN与Number.isNaN问题

问题的出现

在修复react项目的eslint错误中,遇到了不能用isNaN的问题,我脑子一转想到,用Number.isNaN不就解决问题了么!
说做就做,把所有的isNaN改好,被指出这样改是不对的,因为逻辑不完全一致,比如:

1
2
3
4
Number.isNaN('a')
//false
isNaN('a');
//true

解决问题

这就很让人头大,没办法,自己封装!
最开始我是这样处理的,用Number.isNaN(Number(param)代替isNaN,效果不错,已经解决了99.99%的问题,然而,只有一种情况例外,无参数!
不传参数的时候,和isNaN的表现相反。

1
2
Number.isNaN(Number())//false
isNaN()//true

好,不就是没有参数的时候例外,我加一个判断就OK,

1
2
3
4
5
if(!param){
return true
}else{
return Number.isNaN(Number(param))
}

跑测试用例,果不其然,问题没这么容易,问题是数字0,!0也是true,没理解再想一下去,继续改

1
2
3
4
5
6
7
8
9
10
const newIsNaN = (param) => {
//param !== param用来检测是否为NaN
if (typeof (param) === 'undefined' || param !== param) {
return true
} else if (param === 0 || !param) {
return false
} else {
return Number.isNaN(Number(param))
}
}

终于把测试用例都跑通了,代码说明,param !== param是用来检测参数是否是NaN的,其余的应该都好理解,但是被指出,代码复杂,逻辑不容易理解,改!

1
2
3
function newIsNaN (param){ 
return arguments.length === 0 ? true : Number.isNaN(Number(param))
}

再想一想,还是可以继续优化的呦:

1
2
3
function newIsNaN (param){ 
return arguments.length ? Number.isNaN(Number(param)) : true
}

差不多了,代码简洁了不少,不用箭头函数是因为箭头函数没有arguments,不懂的同学去看es6.
封装函数肯定要有测试用例,拿走不谢!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
console.log('NaN', newIsNaN(NaN))
console.log('NaN', isNaN(NaN))
console.log('NaN', newIsNaN('NaN'))
console.log('NaN', isNaN('NaN'))
console.log(newIsNaN(123))
console.log(isNaN(123))
console.log('0', newIsNaN(0))
console.log('0', isNaN(0))
console.log(newIsNaN('a1c2'))
console.log(isNaN('a1c2'))
console.log(newIsNaN([1, 2, 3]))
console.log(isNaN([1, 2, 3]))
console.log(newIsNaN({ a: 1 }))
console.log(isNaN({ a: 1 }))
console.log(newIsNaN())
console.log(isNaN())
console.log(newIsNaN(''))
console.log(isNaN(''))
console.log('undefined', newIsNaN(undefined))
console.log('undefined', isNaN(undefined))
console.log(newIsNaN(null))
console.log(isNaN(null))
上一篇

Eslint问题解决方案