专栏首页Fundebug详解JavaScript 中的Infinity

详解JavaScript 中的Infinity

摘要: JSON.stringify 无法正确处理它!

Fundebug经授权转载,版权归原作者所有。

Infinity(无穷大)在 JS 中是一个特殊的数字,它的特性是:它比任何有限的数字都大,如果不知道 Infinity, 我们在一些运算操作遇到时,就会觉得很有意思。

现在我们来看看 JS 中的Infinity 属性,了解用例并解决一些常见的陷阱。

1.Infinity(无穷)的定义

无穷可以分为两种,正无穷和负无穷,JS 中对应的表示方式为:+Infinity(或者Infinity) 和 -Infinity

这意味着Infinity-Infinity(小于任何有限数的数字)都是number类型的特殊值:

typeof Infinity; // => 'number'
typeof -Infinity; // => 'number'

Infinity 是全局对象的属性:

window.Infinity; // => Infinity

另外,Number函数也有两个属性来表示正负无穷大:

Number.POSITIVE_INFINITY; // => Infinity
Number.NEGATIVE_INFINITY; // => -Infinity

2. Infinity 的特性

Infinity比任何有限数都大。

举几个例子 Look Look:

Infinity > 100; // => true
Infinity > Number.MAX_SAFE_INTEGER; // => true
Infinity > Number.MAX_VALUE; // => true

Infinity 在加法、乘法和除法等算术运算中用作操作数时会产生有趣的效果:

Infinity + 1; // => Infinity
Infinity + Infinity; // => Infinity

Infinity * 2; // => Infinity
Infinity * Infinity; // => Infinity

Infinity / 2; // => Infinity

一些Infinity 的运算得到有限的数:

10 / Infinity; // => 0

一个有限的数除以0得到 Infinity 结果:

2 / 0; // => Infinity

对无穷数进行概念上不正确的运算会得到NaN。 例如,不能除以无限数,也无法确定无限数是奇数还是偶数:

Infinity / Infinity; // => NaN
Infinity % 2; // => NaN

2.1 负无穷

负无穷小于任何有限数

-Infinity 与一些有限数字进行比较:

-Infinity < 100; // => true
-Infinity < -Number.MAX_SAFE_INTEGER; // => true
-Infinity < -Number.MAX_VALUE; // => true

同时,负无穷小于正无穷:

-Infinity < Infinity; // => true

当使用不同操作符操作数时,也可能会得到负无穷:

Infinity * -1; // => -Infinity
Infinity / -2; // => -Infinity
-2 / 0; // => -Infinity

3.判断无穷

幸运的是,Infinity等于相同符号的Infinity

Infinity === Infinity; // => true
-Infinity === -Infinity; // => true

但前面的符号不一样就不相等,就也很好理解:

Infinity === -Infinity; // => false

JSt 有一个特殊的函数Number.isFinite(value),用于检查提供的值是否有限数:

Number.isFinite(Infinity); // => false
Number.isFinite(-Infinity); // => false
Number.isFinite(999); // => true

4. 无穷的的使用情况

当我们需要初始化涉及数字比较的计算时,无穷值就非常方便。例如,在数组中搜索最小值时:

function findMin(array) {
    let min = Infinity;
    for (const item of array) {
        min = Math.min(min, item);
    }
    return min;
}

findMin([5, 2, 1, 4]); // => 1

min变量使用Infinity初始化。 在第一次for()迭代中,最小值成为第一项。

5. Infinity 的的一些坑

我们很可能不会经常使用Infinity值。 但是,值得知道何时会出现Infinity值。

5.1. 解析数据

假设 JS 使用一个输入(POST 请求、输入字段的值等)来解析一个数字。在简单的情况下,它会工作得很好:

parseFloat("10.5"); // => 10.5

parseFloat("ZZZ"); // => NaN

这里需要小心的,parseFloat()'Infinity'字符串解析为实际的Infinity数:

parseFloat("Infinity"); // => Infinity

另一个是使用parseInt()来解析整数,它无法将'Infinity'识别为整数:

parseInt("10", 10); // => 10

parseInt("Infinity", 10); // => NaN

5.2 JSON 序列化

JSON.stringify()Infinity数字序列化为null

