你可能不知道的 NaN 以及 underscore 1.8.3 _.isNaN 的一个 BUG

huashiou 发布于2019-08-19 18:35 / 859人阅读

摘要：全局属性表示的值，顾名思义，就是表示不是一个数字。值得注意的是，是引入的，可以用上面的。而能通过函数的只有。该认为，应该返回。

这篇文章并不在我的 underscore 源码解读计划中，直到 @pod4g 同学回复了我的 issue（详见 https://github.com/hanzichi/underscore-analysis/issues/2#issuecomment-227361035）。其实之前也有同学提出 isNaN 有 native 的 function，正好借此文辨析下几个常见的概念、方法，她们是 NaN，Number.NaN，isNaN，Number.isNaN，以及 underscore 中的 _.isNaN，顺便揪出了一个 BUG。

顺便安利，完整的 underscore 源码解读系列文章请戳 https://github.com/hanzichi/underscore-analysis

NaN & Number.NaN

ok，首先来了解下 NaN 和 Number.NaN 两个属性。

全局属性 NaN 表示 Not-A-Number 的值，顾名思义，就是表示 不是一个数字。

在编码中很少直接使用到 NaN。通常都是在计算失败时，作为 Math 的某个方法的返回值出现的（例如：Math.sqrt(-1)）或者尝试将一个字符串解析成数字但失败了的时候（例如：parseInt("blabla")）。这样做的好处是，不会抛出错误，只需要在下一步的运算中判断上个步骤的运算结果是否是 NaN 即可。

接着来看 Number.NaN，这货和 NaN 完全一样。其实，归根结底这俩货都是属于 Number 类型：

Object.prototype.toString.call(NaN)
// "[object Number]"
Object.prototype.toString.call(Number.NaN)
// "[object Number]"

isNaN & Number.isNaN

接着来聊 isNaN 和 Number.isNaN 俩方法。

我们都知道，虽然 NaN 作为 Number 类型，但是她不等于她自己， NaN == NaN 或者 NaN === NaN 都会返回 false，那么怎么检测一个 NaN 值呢？答案大家都知道了，isNaN 方法。

isNaN(NaN)
// true
isNaN(undefined)
// true
isNaN({})
// true
isNaN("abc")
// true

好多东西传入 isNaN 的结果都是 true，并不只是 NaN，为什么？因为参数会先被强制转换成 Number 类型，然后再进行判断。

Number(NaN)
// NaN
Number(undefined)
// NaN
Number({})
// NaN
Number("abc")
// NaN

ok，强制转换后其实都变成了 NaN。

那么 Number.isNaN 和 isNaN 有何区别呢？和全局函数 isNaN() 相比，该方法不会强制将参数转换成数字，只有在参数是真正的数字类型，且值为 NaN 的时候才会返回 true。

isNaN = function(value) {
    Number.isNaN(Number(value));
}

Number.isNaN = Number.isNaN || function(value) {
    return typeof value === "number" && isNaN(value);
}

值得注意的是，Number.isNaN 是 ES6 引入的，可以用上面的 Polyfill。

_.isNaN

最后来看看 underscore 对于 _.isNaN 的实现。

写代码首先得看需求，我们先看看 _.isNaN 的作用，查阅 API 文档 http://underscorejs.org/#isNaN：

this is not the same as the native isNaN function, which will also return true for many other not-number values, such as undefined.

文档指出，_.isNaN 和 native 的 isNaN 并不一样，必须是个 Number 类型（才可能返回 true），等等，似乎和 Number.isNaN 一样？且慢下结论。

我们来看看 edge 版本对其的实现（https://github.com/jashkenas/underscore/blob/master/underscore.js）：

// Is the given value `NaN`?
_.isNaN = function(obj) {
  return _.isNumber(obj) && isNaN(obj);
};

obj 得是个 Number 类型，并且能通过 isNaN 函数的判断，才能返回 true。其实能通过这个函数的，只有两个值，NaN 和 new Number(NaN)（当然还有 Number.NaN，前面说了，NaN 和 Number.NaN 是一样的东西，下同）。

