isNaN与Number.isNaN问题
问题的出现
在修复react项目的eslint错误中,遇到了不能用isNaN的问题,我脑子一转想到,用Number.isNaN不就解决问题了么!
说做就做,把所有的isNaN改好,被指出这样改是不对的,因为逻辑不完全一致,比如:
1 2 3 4
| Number.isNaN('a')
isNaN('a');
|
解决问题
这就很让人头大,没办法,自己封装!
最开始我是这样处理的,用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))
|