浅谈JavaScript中小数和大整数的精度丢失

 更新时间:2016年05月31日 09:17:19   投稿:jingxian  
下面小编就为大家带来一篇浅谈JavaScript中小数和大整数的精度丢失。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

先来看两个问题:

0.1 + 0.2 == 0.3; // false
9999999999999999 == 10000000000000000; // true

第一个问题是小数的精度问题,在业界不少博客里已有讨论。第二个问题,去年公司有个系统的数据库在做数据订正时,发现有部分数据重复的诡异现象。本文将从规范出发,对上面的问题做个小结。

最大整数

JavaScript 中的数字是用 IEEE 754 双精度 64 位浮点数 来存储的,其格式为:

s x m x 2^e

s 是符号位,表示正负。 m 是尾数,有 52 bits. e 是指数,有 11 bits. 在 ECMAScript 规范 里有给出 e 的范围为 [-1074, 971]. 这样,很容易推导出 JavaScript 能表示的最大整数为:

1 x (2^53 - 1) x 2^971 = 1.7976931348623157e+308

这个值正是 Number.MAX_VALUE

同理可推导出 Number.MIN_VALUE 的值为:

1 x 1 x 2^(-1074) = 5e-324

注意 MIN_VALUE 表示最接近 0 的正数,而不是最小的数。最小的数是 -Number.MAX_VALUE

小数的精度丢失

JavaScript 的数字都是双精度浮点数,在计算机里用二进制存储。当有效位数超过 52 位时,会存在精度丢失。比如:

十进制 0.1 的二进制为 0.0 0011 0011 0011 … (循环 0011)
十进制 0.2 的二进制为 0.0011 0011 0011 … (循环 0011)
0.1 + 0.2 相加可表示为:
   e = -4; m = 1.10011001100...1100(52 位)
 + e = -3; m = 1.10011001100...1100(52 位)
---------------------------------------------
   e = -3; m = 0.11001100110...0110
 + e = -3; m = 1.10011001100...1100
---------------------------------------------
   e = -3; m = 10.01100110011...001
---------------------------------------------
 = 0.01001100110011...001
 = 0.30000000000000004(十进制)

根据上面的演算,还可以得出一个结论:当十进制小数的二进制表示的有限数字不超过 52 位时,在 JavaScript 里是可以精确存储的。比如:

0.05 + 0.005 == 0.055 // true

进一步的规律,比如:

0.05 + 0.2 == 0.25 // true
0.05 + 0.9 == 0.95 // false

需要考虑 IEEE 754 的 Rounding modes, 有兴趣的可进一步研究。

大整数的精度丢失

这个问题鲜有人提及。首先得弄清楚问题是什么:

1. JavaScript 能存储的最大整数是什么?

该问题前面已回答,是 Number.MAX_VALUE, 非常大的一个数。

2. JavaScript 能存储的且不丢失精度的最大整数是什么?

根据 s x m x 2^e, 符号位取正,52 位尾数全填充 1, 指数 e 取最大值 971, 显然,答案依旧是 Number.MAX_VALUE.

我们的问题究竟是什么呢?回到起始代码:

9999999999999999 == 10000000000000000; // true

很明显,16 个 9 还远远小于 308 个 10. 这个问题与 MAX_VALUE 没什么关系,还得归属到尾数 m 只有 52 位上来。

可以用代码来描述:

var x = 1; // 为了减少运算量,初始值可以设大一点,比如 Math.pow(2, 53) - 10
while(x != x + 1) x++;
// x = 9007199254740992 即 2^53

也就是说,当 x 小于等于 2^53 时,可以确保 x 的精度不会丢失。当 x 大于 2^53 时,x 的精度有可能会丢失。比如:

x 为 2^53 + 1 时,其二进制表示为:
10000000000...001 (中间共有 52 个 0)
用双精度浮点数存储时:
e = 1; m = 10000..00(共 52 个 0,其中 1 是 hidden bit)
显然,这和 2^53 的存储是一样的。

按照上面的思路可以推出,对于 2^53 + 2, 其二进制为 100000…0010(中间 51 个 0),也是可以精确存储的。

