詳解JS-- 浮點數(shù)運算處理
更新時間：2016年11月28日 08:25:14 作者：我有一顆四葉草
本篇文章主要介紹了JS--浮點數(shù)運算處理，現(xiàn)在分享給大家，也給大家做個參考。感興趣的小伙伴們可以參考一下。
一. 問題描述
最近在做一個項目，頁面上會存在一些JS浮點數(shù)的運算，發(fā)現(xiàn)JS浮點數(shù)運算存在一些bug.譬如:
0.1+0.2 == 0.30000000000000004 0.1 + 0.7 == 0.7999999999999999 7*0.8 == 5.6000000000000005 5.6/7 == 0.7999999999999999
二.解決方案
JS運算后都會有很小的誤差. 不像.Net或者Java那樣準確. 主要是JS重點不在運算上面,可是有時候項目一定要用到.想了一下大概有兩種解決方案
A 方案一:
運算結果保留2-3位小數(shù)位數(shù). 前端界面一般用到的運算比較少。精度要求不會太高。 所以取2位小數(shù)位即可。
B. 方案二:
將小數(shù)位數(shù)轉換為整數(shù)運算. 譬如：
0.1+0.2 =》 (1+2)/10 == 0.3 0.1 + 0.7 =》 (1+7)/10 == 0.8 7*0.8 == (7*8)/10 == 5.6 5.6/7 == (56/7)/10 == 0.1
為了方便調用. 所以我們可以提取一個公共的方法出來.譬如下面的JSMath庫，JSMath重寫了加減乘除. 會先將參數(shù)轉換為整數(shù)再運算JSMath(參數(shù)1).操作(參數(shù)2)
參數(shù)1和參數(shù)2分別就是運算的第一個Number和第二個Number. 計算后通過Value屬性獲取值．
(function() {
var JSMath = function() {
return this;
}
JSMath.prototype.from = function(value) {
// 支持JSMath參數(shù)傳遞主要是用于嵌套的調用
if ((typeof(value) == 'object') && (value.value != undefined)) {
this.value = value.value;
} else {
this.value = value;
}
return this;
}
// 加法
JSMath.prototype.add = function(value) {
var thisValueString = this.value.toString();
var valueString = value.toString();
var timesCount1 = 0;
var timesCount2 = 0;
if (thisValueString.indexOf('.') > 0) {
timesCount1 = thisValueString.split('.')[1].length;
}
if (valueString.indexOf('.') > 0) {
timesCount2 = valueString.split('.')[1].length;
}
var maxtimeCount = timesCount1 > timesCount2 ? timesCount1 : timesCount2;
this.value = (Math.pow(10, maxtimeCount) * this.value + Math.pow(10, maxtimeCount) * value) / Math.pow(10, maxtimeCount);
return this;
}
// 減法
JSMath.prototype.sub = function(value) {
var thisValueString = this.value.toString();
var valueString = value.toString();
var timesCount1 = 0;
var timesCount2 = 0;
if (thisValueString.indexOf('.') > 0) {
timesCount1 = thisValueString.split('.')[1].length;
}
if (valueString.indexOf('.') > 0) {
timesCount2 = valueString.split('.')[1].length;
}
var maxtimeCount = timesCount1 > timesCount2 ? timesCount1 : timesCount2;
this.value = (Math.pow(10, maxtimeCount) * this.value - Math.pow(10, maxtimeCount) * value) / Math.pow(10, maxtimeCount);
return this;
}
// 除法
JSMath.prototype.div = function(value) {
var thisValueString = this.value.toString();
var valueString = value.toString();
var timesCount1 = 0;
var timesCount2 = 0;
if (thisValueString.indexOf('.') > 0) {
timesCount1 = thisValueString.split('.')[1].length;
}
if (valueString.indexOf('.') > 0) {
timesCount2 = valueString.split('.')[1].length;
}
var maxtimeCount = timesCount1 > timesCount2 ? timesCount1 : timesCount2;
this.value = ((Math.pow(10, maxtimeCount) * this.value) / (Math.pow(10, maxtimeCount) * value));
return this;
}
// 乘法
JSMath.prototype.times = function(value) {
var thisValueString = this.value.toString();
var valueString = value.toString();
var timesCount1 = 0;
var timesCount2 = 0;
if (thisValueString.indexOf('.') > 0) {
timesCount1 = thisValueString.split('.')[1].length;
}
if (valueString.indexOf('.') > 0) {
timesCount2 = valueString.split('.')[1].length;
}
var maxtimeCount = timesCount1 > timesCount2 ? timesCount1 : timesCount2;
this.value = (Math.pow(10, maxtimeCount) * this.value * Math.pow(10, maxtimeCount) * value) / Math.pow(10, maxtimeCount * 2);
return this;
}
if (window.JSMath == undefined) {
window.JSMath = function(value) {
var result = new JSMath();
result.from(value);
return result;
}
}
})()
B1.基本運算
0.1+0.2 => JSMath(0.1).add(0.2).value == 0.3 7+0.8 => JSMath(7).times(0.8).value == 5.6 5.6/7 => JSMath(5.6).div(7).value = 0.8
B2.多目運算
0.05 + 0.05 + 0.2 => JSMath(JSMath(0.05).add(0.05)).add(0.2).value == 0.3 (5+0.6)/7 => JSMath(JSMath(5).add(0.6)).div(7).value == 0.8
三．小總結
上面自己自己暫時知道的一些解決方案．不太清楚是否有開源的更可靠的三方庫來解決這個問題。以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
實現(xiàn)高性能JavaScript之執(zhí)行與加載
avaScript在瀏覽器中的性能，此問題因JavaScript的阻塞特征而復雜，也就是說JavaScript運行時其他的事情不能被瀏覽器處理，事實上，大多數(shù)瀏覽器使用單進程處理JavaScript運行等多個任務，而同一時間只能有一個任務被執(zhí)行。2016-01-01
這篇文章主要介紹了JSON數(shù)據(jù)結構的相關知識,需要的朋友可以參考下2014-05-05
詳解JavaScript中數(shù)組和字符串的lastIndexOf()方法使用
這篇文章主要介紹了詳解JavaScript中數(shù)組和字符串的lastIndexOf()方法使用,文中特別提及了IE8的兼容問題以及for in的使用問題,需要的朋友可以參考下2016-03-03
主要是用到了 window.clipboardData.setData("Text",copyText);2010-05-05
本文主要介紹AngularJS 指令,這里詳細介紹AngularJS 指令知識并提供實例代碼,有需要的小伙伴可以參考下2016-07-07
深入分析JavaScript 事件循環(huán)(Event Loop)
這篇文章主要介紹了JavaScript 事件循環(huán)(Event Loop)的的相關資料，文中講解非常細致，代碼幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-06-06
instanceof運算符可以用來判斷某個構造函數(shù)的prototype屬性所指向的對象是否存在于另外一個要檢測對象的原型鏈上,這里我們就來看一下JavaScript的instanceof運算符學習教程2016-06-06
這篇文章主要介紹了javascript設計模式三：代理模式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
js獲取height和width屬性的值在日常開發(fā)中很常見，于是本人搜集整理了一下，感興趣的朋友可以參考下2013-01-01
DHTML技術各項功能的實現(xiàn)都依賴于使用客戶端腳本與瀏覽器宿主及在宿主中輸出的Web頁面之間的交互，這種交互是通過對象這個技術手段實現(xiàn)的。2010-10-10