JavaScript进阶（二十七）：JavaScript 浮点数精度计算_js 浮点数子算(3)

文末

逆水行舟不进则退，所以大家要有危机意识。

同样是干到35岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

比如 1.1，其程序实际上无法真正的表示 ‘1.1’，而只能做到一定程度上的准确，这是无法避免的精度丢失：1.09999999999999999


### 二、浮点数精度问题


其实，在`JavaScript`中浮点数精度问题还要复杂些，这里只给一些在`Chrome`中测试数据：

console.log(1.0-0.9 == 0.1) //false
console.log(1.0-0.8 == 0.2) //false
console.log(1.0-0.7 == 0.3) //false
console.log(1.0-0.6 == 0.4) //true
console.log(1.0-0.5 == 0.5) //true
console.log(1.0-0.4 == 0.6) //true
console.log(1.0-0.3 == 0.7) //true
console.log(1.0-0.2 == 0.8) //true
console.log(1.0-0.1 == 0.9) //true

那如何来避免这类 `1.0-0.9 != 0.1` 的非bug型问题发生呢？下面给出一种目前用的比较多的解决方案, 在判断浮点运算结果前对计算结果进行精度缩小，因为在精度缩小的过程总会自动四舍五入:

(1.0-0.9).toFixed(digits) // toFixed() 精度参数digits须在0与20之间
console.log(parseFloat((1.0-0.9).toFixed(10)) === 0.1) //true
console.log(parseFloat((1.0-0.8).toFixed(10)) === 0.2) //true
console.log(parseFloat((1.0-0.7).toFixed(10)) === 0.3) //true
console.log(parseFloat((11.0-11.8).toFixed(10)) === -0.8) //true

写成一个方法：

//通过isEqual工具方法判断数值是否相等
function isEqual(number1, number2, digits){
digits = digits == undefined? 10: digits; // 默认精度为10
return number1.toFixed(digits) === number2.toFixed(digits);
}
console.log(isEqual(1.0-0.7, 0.3)); //true
//原型扩展方式，更喜欢面向对象的风格
Number.prototype.isEqual = function(number, digits){
digits = digits == undefined? 10: digits; // 默认精度为10
return this.toFixed(digits) === number.toFixed(digits);
}
console.log((1.0-0.7).isEqual(0.3)); //true

接下来，再来试试浮点数的运算，

console.log(1.79+0.12) //1.9100000000000001
console.log(2.01-0.12) //1.8899999999999997
console.log(1.01*1.3) //1.3130000000000002
console.log(0.69/10) //0.06899999999999999

解决方案 - **先升幂再降幂，同时辅以精度控制**

//加法函数，用来得到精确的加法结果
//说明：javascript的加法结果会有误差，在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。
//调用：accAdd(arg1,arg2)
//返回值：arg1加上arg2的精确结果
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}
m=Math.pow(10,Math.max(r1,r2))
return (arg1*m+arg2*m)/m
}
//给Number类型增加一个add方法，调用起来更加方便。
Number.prototype.add = function (arg){
return accAdd(arg,this);
}

//减法函数，用来得到精确的减法结果
//说明：javascript的加法结果会有误差，在两个浮点数相加的时候会比较明显。这个函数返回较为精确的减法结果。
//调用：accSub(arg1,arg2)
//返回值：arg1减去arg2的精确结果
function accSub(arg1,arg2){
var r1,r2,m,n;
try{r1=arg1.toString().split(“.”)[1].length}catch(e){r1=0}
try{r2=arg2.toString().split(“.”)[1].length}catch(e){r2=0}
m=Math.pow(10,Math.max(r1,r2));
//last modify by deeka
//动态控制精度长度
n=(r1>=r2)?r1:r2;
return ((arg1*m-arg2*m)/m).toFixed(n);
}

