浮点型计算
在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 浮点型运算
