在JavaScript中,整数和浮点数都属于Number类型,它们都统一采用64位浮点数进行存储。
虽然它们存储数据的方式是一致的,但是在进行数值运算时,却会表现出明显的差异性。整数参与运算时,得到的结果往往会和我们所想的一样,例如下面的代码。
// 加法
1 + 2 = 3
7 + 1 = 8
// 减法
15
``` 12 = 3
3
``` 2 = 1
// 乘法
7 * 180 = 1260
97 * 100 = 9700
// 除法
3 / 1 = 3
69 / 10 = 6.9
而对于浮点型运算,有时却会出现一些意想不到的结果,如下面的代码所示。
// 加法
0.1 + 0.2 = 0.30000000000000004
0.7 + 0.1 = 0.7999999999999999
// 减法
1.5
``` 1.2 = 0.30000000000000004
0.3
``` 0.2 = 0.09999999999999998
// 乘法
0.7 * 180 = 125.99999999999999
9.7 * 100 = 969.9999999999999
// 除法
0.3 / 0.1 = 2.9999999999999996
0.69 / 10 = 0.06899999999999999
得到这样的结果,大家是不是觉得很奇怪呢?0.1 + 0.2为什么不是等于0.3,而是等于0.30000000000000004呢?接下来我们一探究竟。
因为浮点型数使用64位存储时,最多只能存储52位的小数位,对于一些存在无限循环的小数位浮点数,会截取前52位,从而丢失精度,所以会出现上面实例中的结果。
0.1 * 2 = 0.2 //取出整数部分0
0.2 * 2 = 0.4 //取出整数部分0
0.4 * 2 = 0.8 //取出整数部分0
0.8 * 2 = 1.6 //取出整数部分1
0.6 * 2 = 1.2 //取出整数部分1
0.2 * 2 = 0.4 //取出整数部分0
0.4 * 2 = 0.8 //取出整数部分0
0.8 * 2 = 1.6 //取出整数部分1
0.6 * 2 = 1.2 //取出整数部分1
1.2取出整数部分1后,剩余小数为0.2,与这一轮运算的第一位相同,表示这将是一个无限循环的计算过程。
0.2 * 2 = 0.4 //取出整数部分0
0.4 * 2 = 0.8 //取出整数部分0
0.8 * 2 = 1.6 //取出整数部分1
0.6 * 2 = 1.2 //取出整数部分1
...
因此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位精度的浮点型表示。
-
0.0001 1001 1001 1001 1001 1001 1001 1001 1001 1001 1001 1001 1001 (0.1)
const operationObj = {
/**
* 处理传入的参数,不管传入的是数组还是以逗号分隔的参数都处理为数组
* @param args
* @returns {*}
*/
getParam(args) {
return Array.prototype.concat.apply([], args);
},
/**
* 获取每个数的乘数因子,根据小数位数计算
* 1.首先判断是否有小数点,如果没有,则返回1;
* 2.有小数点时,将小数位数的长度作为Math.pow()函数的参数进行计算
* 例如2的乘数因子为1,2.01的乘数因子为100
* @param x
* @returns {number}
*/
multiplier(x) {
let parts = x.toString().split('.');
return parts.length < 2 ? 1 : Math.pow(10, parts[1].length);
},
/**
* 获取多个数据中最大的乘数因子
* 例如1.3的乘数因子为10,2.13的乘数因子为100
* 则1.3和2.13的最大乘数因子为100
* @returns {*}
*/
correctionFactor() {
let args = Array.prototype.slice.call(arguments);
let argArr = this.getParam(args);
return argArr.reduce((accum, next) => {
let num = this.multiplier(next);
return Math.max(accum, num);
}, 1);
},
/**
* 加法运算
* @param args
* @returns {number}
*/
add(...args) {
let calArr = this.getParam(args);
// 获取参与运算值的最大乘数因子
let corrFactor = this.correctionFactor(calArr);
let sum = calArr.reduce((accum, curr) => {
// 将浮点数乘以最大乘数因子,转换为整数参与运算
return accum + Math.round(curr * corrFactor);
}, 0);
// 除以最大乘数因子
return sum / corrFactor;
},
/**
* 减法运算
* @param args
* @returns {number}
*/
subtract(...args) {
let calArr = this.getParam(args);
let corrFactor = this.correctionFactor(calArr);
let diff = calArr.reduce((accum, curr, curIndex) => {
// reduce()函数在未传入初始值时,curIndex从1开始,第一位参与运算的值需要
// 乘以最大乘数因子
if (curIndex === 1) {
return Math.round(accum * corrFactor)
Math.round(curr * corrFactor);
}
// accum作为上一次运算的结果,就无须再乘以最大因子
return Math.round(accum)
Math.round(curr * corrFactor);
});
// 除以最大乘数因子
return diff / corrFactor;
},
/**
* 乘法运算
* @param args
* @returns {*}
*/
multiply(...args) {
let calArr = this.getParam(args);
let corrFactor = this.correctionFactor(calArr);
calArr = calArr.map((item) => {
// 乘以最大乘数因子
return item * corrFactor;
});
let multi = calArr.reduce((accum, curr) => {
return Math.round(accum) * Math.round(curr);
}, 1);
// 除以最大乘数因子
return multi / Math.pow(corrFactor, calArr.length);
},
/**
* 除法运算
* @param args
* @returns {*}
*/
divide(...args) {
let calArr = this.getParam(args);
let quotient = calArr.reduce((accum, curr) => {
let corrFactor = this.correctionFactor(accum, curr);
// 同时转换为整数参与运算
return Math.round(accum * corrFactor) / Math.round(curr * corrFactor);
});
return quotient;
}
};
接下来我们通过以下这些代码对加减乘除运算分别做测试,运算结果和我们期望的一致。
console.log(operationObj.add(0.1, 0.7)); // 0.8
console.log(operationObj.subtract(0.3, 0.2)); // 0.1
console.log(operationObj.multiply(0.7, 180)); // 126
console.log(operationObj.divide(0.3, 0.1)); // 3