浮点型计算

在JavaScript中，整数和浮点数都属于Number类型，它们都统一采用64位浮点数进行存储。

虽然它们存储数据的方式是一致的，但是在进行数值运算时，却会表现出明显的差异性。整数参与运算时，得到的结果往往会和我们所想的一样，
例如下面的代码。

加法
1+2 = 3
7+1 = 8
减法
2-1 =1 
6-3 =3

乘法
7*8 = 56
5*3 = 15

除法
6/3 =2
3/3 =1

而对于浮点型运算，有时却会出现一些意想不到的结果，如下面的代码所示。

加法
0.1+0.2 = 0.30000000000000004
0.7+0.1 = 0.7999999999999999
// 减法
1.5 — 1.2
0.3 - 0.2

//乘法
0.7 * 180
9.7 *100

// 除法 

0.3 /0.1
0.69 / 10

得到这样的结果，大家是不是觉得很奇怪呢？0.1 + 0.2为什么不是等于0.3，而是等于0.30000000000000004呢？接下来我们一探究竟。

问题原因
首先我们来看看一个浮点型数在计算机中的表示，它总共长度是64位，其中最高位为符号位，接下来的11位为指数位，最后的52位为小数位，即有效数字的部分。· 第0位：符号位sign表示数的正负，0表示正数，1表示负数。· 第1位到第11位：存储指数部分，用e表示。· 第12位到第63位：存储小数部分（即有效数字），用f表示，如图1-1所示。
image.png

因为浮点型数使用64位存储时，最多只能存储52位的小数位，对于一些存在无限循环的小数位浮点数，会截取前52位，从而丢失精度，所以会出现上面实例中的结果。

计算过程
接下来以0.1 + 0.2 = 0.30000000000000004的运算为例，看看为什么会得到这个计算结果。首先将各个浮点数的小数位按照“乘2取整，顺序排列”的方法转换成二进制表示。具体做法是用2乘以十进制小数，得到积，将积的整数部分取出；然后再用2乘以余下的小数部分，又得到一个积；再将积的整数部分取出，如此推进，直到积中的小数部分为零为止。然后把取出的整数部分按顺序排列起来，先取的整数作为二进制小数的高位有效位，后取的整数作为低位有效位，得到最终结果。0.1转换为二进制表示的计算过程如下

image.png

1.2取出整数部分1后，剩余小数为0.2，与这一轮运算的第一位相同，表示这将是一个无限循环的计算过程。
image.png
因此0.1转换成二进制表示为0.0 0011 0011 0011 0011 0011 0011……（无限循环）。同理对0.2进行二进制的转换，计算过程与上面类似，直接从0.2开始，相比于0.1，少了第一位的0，其余位数完全相同，结果为0.0011 0011 0011 0011 0011 0011……（无限循环）。将0.1与0.2相加，然后转换成52位精度的浮点型表示。
image.png
得到的结果为0.0100 1100 1100 1100 1100 1100 1100 1100 1100 1100 1100 11001100，转换成十进制值为0.30000000000000004。
解决方案
通过上面详细的讲解，相信大家已经了解了对浮点数进行运算时会存在的问题，那么我们该如何解决呢？这里提供一种方法，主要思路是将浮点数先乘以一定的数值转换为整数，通过整数进行运算，然后将结果除以相同的数值转换成浮点数后返回。下面提供一套用于做浮点数加减乘除运算的代码。


const opereationObj = {
    /**
     * 获取参数 无论是逗号分割的参数还是 数组 统一处理为数组
     * @param args
     * @returns {T[]}
     */
    getparams(args) {
        // 此处借用了 apply 的特性 可以进行数组扁平化 等同于 call([], ...arg)
        return Array.prototype.concat.apply([],args)
    },
    /**
     * 获取乘数因子 以小数的位数 进行放大 以10 位单位
     * @param x
     * @returns {number|number}
     */
    multiple(x) {
        let parts = x.toString().split('.')
        return parts.length < 2 ? 1: Math.pow(10,parts[1].length)
    },

    correctionFactor(){
        let args = Array.prototype.slice.call(arguments);

        let argArr = this.getparams(args);

        // 筛选出最大的乘数因子
        return argArr.reduce((accum,next)=> {
            let num = this.multiple(next);
            return Math.max(accum, num)
        },1)
    },
    add(...args) {
        let calAtt = this.getparams(args);
        // 获取最大乘数因子
        let corrFactor = this.correctionFactor(calAtt);
        console.log(calAtt, 'calAtt')
        let sum = calAtt.reduce((prev,curr)=>{
            return prev +(curr * corrFactor)
        },0)
        return sum/corrFactor
    },

    subtract(...arg){
        let calArr = this.getparams(arg)
        let corrFactor = this.correctionFactor(calArr);

        let result=  calArr.reduce((prev, current, index)=> {
            if(index ===1 ) {
                return (prev*corrFactor) - (current *corrFactor)
            }
            return (prev) - (current *corrFactor)

        })
        return result/corrFactor
    },
    /**
     *
     */
    multiply(...args) {
        let params = this.getparams(args)
        let corrFactor = this.correctionFactor(params)
        params = params.map(item=>item*corrFactor)

       let res =  params.reduce((prev,curr)=>{
            return prev * curr
        })
        return res/Math.pow(corrFactor, params.length)
    },

    devide(...arg) {
        let params = this.getparams(arg)
         return  params.reduce((prev, curr)=>{
            let corrFactor = this.correctionFactor(prev,curr);
            return (prev * corrFactor ) / (curr * corrFactor)
        })
    }
}



console.log(opereationObj.add(0.7, 0.1));
console.log(opereationObj.subtract(0.1, 0.2));
console.log(opereationObj.multiply(0.33, 0.3));
console.log(opereationObj.devide(0.33, 0.3));

摘抄自周雄 javascript 重难点实例精讲 1.2.4 浮点型运算