js中小数计算丢失精度解决

ゝ一世哀愁。 2022-11-25 04:04 199阅读 0赞

最近在写步进器组件的时候遇到了小数计算丢失精度的问题。  
写的是这么个东西  
![在这里插入图片描述][20200807091940247.png]  
现在做一个测试，打开f12在console中输入

0.1 + 0.2

![在这里插入图片描述][2020080709211995.png]  
结果丢失精度了。  
然后网上一搜解决方案全是copy的文章，大致长这样  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDgxODQx_size_16_color_FFFFFF_t_70]  
现在我们用网上的解决方法来试下。  
![在这里插入图片描述][20200807092403461.png]  
你别说，还真行，不过。别慌，让我们来计算下

1.12 + 0.01

![在这里插入图片描述][20200807092525897.png]  
结果精度还是丢失了。  
然后我测试了下什么情况下会丢失精度。  
![在这里插入图片描述][20200807092719374.png]  
结果发现，当乘以1的后面0是3的倍数时不会丢失精度。所以小数化整数计算时要按照这个规律去乘。  
改造下代码。

//小数计算加法 
    function accAdd(arg1, arg2) { 
      var r1, r2, m;
      try { 
        r1 = arg1.toString().split(".")[1].length
      } catch (e) { 
        r1 = 0
      }
      try { 
        r2 = arg2.toString().split(".")[1].length
      } catch (e) { 
        r2 = 0
      }
      // 这里Math.max(r1, r2)取最长的小数位
      // Math.ceil(length / 3) * 3) 按照位数计算乘以的倍数.比如 2 => 1000, 4 => 1000000
      m = Math.pow(10, Math.ceil(Math.max(r1, r2) / 3) * 3)
      return (arg1 * m + arg2 * m) / m
    }

然后再测试一下。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDgxODQx_size_16_color_FFFFFF_t_70 1]  
ok，问题已解决。加减乘除都按照这个思路来即可。

[20200807091940247.png]: /images/20221124/f943819e90784b389bc54fd67551e41e.png
[2020080709211995.png]: /images/20221124/22593c04ce4c40d9b531f5e87b85bf10.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDgxODQx_size_16_color_FFFFFF_t_70]: /images/20221124/48c997ff771b42e8884872e8c63db370.png
[20200807092403461.png]: /images/20221124/8985ffe9049d42e9923e0492ff3b6ecd.png
[20200807092525897.png]: /images/20221124/034c1bc2f976455ab029cc990bf943d9.png
[20200807092719374.png]: /images/20221124/939820ddac704e52bb5cc207aa714286.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDgxODQx_size_16_color_FFFFFF_t_70 1]: /images/20221124/c540726f63c24764a77461292d4b4fe6.png