//除法函数，用来得到精确的除法结果
//说明：javascript的除法结果会有误差，在两个浮点数相除的时候会比较明显。这个函数返回较为精确的除法结果。
//调用：accDiv(arg1,arg2)
//返回值：arg1除以arg2的精确结果
function accDiv(arg1,arg2){
var t1=0,t2=0,r1,r2;
try{t1=arg1.toString().split(“.”)[1].length}catch(e){}
try{t2=arg2.toString().split(“.”)[1].length}catch(e){}
with(Math){
r1=Number(arg1.toString().replace(“.”,“”))
r2=Number(arg2.toString().replace(“.”,“”))
return (r1/r2)*pow(10,t2-t1);
}
}
//给Number类型增加一个div方法，调用起来更加方便。
Number.prototype.div = function (arg){
return accDiv(this, arg);
}

//乘法函数，用来得到精确的乘法结果
//说明：javascript的乘法结果会有误差，在两个浮点数相乘的时候会比较明显。这个函数返回较为精确的乘法结果。
//调用：accMul(arg1,arg2)
//返回值：arg1乘以arg2的精确结果
function accMul(arg1,arg2) {
var m=0,s1=arg1.toString(),s2=arg2.toString();
try{m+=s1.split(“.”)[1].length}catch(e){}
try{m+=s2.split(“.”)[1].length}catch(e){}
return Number(s1.replace(“.”,“”))*Number(s2.replace(“.”,“”))/Math.pow(10,m)
}
//给Number类型增加一个mul方法，调用起来更加方便。
Number.prototype.mul = function (arg){
return accMul(arg, this);
}

结果如下：

console.log(accAdd(1.79, 0.12)); //1.91
console.log(accSub(2.01, 0.12)); //1.89
console.log(accDiv(0.69, 10)); //0.069
console.log(accMul(1.01, 1.3)); //1.313

改造之后，可以愉快地进行浮点数加减乘除操作了~


### 三、整数精度问题


在 `Javascript` 中，整数精度同样存在问题，先来看看问题：


`JavaScript` 代码:

console.log(19571992547450991); //=> 19571992547450990
console.log(19571992547450991===19571992547450992); //=> true

同样的原因，在 `JavaScript` 中 `Number`类型统一按浮点数处理，整数是按最大54位来算最大`(253 - 1，Number.MAX_SAFE_INTEGER,9007199254740991)` 和最小`(-(253 - 1)，Number.MIN_SAFE_INTEGER,-9007199254740991)` 安全整数范围的。所以只要超过这个范围，就会存在被舍去的精度问题。


当然这个问题并不只是在 `Javascript` 中才会出现，几乎所有的编程语言都采用了 `IEEE-745` 浮点数表示法，任何使用二进制浮点数的编程语言都会有这个问题，只不过在很多其他语言中已经封装好了方法来避免精度的问题，而 `JavaScript` 作为一门弱类型语言，从设计思想上就没有对浮点数有严格的数据类型，所以精度误差的问题就显得格外突出。


### 四、解决方案


#### 4.1 类库


通常这种对精度要求高的计算都应该交给后端去计算和存储，因为后端有成熟的库来解决这种计算问题。前端也有几个不错的类库：


##### 4.1.1 Math.js


`Math.js` 是专门为 `JavaScript` 和 `Node.js` 提供的一个广泛的数学库。它具有灵活的表达式解析器，支持符号计算，配有大量内置函数和常量，并提供集成解决方案来处理不同的数据类型  
 像数字，大数(超出安全数的数字)，复数，分数，单位和矩阵。 功能强大，易于使用。


* [官网](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
* [GitHub](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)


##### 4.1.2 decimal.js


为 `JavaScript` 提供十进制类型的任意精度数值。


* [官网](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
* [GitHub](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)


##### 4.1.3 big.js


* [官网](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
* [GitHub](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)


这几个类库帮我们解决很多这类问题，不过通常我们前端做这类运算通常只用于表现层，应用并不是很多。所以很多时候，一个函数能解决的问题不需要引用一个类库来解决。


### 最后

**前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档**

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/d63d451e7ba7bc0f77e68a30db37a0a0.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/c18d3804ce3b54582381380b58a9ff4f.webp?x-oss-process=image/format,png)



 最后

**前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档**

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中...(img-gRMwzUR2-1715783744468)]

[外链图片转存中...(img-KqIm2eR0-1715783744469)]