你真的知道 Number.isNaN 和 isNaN 的区别嘛?

前言

本文和大家分享一个前几天写代码踩的坑,笔者在业务逻辑中需要对一个值进行 NaN 的判断,由于笔者的不严谨,使用了isNaN,从而引起了Bug,也正是因为这个,笔者才知道了 isNaNNumber.isNaN 的区别,如果你认为这俩没区别,觉得 isNaN 是历史遗留的全局变量,后面又加到 Number 上的话,建议你接着往下看。如果你知道他们的区别,可以划走了。👻

笔者将从以下两个方面来描述这个知识点:

  1. 什么是NaN
  2. isNaNNumber.isNaN 的区别是什么。

什么是NaN

JS 中的 NaN,是 Not a Number 的缩写,代表一个值 或者 一个表达式的值 不是一个数字。它有以下几个特点:

  1. 不等于任何其他值,包括它本身。这意味着 NaN 与任何值的比较都会返回false,包括 NaN 本身。
  2. 它是全局作用域中的一个变量。
  3. Number.NaNNaN 是同一个东西,有相同的特性,只不过一个是全局变量;一个是 Number 上的属性。但是它俩也不能划等号,毕竟 NaN 自己都不等于自己。
  4. NaN 涉及数学运算,通常情况下都会返回 NaN,但是还有例外,看下图:
  5. NaN 涉及关系比较(>, <, >=, <=)时,都返回false

什么情况下会得到NaN呢?

  1. 显式将非 NumBer 类型转为 Number 类型,比如 Number('aaa')
  2. 在调用一些需要数字类型参数的 API 时,可能 API 内部会做转换,一旦无法转为数字,可能就返回了 NaN,比如 Math.abs('aaa')
  3. 等等......

那在平时开发中,为了保证我们写的代码逻辑运行正常,就可能需要对 NaN 判断,接下来我们就来看下判断 NaN 的两个 API 有啥不同。

isNaNNumber.isNaN 的区别

首先,这俩 API 都能够用于判断 NaN,这一点从 API 的名字就能看出,然后各位看图总结不同的地方:

不同点:

  • Number.isNaN 是直接拿参数与 NaN 去比,也就是说,你一定要传 NaN 进去才返回 true。至于怎么比的,咱也不知道,反正不是 ===,因为 NaN 的特性------自己不等于自己
  • isNaN 会先尝试将参数转换成数字,如果可以转换成数字,则返回 false;否则返回true

咱们不妨来讨论一下,Number.isNaN内部的实现,肯定不是:

js 复制代码
Number.isNaN = (target) => target === NaN  // 自己不等于自己

我猜可能是:

js 复制代码
// 因为只有传 `NaN` 进去才返回 `true`,而 NaN 是 Number 类型
// 再加上 `NaN + '' === 'NaN'`
// 也许是对的
Number.isNaN = (target) => Object.prototype.toString.call(target) === '[object Number]' && target+'' === 'NaN'

总结

本文主要内容为:

  1. NaN 的特性
  2. isNaNNumber.isNaN 的区别,一句话总结:Number.isNaN只有传 NaN 进去才返回 trueisNaNNaN 或者不能转化为 Number 的都会返回 true

以后咱们还是不要使用isNaN为好!

如果本文对你有一点点帮助,点个赞支持一下吧,你的每一个【】都是我创作的最大动力 ^_^

相关推荐
Dream it possible!17 分钟前
LeetCode 面试经典 150_栈_有效的括号(52_20_C++_简单)(栈+哈希表)
c++·leetcode·面试··哈希表
怪兽20141 小时前
IntentService 的应用场景和使用方式?
android·面试
爱生活的苏苏2 小时前
elementUI 表单验证-联动型校验
前端·javascript·elementui
编程岁月3 小时前
java面试-0141-java反射?优缺点?场景?原理?Class.forName和ClassLoader区别?
java·开发语言·面试
一只小风华~3 小时前
Vue Router 路由元信息(meta)详解
前端·javascript·vue.js
*且听风吟3 小时前
html 实现鼠标滑动点亮横轴
前端·javascript·html
沐怡旸5 小时前
【底层机制】【Android】Binder架构与原理
android·面试
crystal_pin5 小时前
wangEditor与kityFormula集成解决思路
面试
007php0075 小时前
Docker 实战经验之关键文件误删恢复指南(一)
jvm·docker·云原生·容器·面试·职场和发展·eureka
速易达网络5 小时前
Vue3 原生移动应用开发来了
前端·javascript·css