规律:当 x 大于 2^53 且二进制有效位数大于 53 位时,就会存在精度丢失。这和小数的精度丢失本质上是一样的。

hidden bit 可参考:A tutorial about Java double type.

小结

小数和大整数的精度丢失,并不仅仅在 JavaScript 中存在。严格来说,使用了IEEE 754 浮点数格式来存储浮点类型的任何编程语言(C/C++/C#/Java 等等)都存在精度丢失问题。在 C#、Java 中,提供了 Decimal、BigDecimal 封装类来进行相应的处理,才避开了精度丢失。

注:ECMAScript 规范中,已有  decimal proposal,但目前尚未被正式采纳。

最后考考大家:

Number.MAX_VALUE + 1 == Numer.MAX_VALUE;
Number.MAX_VALUE + 2 == Numer.MAX_VALUE;
...
Number.MAX_VALUE + x == Numer.MAX_VALUE;
Number.MAX_VALUE + x + 1 == Infinity;
...
Number.MAX_VALUE + Number.MAX_VALUE == Infinity;
// 问题:
// 1. x 的值是什么?
// 2. Infinity - Number.MAX_VALUE == x + 1; 是 true 还是 false ?

以上这篇浅谈JavaScript中小数和大整数的精度丢失就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • JavaScript实现小球沿正弦曲线运动

    JavaScript实现小球沿正弦曲线运动

    这篇文章主要为大家详细介绍了JavaScript实现小球沿正弦曲线运动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • 初探js和简单隐藏效果的实例

    初探js和简单隐藏效果的实例

    下面小编就为大家分享一篇初探js和简单隐藏效果的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-11-11
  • Javascript如何递归遍历本地文件夹

    Javascript如何递归遍历本地文件夹

    这篇文章主要介绍了Javascript如何递归遍历本地文件夹,文中代码非常细致,帮助大家更好的理解和学习JavaScript递归,感兴趣的朋友可以了解下
    2020-08-08
  • JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析

    JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析

    这篇文章主要介绍了JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能,结合实例形式分析了JSON.parse()与JSON.stringify()方法实现深拷贝的相关实现技巧与操作注意事项,需要的朋友可以参考下
    2019-03-03
  • javascript利用apply和arguments复用方法

    javascript利用apply和arguments复用方法

    这篇文章主要介绍了javascript利用apply和arguments复用方法,有需要的朋友可以参考一下
    2013-11-11
  • JS实现图片延迟加载并淡入淡出效果的简单方法

    JS实现图片延迟加载并淡入淡出效果的简单方法

    我们大家都知道,对于一个网站最占用带宽,最影响页面显示速度的东西就是图片。图片是很重要的,作为一个站长我们是千方百计的使用各种技巧来优化图片,但其实有一种简单的方法,只需要几行代码就能达到这种效果。同时还附加一种淡入淡出的显示效果,下面一起来看看。
    2016-08-08
  • JS寄快递地址智能解析的实现代码

    JS寄快递地址智能解析的实现代码

    这篇文章主要介绍了JS寄快递地址智能解析,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • 利用函数的惰性载入提高javascript代码执行效率

    利用函数的惰性载入提高javascript代码执行效率

    在 addEvent 函数每次调用的时候都要走一遍,如果浏览器支持其中的一种方法,那么他就会一直支持了,就没有必要再进行其他分支的检测了
    2014-05-05
  • uniapp微信小程序底部动态tabBar的解决方案(自定义tabBar导航)

    uniapp微信小程序底部动态tabBar的解决方案(自定义tabBar导航)

    tabBar如果应用是一个多tab应用,可以通过tabBar配置项指定tab栏的表现,以及tab切换时显示的对应页,下面这篇文章主要给大家介绍了关于uniapp微信小程序底部动态tabBar的解决方案,需要的朋友可以参考下
    2022-04-04
  • 解决layui页面按钮点击无反应,也不报错的问题

    解决layui页面按钮点击无反应,也不报错的问题

    今天小编就为大家分享一篇解决layui页面按钮点击无反应,也不报错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论