欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決JavaScript數(shù)字精度丟失問題的方法

 更新時間:2015年12月03日 09:00:14   作者:snandy  
這篇文章主要介紹了解決JavaScript數(shù)字精度丟失問題的方法,需要的朋友可以參考下

本文分為三個部分

  • JS 數(shù)字精度丟失的一些典型問題
  • JS 數(shù)字精度丟失的原因
  • 解決方案(一個對象+一個函數(shù))

一、JS數(shù)字精度丟失的一些典型問題

1. 兩個簡單的浮點數(shù)相加

0.1 + 0.2 != 0.3 // true

這真不是 Firebug 的問題,可以用alert試試 (哈哈開玩笑)。

看看Java的運算結(jié)果

再看看Python

2. 大整數(shù)運算

16位和17位數(shù)竟然相等,沒天理啊。

又如

var x = 9007199254740992
x + 1 == x // ?

看結(jié)果

三觀又被顛覆了。

3. toFixed 不會四舍五入(Chrome)

線上曾經(jīng)發(fā)生過 Chrome 中價格和其它瀏覽器不一致

二、JS 數(shù)字丟失精度的原因

計算機的二進制實現(xiàn)和位數(shù)限制有些數(shù)無法有限表示。就像一些無理數(shù)不能有限表示,如 圓周率 3.1415926...,1.3333... 等。JS 遵循 IEEE 754 規(guī)范,采用雙精度存儲(double precision),占用 64 bit。如圖

意義

  • 1位用來表示符號位
  • 11位用來表示指數(shù)
  • 52位表示尾數(shù)

浮點數(shù),比如

0.1 >> 0.0001 1001 1001 1001…(1001無限循環(huán))
0.2 >> 0.0011 0011 0011 0011…(0011無限循環(huán))

此時只能模仿十進制進行四舍五入了,但是二進制只有 0 和 1 兩個,于是變?yōu)?0 舍 1 入。這即是計算機中部分浮點數(shù)運算時出現(xiàn)誤差,丟失精度的根本原因。

大整數(shù)的精度丟失和浮點數(shù)本質(zhì)上是一樣的,尾數(shù)位最大是52位,因此 JS 中能精準表示的最大整數(shù)是 Math.pow(2, 53),十進制即 9007199254740992。

大于 9007199254740992 的可能會丟失精度

9007199254740992  >> 10000000000000...000 // 共計 53 個 0
9007199254740992 + 1 >> 10000000000000...001 // 中間 52 個 0
9007199254740992 + 2 >> 10000000000000...010 // 中間 51 個 0

實際上

9007199254740992 + 1 // 丟失
9007199254740992 + 2 // 未丟失
9007199254740992 + 3 // 丟失
9007199254740992 + 4 // 未丟失

結(jié)果如圖

以上,可以知道看似有窮的數(shù)字, 在計算機的二進制表示里卻是無窮的,由于存儲位數(shù)限制因此存在“舍去”,精度丟失就發(fā)生了。

三、解決方案

對于整數(shù),前端出現(xiàn)問題的幾率可能比較低,畢竟很少有業(yè)務(wù)需要需要用到超大整數(shù),只要運算結(jié)果不超過 Math.pow(2, 53) 就不會丟失精度。

對于小數(shù),前端出現(xiàn)問題的幾率還是很多的,尤其在一些電商網(wǎng)站涉及到金額等數(shù)據(jù)。解決方式:把小數(shù)放到位整數(shù)(乘倍數(shù)),再縮小回原來倍數(shù)(除倍數(shù))

// 0.1 + 0.2
(0.1*10 + 0.2*10) / 10 == 0.3 // true

以下是我寫了一個對象,對小數(shù)的加減乘除運算丟失精度做了屏蔽。當然轉(zhuǎn)換后的整數(shù)依然不能超過 9007199254740992。

