前端缓动画为什么不能有小数_为什么 0.1 + 0.2 结果为 0.30000000000000004

本文为饥人谷原创文章，首发于 前端学习指南。

为什么 0.1 + 0.2 结果为 0.30000000000000004

如果你打开浏览器的控制台，输入以下代码并运行

> 0.1 + 0.2
 0.30000000000000004

奇怪，为什么不是 0.3。

这时可能你会去搜一下（很容易搜到结果），但是如果你了解计算机是如何存储小数（准确地说是浮点数）的话，很容易推断出原因。

我们需要有以下基础知识：

1. 计算机将所有数据以二进制的形式存储
2. 计算机用有限的大小来存储数据（因为现实生活中不存在无限大的内存或硬盘）

好的，然后结合我们的问题来看。

计算机如何存储 0.1 和 0.2？

如果你对十进制转二进制有兴趣可以看下图：

如果看不懂也可以直接看结论：十进制的 0.1 转为二进制，得到一个无限循环小数：0.00011…。
也就是说，二进制无法「用有限的位数」来表示 0.1。对于 0.2 也是一样的，不赘述。二进制能「用有限的位数」表示的有：0.5、0.25、0.125 等。

但是计算机只能用有限的位数来存一个数，所以最终，计算机存的数是一个近似于 0.1 的小数。

确切的二进制值是0-01111111011-1001100110011001100110011001100110011001100110011010，
对应的十进制值是0.10000000000000000555...。

这是计算机能表示的最接近 0.1 的数字（存储一个数字的空间越大则越精确）。（具体转换过程参考这里）

所以当我们计算 0.1 + 0.2 时，实际上算的是两个近似值相加，得到的值当然也是近似等于 0.3。

总结

1. 问题的根源是十进制小数转为二进制小数的过程中，会损失精度
2. 你在写代码的过程中，遇到小数都要小心，比如下面的代码会造成死循环var i = 0.1
   while(i!=1){
   console.log(i)
   i += 0.1
   }

因为 i 加 9 次 0.1，得到的值是 1 的近似值，并不是 1。

1. 你应该对计算机存储方式有一定的了解。

作者：方应杭

---

欢迎进群探讨技术，点击此微信扫码进群。