JavaScript中的Infinity(无穷)

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

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

1.Infinity(无穷)的定义

ECMAScript标准对Infinity的描述如下:

There are two other special values, called positive Infinity and negative Infinity. […] Note that these two infinite Number values are produced by the program expressions +Infinity (or simply Infinity) and -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比任何有限数都大。

让我们看一些例子:

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

负无穷

-Infinity (负无穷大)小于任何有限数。

让我们将-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

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

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

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

4. Infinity的使用情况

当我们需要初始化涉及数字比较的计算时,无穷值就非常方便。

例如,在数组中搜索最小值时:

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值。

解析数据

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

// Parses the float number
parseFloat('10.5'); // => 10.5

// Indicates an invalid number
parseFloat('ZZZ'); // => NaN

这里必须小心,因为parseFloat()可以将'Infinity'字符串解析为实际的Infinity数:

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

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

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

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

JSON 序列化

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

const worker = {
 salary: Infinity
};

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

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

最大数溢出

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

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

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

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。 如果尝试确定一个空数组的最大值或最小值,那结果后面人感到意外。

总结

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

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

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

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

原文地址:https://dmitripavlutin.com/infinity-in-javascript/

Image placeholder
前端答疑
未设置
  38人点赞

没有讨论,发表一下自己的看法吧

推荐文章
JavaScript中的强制类型转换

JavaScriptprimitives(原语)JavaScript建立在一系列基本单元之上。你应该对其中的一些已经很熟悉了,比如字符串和数字:vargreet="Hello";varyear=89;

JavaScript中对“this”的简单理解

1.this的奥秘很多时候,JS中的this对于咱们的初学者很容易产生困惑不解。this的功能很强大,但需要一定付出才能慢慢理解它。对Java、PHP或其他标准语言来看,this表示类方法中当前对象的

如何在JavaScript中操作数组?

JavaScript中的数组是什么?在开始之前,你需要先了解数组的真正含义。在JavaScript中,数组是一个用于存储不同数据类型的变量。它将不同的元素存储在一个盒子中,供以后使用。声明一个数组:l

可视化的JavaScript:JavaScript引擎运行原理

JavaScript很酷,但是JavaScript引擎是如何才能理解我们编写的代码呢?作为JavaScript开发人员,我们通常不需要自己处理编译器。然而,了解JavaScript引擎的基础知识并了解

零基础学习Swift中的数据科学

概述Swift正迅速成为数据科学中最强大、最有效的语言之一Swift与Python非常相似,所以你会发现2种语言的转换非常平滑我们将介绍Swift的基础知识,并学习如何使用该语言构建你的第一个数据科学

react中的webpack是什么?

Webpack是一个开源的前端打包工具。Webpack提供了前端开发缺乏的模块化开发方式,将各种静态资源视为模块,并从它生成优化过的代码。Webpack可以从终端、或是更改webpack.config

一起来学 TypeScript

鉴于JavaScript社区正式更名为F2E前端,我就大胆的把我另外一个项目也放上来。😄这个项目是关于TypeScript,是个人记录TypeScript的学习历程以及各个常用库的TypeScript

7 个好用的 TypeScript 新功能

作者:RC翻译:疯狂的技术宅 原文:https://blog.bitsrc.io/7-new-... 未经允许严禁转载 TypeScript语言小组一直在以惊人的速度推出新功能。从最新的《Javasc

浏览器中的JavaScript:什么是文档对象模型?什么是DOM操作?

JavaScript并没有那么糟糕。作为运行在浏览器中的脚本语言,它对于网页操作非常有用。在本文中,我们将看到可以用哪些手段来修改HTML文档和交互。什么是文档对象模型?文档对象模型是在浏览器中一切的

怎么在react中安装修饰器

怎么在react中安装修饰器在create-react-app下使用es7的@修饰器会报错''Supportfortheexperimentalsyntax'decorators-legacy'isn

怎么在react中使用weui

怎么在react中使用weui1、react没有安装的情况下:安装react和weuinpminstall--savereactreact-dom npminstall--saveweui@1.1.0

在react中怎么引用js

在react中怎么引用js推荐两种引入的方法,当然也可以自己编写一个JS类(ES6语法)实现动态插入JS到页面,然后在React项目引入。第一种:使用插件react-load-script如果没有安装

react中如何使用组件

react中如何使用组件前文我们介绍过了《如何写react组件》(感兴趣的同学可以过去学习),下面我们来说一下如何使用react组件。1、无状态组件的使用方法组件:constApp=(props)=>

如何将echarts集成到react中

如何将echarts集成到react中在使用echarts之前需要先安装echarts,可以直接使用node命令来安装npminstallecharts--save包依赖安装完毕后,这个时候我们的EC

Stylus系列——webpack-spritesmith配合stylus使用示例

一、前言基于Webpack的CSSSprites实现方案,若是直接在html中调用雪碧图图标已经很方便,但是实际开发过程可能遇到需要在伪元素中使用雪碧图,或者需要hover切换另一个图标,这种情况下就

喊话 JavaScript 开发者:玩 DOM 也要专业范儿

别再害怕DOM了,让我们充分挖掘DOM的潜力,你会真的爱上它。 2008年,当我刚成为一名专业Web开发人员参加工作时,我了解一些HTML、CSS和PHP的知识。那时我也在学习JavaScript

JavaScript 的数据结构和算法

现在有个还不是好的项目,未来会成为好的项目的项目想介绍给大家。传送门https://github.com/MasterShu/JavaScript-Da...这个是本人在维护的一个项目。主要是使用Ja

JavaScript 安全知识: CORS 简明教程

概述浏览器会强制同源策略以禁止不同源的网站获得响应; 『同源策略』不会阻止对其他来源的请求,但是会禁用JavaScript对响应内容的读取。 -CORS标头允许访问跨域响应。 -CORS与凭证一起需要

5种用于前端开发的JavaScript替代方案

JavaScript虽然是很受欢迎的语言,但是并不适合所有人,那么有哪些替代方案呢?本文将分析5种JavaScript替代方案。1995年,Netscape(网景通信公司)聘请BrendanEich为

javascript如何判断是不是整数?

方式一、使用取余运算符判断任何整数都会被1整除,即余数是0。利用这个规则来判断是否是整数。functionisInteger(obj){ returnobj%1===0 } isInteger(3);

9 个顶级的JavaScript图表库

数据可视化技术在过去十年中一直在不断改进,现在许多高级图表库可供消费者使用。在2000年代初期,图表生成主要由服务器端图像位图构成。诸如Flash和Silverlight之类的插件提供了更具交互性的图

JavaScript闭包基础指南

闭包是函数创建时范围内所有变量的集合。要使用闭包,请在另一个称为嵌套函数的函数内创建一个函数。内部函数将有权访问外部函数范围中的变量(Closure有助于访问外部函数范围),即使在返回外部函数之后也是

先学php还是javascript?

javascript是前台的东西,PHP是后台的东西,两者先学谁都是一样的。两者之间没有啥实质性的必然联系。Javascript就是浏览器执行的脚本语言,控制页面内容。php就是服务器端执行的语言,读

深入了解JavaScript async/await !

Asyncfunctions让我们以async这个关键字开始。它可以被放置在任何函数前面,像下面这样:asyncfunctionf(){ return1; }在函数前面的「async」这个单词表达了一

JavaScript基础之 DOM简介

JavascriptDOM(文档对象模型)是一个允许开发人员操纵页面内容、结构和风格的接口。在本文中,我们将理解什么是DOM以及如何用Javascript去操作它。本文还可以作为基本DOM操作的参考。