/**
 * floatObj 包含加減乘除四個方法,能確保浮點數(shù)運算不丟失精度
 *
 * 我們知道計算機編程語言里浮點數(shù)計算會存在精度丟失問題(或稱舍入誤差),其根本原因是二進制和實現(xiàn)位數(shù)限制有些數(shù)無法有限表示
 * 以下是十進制小數(shù)對應的二進制表示
 *  0.1 >> 0.0001 1001 1001 1001…(1001無限循環(huán))
 *  0.2 >> 0.0011 0011 0011 0011…(0011無限循環(huán))
 * 計算機里每種數(shù)據(jù)類型的存儲是一個有限寬度,比如 JavaScript 使用 64 位存儲數(shù)字類型,因此超出的會舍去。舍去的部分就是精度丟失的部分。
 *
 * ** method **
 * add / subtract / multiply /divide
 *
 * ** explame **
 * 0.1 + 0.2 == 0.30000000000000004 (多了 0.00000000000004)
 * 0.2 + 0.4 == 0.6000000000000001 (多了 0.0000000000001)
 * 19.9 * 100 == 1989.9999999999998 (少了 0.0000000000002)
 *
 * floatObj.add(0.1, 0.2) >> 0.3
 * floatObj.multiply(19.9, 100) >> 1990
 *
 */
var floatObj = function() {
 
 /*
  * 判斷obj是否為一個整數(shù)
  */
 function isInteger(obj) {
  return Math.floor(obj) === obj
 }
 
 /*
  * 將一個浮點數(shù)轉(zhuǎn)成整數(shù),返回整數(shù)和倍數(shù)。如 3.14 >> 314,倍數(shù)是 100
  * @param floatNum {number} 小數(shù)
  * @return {object}
  * {times:100, num: 314}
  */
 function toInteger(floatNum) {
  var ret = {times: 0, num: 0}
  if (isInteger(floatNum)) {
   ret.num = floatNum
   return ret
  }
  var strfi = floatNum + ''
  var dotPos = strfi.indexOf('.')
  var len = strfi.substr(dotPos+1).length
  var times = Math.pow(10, len)
  var intNum = parseInt(floatNum * times + 0.5, 10)
  ret.times = times
  ret.num = intNum
  return ret
 }
 
 /*
  * 核心方法,實現(xiàn)加減乘除運算,確保不丟失精度
  * 思路:把小數(shù)放大為整數(shù)(乘),進行算術(shù)運算,再縮小為小數(shù)(除)
  *
  * @param a {number} 運算數(shù)1
  * @param b {number} 運算數(shù)2
  * @param digits {number} 精度,保留的小數(shù)點數(shù),比如 2, 即保留為兩位小數(shù)
  * @param op {string} 運算類型,有加減乘除(add/subtract/multiply/divide)
  *
  */
 function operation(a, b, digits, op) {
  var o1 = toInteger(a)
  var o2 = toInteger(b)
  var max = o1.times > o2.times ? o1.times : o2.times
  var result = null
  switch (op) {
   case 'add':
    result = o1.num + o2.num
    break
   case 'subtract':
    result = o1.num - o2.num
    break
   case 'multiply':
    result = o1.num * o2.num
    break
   case 'divide':
    result = o1.num / o2.num
    break
  }
  return result / max
 }
 
 // 加減乘除的四個接口
 function add(a, b, digits) {
  return operation(a, b, digits, 'add')
 }
 function subtract(a, b, digits) {
  return operation(a, b, digits, 'subtract')
 }
 function multiply(a, b, digits) {
  return operation(a, b, digits, 'multiply')
 }
 function divide(a, b, digits) {
  return operation(a, b, digits, 'divide')
 }
 
 // exports
 return {
  add: add,
  subtract: subtract,
  multiply: multiply,
  divide: divide
 }
 
}();

toFixed的修復如下