而能通过 Number.isNaN 函数的只有 NaN。（Number.isNaN(new Number(NaN) 会返回 false）

但是我看的 1.8.3 其实是这样实现的：

_.isNaN = function(obj) {
  return _.isNumber(obj) && obj !== +obj;
};

其实这是有 BUG 的，很显然 new Number(0) 并不应该是 Not-A-Number。

_.isNaN(new Number(0));
// true

为什么会这样写？这引发了我的好奇，找了下历史记录，是为了修复这个 issue https://github.com/jashkenas/underscore/issues/749。该 issue 认为，_.isNaN(new Number(NaN)) 应该返回 true。

我们可以看下再之前的版本对于 _.isNaN 的实现（https://github.com/jashkenas/underscore/commit/6ebb43f9b3ba88cc0cca712383534619b82f7e9b）：

_.isNaN = function(obj) {      
   return obj !== obj;   
};

我又翻了下当时的测试数据（https://github.com/jashkenas/underscore/blob/6ebb43f9b3ba88cc0cca712383534619b82f7e9b/test/objects.js），发现当时没有类似 new Number(0) 的测试数据（现在已经有了）。

总结

对于 NaN 的判断，如果只针对 Number 类型，用 underscore 最新版的 _.isNaN 判断完全没有问题，或者用 ES6 的 Number.isNaN，两者的区别就在于一个 new Number(NaN)，不过话又说回来，没人会这么蛋疼去这样 new 一个 NaN 吧？

云服务器 GPU云服务器可能不知道地方你不知道的怎么找一个软件的bug 你不知道的javascript

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79737.html

Underscore 源码（二）常用思路和类型判断

摘要：返回值是一个新数组，思路也很清楚，对于已经排好序的数组，用后一个和前一个相比，不一样就到中，对于没有排好序的数组，要用到函数对是否包含元素进行判断。前面已经介绍过了，关于 _ 在内部是一个什么样的情况，其实就是定义了一个名字叫做 _ 的函数，函数本身就是对象呀，就在 _ 上扩展了 100 多种方法。 showImg(https://segmentfault.com/img/remot...

mayaohua 2019-08-20 16:11 评论0 收藏0
【underscore.js 源码解读】常用类型判断以及一些有用的工具方法

摘要：最近开始看源码，并将源码解读放在了我的计划中。今天就跟大家聊一聊中一些常用类型检查方法，以及一些工具类的判断方法。用是否含有属性来判断工具类判断方法接下来看下一些常用的工具类判断方法。 Why underscore 最近开始看 underscore.js 源码，并将 underscore.js 源码解读放在了我的 2016 计划中。阅读一些著名框架类库的源码，就好像和一个个大师对话...

tanglijun 2019-08-19 18:22 评论0 收藏0
你并不需要Underscore/Lodash

摘要：将某个列表中的元素映射到新的列表中。判断序列中是否存在元素满足给定方程的条件。用来查找数组中某指定元素的索引如果找不到指定的元素则返回返回指定值在字符串对象中首次出现的位置。创建一个在经过了指定计数器之后才会被调用的方程。 You dont (may not) need Lodash/Underscore Lodash 和 Underscore 是非常优秀的当代JavaScript的工...

Mr_houzi 2019-08-19 17:37 评论0 收藏0
【underscore 源码解读】如何优雅地写一个『在数组中寻找指定元素』的方法

摘要：今天要讲的是，如何在数组中寻找元素，对应中的，，，以及方法。如果往一个有序数组中插入元素，使得数组继续保持有序，那么这个插入位置是这就是这个方法的作用，有序，很显然用二分查找即可。 Why underscore （觉得这部分眼熟的可以直接跳到下一段了...）最近开始看 underscore.js 源码，并将 underscore.js 源码解读放在了我的 2016 计划中。阅读一...

0x584a 2019-08-21 10:51 评论0 收藏0
从 Number.isNaN 与 isNaN 的区别说起例子

摘要：但是跟普通的是的不一样的是，代表这一意义。的没有的情况下，可以采用以下简单来看，就是在原有的基础上增加了一个的判断，因为的是。还有一种更加简单的实现利用了只有不跟自己相等的特性。不过我们可以通过以上方式来解释判断为什么会出现这样的情况了。例子大家先看一看下面这个例子， isNaN(NaN); isNaN(A String); isNaN(undefined); isNaN({...

2bdenny 2019-08-22 11:14 评论0 收藏0