详解Javascript中被你忽略的浮点数运算的坑,来学习吧

前言

在讲解本篇文章的内容开始之前,我们先来掌握以下一些知识点。

  • Javascript中的数字都是双精度的浮点数。

  • Javascript中的整数并不是一个独立的数据类型,而是浮点数的一个子集。

Javascript

浮点数的坑

我们直接看下面的一个例子。

在浏览器的console控制台上我们分别进行以下的浮点数运算。

控制台的浮点数运算

通过控制台的运算,我们可以很惊奇的看到答案,有些运算结果竟然和我们想像的不一样,比如0.1+0.2的返回结果不是0.3,而是0.30000000000000004。

原因

首先要肯定的是这不是浏览器的问题,而是由于浮点数的精度导致的。

浮点数的精度问题并不是Javascript所独有的,例如在Java中,我们运行以下代码,同样会输出和Javascript中一样的结果。

Java中的双精度运算

那造成这个问题的原因是什么呢?

因为电脑永远都是按照二进制进行运算的,我们输入的十进制数在转化为二进制数时,并不总如人意,意思是说有些十进制并不能用准确的二进制数表示。

  • 十进制小数转二进制表示

我们来看下十进制小数转二进制表示的过程,小数位乘以2,取整,小数部分继续乘以2,再取整,直到小数部分为0为止,然后将取整位按顺序排列

由此方法我们可以看到以下一些十进制小数的二进制表示。

十进制与二进制

我们发现有些小数的二进制表示位数是无限循环的,这就造城了浮点数精度上的问题。

比如十进制的1.1,在用二进制表示时因为存在二进制位无限循环的表示,实际值为1.0999999999...无限接近于1.1

解决方法

遇到这种问题,常用的一种解决方法就是将浮点数转化为整数进行运算,以下是一些封装好的关于浮点运算的方法,而且经过测试,加减乘除运算都会达到自己想要的结果。

加法和减法运算

乘法和除法运算

总结

今天这篇文章讲的是Javascript中浮点数运算会产生的坑,你有遇到过吗?看了这篇文章会不会有很大的收获呢?

原文链接:,转发请注明来源!