Vue 计算属性计算结果出现规律性异常

Question

问题描述电商项目,前端框架使用vue,显示购物车内价格时使用vue的计算属性,用来计算购物车的总价格.但当商品价格为1.01元时,计算结果会出现周期性的位数异常.相关代码goodsInform 存储用户存在购物车中商品的信息price 商品单价amount 购物车中同种商品的数量totalPrices () {      let totalPrices = 0      for (let index in this.goodsInform) {        console.log(this.goodsInform[index].price) // 商品的单价        console.log(this.goodsInform[index].amount) // 商品的数量        totalPrices += this.goodsInform[index].price * this.goodsInform[index].amount        // 强制限制保留位数为两位,这是我对该问题的解决办法,但想知道问题原因      }      totalPrices = totalPrices.toFixed(2)      if (totalPrices <= 0) {        return '未选购商品'      } else {        return '总价:' + '¥' + totalPrices      }    }相关错误结果截图和数据信息1.商品数据是Java后台传递的,后端说他使用BigDecima类型数据,传过来我这边存储的均是Number类型的单价和数量.2.出现错误的规律:分别在1.01元的商品数量为3,6,12,24...(后面没继续测试但好像规律已经出现了)会显示成6.0600000000000005这种类似的数据.控制台打印结果与显示结果:虽然目前我所使用的解决办法不影响显示,但这个问题的出现让我很费解,想知道为什么会出现这种情况,可以通过什么方式避免这种错误的发生.

Answer 1

这是js的一个老bug,在小数位的计算上。小数计算精准度丢失