// toFixed 修復
function toFixed(num, s) {
 var times = Math.pow(10, s)
 var des = num * times + 0.5
 des = parseInt(des, 10) / times
 return des + ''
}

以上就是關(guān)于JavaScript數(shù)字精度丟失問題全部內(nèi)容,對典型問題進行分析,分析數(shù)字精度丟失原因,還分享了解決方案,希望對大家的學習有所幫助。

相關(guān)文章

  • 通過JavaScript下載文件到本地的方法(單文件)

    通過JavaScript下載文件到本地的方法(單文件)

    這篇文章主要介紹了通過JavaScript下載文件到本地的方法(單文件),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-03-03
  • javascript實現(xiàn)避免頁面按鈕重復提交

    javascript實現(xiàn)避免頁面按鈕重復提交

    很多時候我們都需要防止重復提交,這方面的文章也比較多,實現(xiàn)的途徑差別也很大.因為有些時候即使服務(wù)器能夠識別重復的提交,也會造成問題.比如需要很長等待時間的操作,在首次提交后,不斷重復提交,頁面可能會死掉.用腳本來控制的話可以防止這種問題.
    2015-01-01
  • javascript批量修改文件編碼格式的方法

    javascript批量修改文件編碼格式的方法

    這篇文章主要介紹了javascript批量修改文件編碼格式的方法,分析了使用javascript第三方包批量修改文件編碼的技巧,需要的朋友可以參考下
    2015-01-01
  • 微信JS SDK接入的幾點注意事項(必看篇)

    微信JS SDK接入的幾點注意事項(必看篇)

    下面小編就為大家?guī)硪黄⑿臞S SDK接入的幾點注意事項(必看篇)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-06-06
  • js防止DIV布局滾動時閃動的解決方法

    js防止DIV布局滾動時閃動的解決方法

    這篇文章主要介紹了js防止DIV布局滾動時閃動的解決方法,通過js的window.requestAnimationFrame來解決這一問題,非常具有實用價值,需要的朋友可以參考下
    2014-10-10
  • JS實現(xiàn)的鼠標跟隨代碼(卡通手型點擊效果)

    JS實現(xiàn)的鼠標跟隨代碼(卡通手型點擊效果)

    這篇文章主要介紹了JS實現(xiàn)的鼠標跟隨代碼,帶有卡通手型點擊效果.涉及JavaScript鼠標事件的響應與頁面元素的動態(tài)調(diào)用技巧,需要的朋友可以參考下
    2015-10-10
  • java前端javascript生成動態(tài)表格示例演示

    java前端javascript生成動態(tài)表格示例演示

    這篇文章主要為大家介紹了java前端javascript生成動態(tài)表格的實現(xiàn)示例及演示,
    2022-03-03
  • js如何刪除對象/數(shù)組中null、undefined、空對象及空數(shù)組實例代碼

    js如何刪除對象/數(shù)組中null、undefined、空對象及空數(shù)組實例代碼

    JS中數(shù)組是我們較為常用的一種數(shù)據(jù)結(jié)構(gòu),下面這篇文章主要給大家介紹了關(guān)于js如何刪除對象/數(shù)組中null、undefined、空對象及空數(shù)組的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-09-09
  • JS顯示下拉列表框內(nèi)全部元素的方法

    JS顯示下拉列表框內(nèi)全部元素的方法

    這篇文章主要介紹了JS顯示下拉列表框內(nèi)全部元素的方法,涉及javascript遍歷下拉列表元素的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-03-03
  • 教你用Uniapp實現(xiàn)微信小程序的GPS定位打卡

    教你用Uniapp實現(xiàn)微信小程序的GPS定位打卡

    地圖組件用于展示地圖,而定位API只是獲取坐標,請勿混淆兩者,下面這篇文章主要給大家介紹了關(guān)于如何使用Uniapp實現(xiàn)微信小程序的GPS定位打卡的相關(guān)資料,需要的朋友可以參考下
    2022-11-11

最新評論