前言

今天这篇文章，我们来看看ES5中的isNaN方法与ES6中Number.isNaN方法，具体来对比它们使用上的特性与差异性。我们直接开始吧。

Javascript

题目

我们首先通过下面几道题目来测试下大家对isNaN的掌握程度，如果以下题目能很熟练的回答，那么这篇文章的重点就应该都懂了。

测试题目

看到上面的题目，大家是不是都会呢？如果不会的话，就继续往下面看吧。

isNaN

首先我们来看看isNaN到底表示的是什么？

查找MDN的资料我们可以看到，isNaN()函数是用来确定一个值是否为NaN的。NaN是一个Number类型的数值，只不过这个值无法用真实的数字表示。

我们通过typeof操作符就可以看出来。

typeof NaN // 'number'

isNaN的怪异行为

从最早的JS版本中开始有isNaN函数，传入的参数如果为非数值类型，其返回结果就让人费解。

比如我们传入一个空对象{}时，按照这个方法的字面意思，空对象不是一个NaN，应该返回false。但是从文中一开始的题目可以看出结果是true。为什么会出现这样的情况呢？

isNaN产生

一方面是因为进行算术运算时，返回了一个无法表示的值时，比如0 / 0就会返回NaN。

tips：这里要注意一点除了0 / 0，其他数除以0都返回Infinity。

另一方面是因为需要强制转化为数值，但是无法转化成数值的时候会返回NaN。

上述的例子中如果传入一个空对象{}，会首先强制转化为数值，对于{}，是无法直接转换成数字的，因此在判断isNaN时会返回true。

题目讲解

知道上述NaN产生的原因后，我们就能很快的知道文章一开始的题目的结果了。

NaN

NaN在判断isNaN时，肯定会返回true。

undefined与{}

undefined与{}在进行isNaN判断时，会首先进行强制转换为数字，但是对于undefined类型和{}类型的数据是无法转换的，因此最后返回true。

true与null

true或者false这两个布尔类型在转换为数值类型分别会转化为1和0，因为在判断NaN时会返回false；null不同于undefined，在转换为数字时会将null转化为0，因此在判断NaN时会返回false。

37和37.37

这两个字符串很简单的可以转换成数字，因此都返回false。

''和' '

对于空格和只包含空格的字符串，在转化为数字时，会将其转化为0，因此在判断NaN时会返回false。

Date和Date.toString()

Date是一种比较特殊的类型，它是经过特殊处理的，在需要进行数值运算时，new Date()的返回值会被转化为毫秒数的数字，我们可以看看一个简单的例子。

Date数值计算

因此在进行NaN判断时返回false。

而对于Date.toString()方法，返回的是时间的字符串形式，是无法转化为数字的，因此判断NaN时会返回true。

'kingx'

任何非空的字符串在进行数值转换时都是无法完成的，会返回NaN，因此最终会返回true。

Number.isNaN()

兴许是为了解决JS中关于isNaN方法带给人的困惑，在ES6中针对Number类型，专门添加了isNaN方法用来判断是不是NaN了。

Number.isNaN()方法非常好理解，只有NaN才返回true，其他都返回false，不会做值转换判断。

因此在文章一开始的题目中，后面的几道题除了NaN，都会返回false。

Number.isNaN()的兼容性处理

如果在非ES6环境中想用ES6中的isNaN方法，该怎么办呢?

我们有以下兼容性方法处理。

兼容性处理

结束语

今天这篇文章主要将了关于isNaN()和Number.isNaN()的差异，大家都掌握了吗？