NaN 和 isNaN 的彩蛋

作者 : 开心源码 本文共1139个字,预计阅读时间需要3分钟 发布时间: 2022-05-12 共236人阅读

NaN 是一个全局对象的属性(和 Number.NaN 的值一样),表示不是一个数字(Not-A-Number)。

NaN 的产生

以下场景下都有可能产生 NaN 值:

  • 不定式
0/0;Infinity/Infinity;0 * Infinity;Infinity - Infinity;Math.pow(1, Infinity);
  • 产生复数结果的运算
// 负数开偶次方Math.sqrt(-1);
  • 类型转换
'a' - 1;undefined - 1;parseInt('a1');parseFloat('a1');

这里需要注意 parseInt()parseFloat() 的特殊性,与 Number() 的整体转换不同,这两者只转换第一个无效字符之前的字符。

parseInt('1a');    // 1parseInt('a1');    // NaN

isNaN()

日常编码中很少会直接操作 NaN 值,一般会在数值运算出现异常时出现,那么我们如何判断一个值能否为 NaN 呢?

NaN == NaN;     // falseNaN === NaN;    // false

可怕!NaN 自身居然不等于自身(这也是 JS 值中唯逐个个如此特殊的)。所以等号运算符是不能正确判断的,只能通过 isNaN() 函数。

然而,isNaN() 函数也并不如其名 —— 判断能否为(数字类型下的)非法数字,更精确的说是 判断一个值在转换成数字类型后能否为非法数字

isNaN('1');      // 1isNaN([]);       // 0isNaN(false);    // 0

这是由于,假如 isNaN() 函数的参数不是 Number 类型, isNaN 函数会首先尝试将这个参数转换为数字类型,而后才会对转换后的结果能否是 NaN 进行判断。

这里收集了少量特殊值在转换为数字类型和 NaN 判断时的体现。除了 Number()isNaN() 函数在不传参数的情况下有差异之外,其余体现都是符合预期的。

参数NumberisNaN
0true
undefinedNaNtrue
null0false
true1false
false0false
0false
{}NaNtrue
[]0false
[1]1false
[1, 2]NaNtrue

但我们可以通过预判断参数能否为数字类型来优化 isNaN 函数:

var _isNaN = function(v) {  return typeof v === 'number' && isNaN(v);}

Number.isNaN()

ES6 提供了 Number?.isNaN() 函数,不会强制将参数转换为字。也就是说,只有在参数为数字类型且值为 NaN 时才会返回 true

Number.isNaN(null);    // falseNumber.isNaN('1');     // false

Reference

  • MDN: NaN
  • MDN: isNaN()
  • MDN: Number?.isNaN()

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » NaN 和 isNaN 的彩蛋

发表回复