JavaScript 中的无穷数(Infinity)详解


Posted in Javascript onFebruary 13, 2020

为了保证的可读性,本文采用意译而非直译。

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 === Infinity 为 true。特殊的函数Number.isFinite()确定提供的参数是否是一个有限的数字。

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

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

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

Javascript 相关文章推荐
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
Javascript attachEvent传递参数的办法
Dec 14 Javascript
js函数中onmousedown和onclick的区别和联系探讨
May 19 Javascript
JavaScript中使用Substring删除字符串最后一个字符
Nov 03 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
JS实现完全语义化的网页选项卡效果代码
Sep 15 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
jQuery 实现双击编辑表格功能
Jun 19 jQuery
微信小程序实现轮播图效果
Sep 07 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
Sep 25 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
在vue中把含有html标签转为html渲染页面的实例
Oct 28 Javascript
node.js使用stream模块实现自定义流示例
Feb 13 #Javascript
Vue export import 导入导出的多种方式与区别介绍
Feb 12 #Javascript
JS FormData对象使用方法实例详解
Feb 12 #Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
Feb 12 #Javascript
微信小程序实现树莓派(raspberry pi)小车控制
Feb 12 #Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 #Javascript
使用webpack搭建pixi.js开发环境
Feb 12 #Javascript
You might like
PHP 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
2011/11/21 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
Python中的descriptor描述器简明使用指南
2016/06/02 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
Python实现的购物车功能示例
2018/02/11 Python
python实现定时提取实时日志程序
2018/06/22 Python
Python基本socket通信控制操作示例
2019/01/30 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
Python用Try语句捕获异常的实例方法
2019/06/26 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
python画微信表情符的实例代码
2019/10/09 Python
Python调用.NET库的方法步骤
2019/12/27 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
新闻专业个人自我评价
2013/09/21 职场文书
上级检查欢迎词
2014/01/18 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
2014年维稳工作总结
2014/11/18 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书
MySQL 覆盖索引的优点
2021/05/19 MySQL