const worker = {
    salary: Infinity
};

JSON.stringify(worker); // => '{ "salary": null }'

salary 属性值为Infinity但是当字符串化为 JSON 时,"salary"值将变为null

5.3 最大数溢出

Number.MAX_VALUE是 JS 中最大的浮点数。

为了使用甚至大于Number.MAX_VALUE的数字,JS 将该数字转换为Infinity

2 * Number.MAX_VALUE; // => Infinity
Math.pow(10, 1000); // => Infinity

5.4 Math 函数

JS 中Math命名空间的某些函数可以返回Infinity:

const numbers = [1, 2];
const empty = [];

Math.max(...numbers); // => 2
Math.max(...empty); // => -Infinity

Math.min(...numbers); // => 1
Math.min(...empty); // => Infinity

在不带参数的情况下调用Math.max()时,返回-Infinity,而Math.min()则相应地返回Infinity。 如果尝试确定一个空数组的最大值或最小值,那结果后面人感到意外。

总结

JS 中的Infinity表示无穷数的概念。 任何有限数均小于Infinity,而任何有限数均大于-Infinity

比较 JS 中的无穷值很容易:Infinity === Infinitytrue。特殊的函数Number.isFinite()确定提供的参数是否是一个有限的数字。

在涉及数字比较的算法时,可以使用Infinite初始化变量,用例是寻找数组的最小值。

解析来自输入的数字时,必须小心InfinityNumber('Infinity')parseFloat('Infinity')返回实际的Infinity。 当使用JSON.stringify()序列化时,Infinity变为null

版权声明

转载时请注明作者 Fundebug以及本文地址: https://blog.fundebug.com/2019/12/23/infinity_in_js/

您的用户遇到BUG了吗?

体验Demo 免费使用

.copyright *{box-sizing:border-box}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Node.js官方文档:到底什么是阻塞(Blocking)与非阻塞(Non-Blocking)?

    这篇博客将介绍Node.js的阻塞(Blocking)与非阻塞(Non-Blocking)。我会提到Event Loop与libuv,但是不了解它们也不会影响阅...

    Fundebug
  • 一步一步搭建前端监控系统:如何监控资源加载错误?

    怎样定位前端线上问题,一直以来,都是很头疼的问题,因为它发生于用户的一系列操作之后。错误的原因可能源于机型,网络环境,接口请求,复杂的操作行为等等,在我们想要去...

    Fundebug
  • 9012 年了,Array 数组的方法赶紧用起来!

    写久了业务代码的我,已经要被社会抛弃了。今天回过头去巩固基础知识,发现有很多自己业务中不经常用,或者说是不知道那个方法,导致自己重写一个方法去实现。关于 Arr...

    Fundebug
  • javascript 红皮高程(21)-- 乘性操作符

    注意啊,是乘性操作符,不是乘法操作符! ECMAScript定义了3个乘性操作符:乘法,除法,求模。它们的操作数在非数值的情况下,会执行自动的类型转换。要注意,...

    web前端教室
  • OpenCV人脸识别之三:识别自己的脸

    本系列人脸识别文章用的是opencv2,最新版的opencv3.2的代码请参考文章: OpenCV之识别自己的脸——C++源码放送(请在上一篇文章末尾查看) ...

    用户1332428
  • SAP CRM,C4C和Hybris的product Cockpit

    (1) Product Model in CRM part1 - basic introduction (2) Product Model in CRM pa...

    Jerry Wang
  • C++ endl的本质是什么

    自从在C语言的教科书中利用Hello world程序作为学习的起点之后,很多程序设计语言的教科书都沿用了这个做法。我们写过的第一个C++程序可能就是这样的。

    Dabelv
  • C++中endl的本质是什么

    自从在C语言的教科书中利用Hello world程序作为学习的起点之后,很多程序设计语言的教科书都沿用了这个做法。我们写过的第一个C++程序可能就是这样的。

    Dabelv
  • Jenkins(四)

    推荐VS Code扩展:Jenkins Pipeline Linter Connector

    zx钟
  • 使用ReactHook和context实现登录状态的共享

    使用react hook 和应用上下文context进行一个自定义的hook的开发。

    我已经洗完澡了

扫码关注云+社区

领取腾讯云代金券