整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          Javascript 數字精度丟失的問題,如何解決?

          Javascript 數字精度丟失的問題,如何解決?

          們在處理數據的時候可能會遇到類似0.1+0.2 !=0.3的問題,讓我們來分析下原因:

          因為 JS 采用 IEEE 754 雙精度版本(64位),并且只要采用 IEEE 754 的語言都有該問題(我知道的java也是這樣)。我們都知道計算機是通過二進制來存儲東西的,0.1和0.2在轉換二進制后都是是無限循環的,這樣其實沒什么問題,但是 JS 采用的浮點數標準卻會裁剪掉后面的數字,導致精度丟失 0.1+0.2=0.30000000000000004。

          場景復現

          一個經典的面試題

          0.1 + 0.2===0.3 // false
          

          為什么是false呢?

          先看下面這個比喻

          比如一個數 1÷3=0.33333333......

          3會一直無限循環,數學可以表示,但是計算機要存儲,方便下次取出來再使用,但0.333333...... 這個數無限循環,再大的內存它也存不下,所以不能存儲一個相對于數學來說的值,只能存儲一個近似值,當計算機存儲后再取出時就會出現精度丟失問題

          比如18466.67*100,按理說他等于1846667吧,可是他等于1846666.9999999998,效果如下


          浮點數

          “浮點數”是一種表示數字的標準,整數也可以用浮點數的格式來存儲

          我們也可以理解成,浮點數就是小數

          JavaScript中,現在主流的數值類型是Number,而Number采用的是IEEE754規范中64位雙精度浮點數編碼

          這樣的存儲結構優點是可以歸一化處理整數和小數,節省存儲空間

          對于一個整數,可以很輕易轉化成十進制或者二進制。但是對于一個浮點數來說,因為小數點的存在,小數點的位置不是固定的。解決思路就是使用科學計數法,這樣小數點位置就固定了

          而計算機只能用二進制(0或1)表示,二進制轉換為科學記數法的公式如下:

          其中,a的值為0或者1,e為小數點移動的位置

          舉個例子:

          27.0轉化成二進制為11011.0 ,科學計數法表示為:

          前面講到,javaScript存儲方式是雙精度浮點數,其長度為8個字節,即64位比特

          64位比特又可分為三個部分:

          • 符號位S:第 1 位是正負數符號位(sign),0代表正數,1代表負數
          • 指數位E:中間的 11 位存儲指數(exponent),用來表示次方數,可以為正負數。在雙精度浮點數中,指數的固定偏移量為1023
          • 尾數位M:最后的 52 位是尾數(mantissa),超出的部分自動進一舍零

          如下圖所示:

          舉個例子:

          27.5 轉換為二進制11011.1

          11011.1轉換為科學記數法

          符號位為1(正數),指數位為4+,1023+4,即1027

          因為它是十進制的需要轉換為二進制,即 10000000011,小數部分為10111,補夠52位即: 1011 1000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000`

          所以27.5存儲為計算機的二進制標準形式(符號位+指數位+小數部分 (階數)),既下面所示

          0+10000000011+011 1000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000`


          二進制

          • 基數為2
          • 有2個數字,即0和1
          • 滿2進1

          八進制

          • 基數為8
          • 由8個數字組成,分別是0、1、2、3、4、5、6、7
          • 滿8進1

          十進制

          • 我們日常生活中所用的都是十進制,也就是滿10進1

          十六進制

          • 基數為16。
          • 由16個數字符號組成,分別是0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F
          • 滿16進1

          在古代中國當時使用的重量單位就是十六進制,16兩為1斤,就有了所謂的“半斤八兩”

          舉個例子

          比如 十進制

          1 2 3 4 5 6 7 8 9 10 11 ...

          當要數10時,就要進1位,也就是十位數寫1,個位數寫0, 即滿十進一

          二進制

          0 1 10 11 10 11 110 111 101 ...

          當要數2的時候,就要進1位了,上一位寫1,當前位變成0 即滿二進一

          進制之間怎么轉換?

          不會的話自行百度吧


          問題分析

          再回到問題上

          0.1 + 0.2===0.3 // false

          通過上面的學習,我們知道,在javascript語言中,0.1 和 0.2 都轉化成二進制后再進行運算

          // 0.1 和 0.2 都轉化成二進制后再進行運算
          0.00011001100110011001100110011001100110011001100110011010 +
          0.0011001100110011001100110011001100110011001100110011010=0.0100110011001100110011001100110011001100110011001100111
          
          // 轉成十進制正好是 0.30000000000000004

          所以輸出false

          再來一個問題,那么為什么x=0.1得到0.1

          主要是存儲二進制時小數點的偏移量最大為52位,最多可以表達的位數是2^53=9007199254740992,對應科學計數尾數是 9.007199254740992,這也是 JS 最多能表示的精度

          它的長度是 16,所以可以使用 toPrecision(16) 來做精度運算,超過的精度會自動做湊整處理

          .10000000000000000555.toPrecision(16)
          // 返回 0.1000000000000000,去掉末尾的零后正好為 0.1

          但看到的 0.1 實際上并不是 0.1。不信你可用更高的精度試試:

          0.1.toPrecision(21)=0.100000000000000005551

          如果整數大于 9007199254740992 會出現什么情況呢?

          由于指數位最大值是1023,所以最大可以表示的整數是 2^1024 - 1,這就是能表示的最大整數。但你并不能這樣計算這個數字,因為從 2^1024 開始就變成了 Infinity

          > Math.pow(2, 1023)
          8.98846567431158e+307
          
          > Math.pow(2, 1024)
          Infinity

          那么對于 (2^53, 2^63) 之間的數會出現什么情況呢?

          • (2^53, 2^54) 之間的數會兩個選一個,只能精確表示偶數
          • (2^54, 2^55) 之間的數會四個選一個,只能精確表示4個倍數
          • ... 依次跳過更多2的倍數

          要想解決大數的問題你可以引用第三方庫 bignumber.js,原理是把所有數字當作字符串,重新實現了計算邏輯,缺點是性能比原生差很多

          浮點型的存儲機制(單精度浮點數,雙精度浮點數)

          浮點型數據類型主要有:單精度float、雙精度double

          單精度浮點數(float)

          單精度浮點數在內存中占4個字節、有效數字8位、表示范圍:-3.40E+38 ~ +3.40E+38

          雙精度浮點數(double)

          雙精度浮點數在內存中占8個字節、有效數字16位、表示范圍:-1.79E+308 ~ +1.79E+308

          浮點型常量 數有兩種表示形式:

          1. 十進制數形式:由數字和小數點組成,且必須有小數點,如0.123,123.0
          2. 科學計數法形式:如:
          123e3123E3,其中eE之前必須有數字,且e或E后面的指數必須為整數(當然也包括負整數)

          浮點型簡單來說就是表示帶有小數的數據,而恰恰小數點可以在相應的二進制的不同位置浮動,可能是這樣就被定義成浮點型了。~不得不佩服這文化程度,定義個數據名稱都這么有深度~

          但是!!!

          JavaScript 存儲小數和其它語言如 Java 和 Python 都不同,JavaScript 中所有數字包括整數和小數都只有一種類型 即 Number類型 它的實現遵循 IEEE 754 標準,IEEE 754 標準的內容都有什么,這個咱不用管,我們只需要記住以下一點:

          小結

          計算機存儲雙精度浮點數需要先把十進制數轉換為二進制的科學記數法的形式,然后計算機以自己的規則{符號位+(指數位+指數偏移量的二進制)+小數部分}存儲二進制的科學記數法

          因為存儲時有位數限制(64位),并且某些十進制的浮點數在轉換為二進制數時會出現無限循環,會造成二進制的舍入操作(0舍1入),當再轉換為十進制時就造成了計算誤差

          解決方案

          理論上用有限的空間來存儲無限的小數是不可能保證精確的,但我們可以處理一下得到我們期望的結果

          當你拿到 1.4000000000000001 這樣的數據要展示時,建議使用 toPrecision 湊整并 parseFloat 轉成數字后再顯示,如下:

          parseFloat(1.4000000000000001.toPrecision(12))===1.4  // True

          封裝成方法就是:

          function strip(num, precision=12) {
            return +parseFloat(num.toPrecision(precision));
          }

          對于運算類操作,如 +-*/,就不能使用 toPrecision 了。正確的做法是把小數轉成整數后再運算。以加法為例:

          /**
           * 精確加法
           */
          function add(num1, num2) {
            const num1Digits=(num1.toString().split('.')[1] || '').length;
            const num2Digits=(num2.toString().split('.')[1] || '').length;
            const baseNum=Math.pow(10, Math.max(num1Digits, num2Digits));
            return (num1 * baseNum + num2 * baseNum) / baseNum;
          }

          最后還可以使用第三方庫,如Math.jsBigDecimal.js

          我們可以這樣處理:

          parseFloat((0.1 + 0.2).toFixed(10))

          parseFloat((18466.67*100).toFixed(0))


          給大家分享我收集整理的各種學習資料,前端小白交學習流程,入門教程等回答-下面是學習資料參考。

          前端學習交流、自學、學習資料等推薦 - 知乎

          4位浮點型數據運算

          在這周網絡授課講解變量與常量案例章節中,在計算0.1+0.2時,出現的結果與預期不符合,對此問題很多學生較為糾結。為解決這個問題,本節課主要講授JavaScript數值型數據存儲格式及浮點型數據的加運算操作,以解決各位同學的困惑。


          問題引入?

          例題:請編寫JS程序計算0.1+0.2,并通過控制臺輸出計算結果。

          浮點數計算問題

          該程序直觀判斷可知計算結果為0.3,但是通過控制臺輸出顯示的結果卻不是0.3,其計算結果為:0.30000000000000004。這一問題也是在浮點類型數據相加操作中代表性問題之一。產生這一問題的原因在于浮點類型數據的存儲與運算規則、過程。以下對問題進行解釋說明。

          浮點數加操作問題

          JavaScript數值存儲

          JavaScript程序設計語言存儲數值型數據與其他程序設計語言相比較,沒有單獨對整數、小數進行精確劃分,在實際存儲過程中將所有數值按照IEEE754標準使用64位浮點數存儲數值。64位浮點類型也稱為雙精度浮點類型,占用8個字節,共64位。存儲結構如下圖所示:

          64位浮點類型數據結構

          在該結構中,64位共分為三組,最高位為符號位用于表示數值的正負,即上圖藍色部分,綠色部分11位用于存儲指數值(浮點類型表示類似于科學計數法),剩余52位用于存儲小數位即有效數字。例如:0.1 的64位浮點表示值為:

          0011111110111001100110011001100110011001100110011001100110011010

          10進制小數轉換為64位浮點類型

          本例所提出的問題需要計算0.1與0.2的和,針對JavaScript腳本語言首先需要將其轉換為64位浮點類型。浮點類型數據的表現形式及說明如下:

          浮點類型數值形式

          其中s符號位占1位,指數E占11位,有效數字占52位。其M值可通過左移右移實現在1~2范圍之內。如計算M值為101*2^2可表示為1.01*2^4。對于各部分IEEE754給出了明確的定義,其定義描述如下:

          64位浮點數描述

          在執行過程中首先需要將十進制小數轉換為2進制表示形式,針對題目操作數0.1余0.2,他們對應二進制表示形式如下:

          0.2十進制:0.00110011(下劃線部分表示無限循環)
          0.1十進制: 0.000110011(下劃線部分表示無限循環)

          兩位小數的二進制表示描述如上,如實際存儲過程中需要指定長度的話直接用循環部分填充即可。以計算出的二進制為基礎可以求出對應的s、M、E分別為多少,其中10進制的0.2求解結果如下:

          64位浮點存儲求解

          以上為基礎我們可以求出兩位操作數的64位存儲相關參數。求解結果描述如下圖所示:

          64位浮點表示數據

          浮點類型數據的加法操作

          64位浮點類型數據在進行加法運算時需要按照其運算規則執行運算,其運算規則描述如下:

          浮點數的加法操作過程


          1.對階

          主要是指將兩個操作數的指數部分調整為一樣,本例題指數部分分別為-3,-4,按照對階要求向大的靠攏,需要將-4指數調整為-3。在對階過程需要對M部分作出對應調整。調整結果描述如下:

          對階處理

          經過對階處理之后所有的指數都變為01111111100。因此我們可以進一步對M部分進行加法操作。

          2.M尾數運算

          尾數運算部分主要按照二進制數值進行求和運算即可。在計算過程中可能因為進位關系導致數據整體長度發生變化即產生溢出。本例尾數部分運算過程與結果描述如下:

          尾數求和

          3.規格化處理(右規)

          本例運算過程由于加運算產生進位而導致溢出,最終計算結果形式為10.x x x … x。這種形式需要通過對其右規實現規格化處理。尾數每右移一位,階碼相應加 1,最高位補0。

          規格化處理

          4.舍入處理

          在規格化過程中隨著右移操作,最右側位將會被丟掉,因此需要通過舍入處理減少因丟棄導致的精度損失。本例題采用就近舍入方法,最后舍棄位為1,舍棄之后在剩余結果最低位加1,因此最后四位變為0100。操作結果描述如下:

          舍棄處理操作

          綜上所述,本例題最終0.1加0.2的計算結果二進制表示為:

          01.0011001100110011001100110011001100110011001100110100*2^-2

          問題解決

          在獲取二進制計算結果之后,為方便觀察,我們將該二進制數據恢復為10進制數據,然后進行結果判斷,首先去掉指數部分結果如下:

          0.010011001100110011001100110011001100110011001100110100
          
          轉換結果為:
          
          0.30000000000000004441

          如上所示,通過實際手工計算浮點型數據加運算,我們可以清楚了解在JavaScript進行0.1與0.2加運算時出現0.30000000000000004的原因了。如有問題不清楚同學可在評論區留言評論,如發現錯誤也可留言,大家共同探討、學習、提高。



          本頭條號長期關注編程資訊分享;編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見,可以聯系作者,共同探討。更多程序設計相關教程及實例分享,期待大家關注與閱讀!系列教程鏈接如下:

          JavaScript基礎教程(二)變量、常量與運算符

          JavaScript基礎教程(一)課程說明

          朋友們! 從2024年7月26日起,我們即將開啟一段全新的算法學習之旅!
          感謝你們的支持,你們的熱情是我前進的動力! 學習計劃如下,期待與你一起成長:
          每日一題:每天一個新挑戰;
          循序漸進:從易到難,扎實掌握;
          系統分類:按數據結構分類,有助于構建知識框架;
          豐富題量:100 道精選題,覆蓋簡單/中等/困難難度。

          題目描述

          給你一個含 n 個整數的數組 nums ,其中 nums[i] 在區間 [1, n] 內。請你找出所有在 [1, n] 范圍內但沒有出現在 nums 中的數字,并以數組的形式返回結果。

          示例 1:

          輸入:nums=[4,3,2,7,8,2,3,1]
          輸出:[5,6]

          示例 2:

          輸入:nums=[1,1]
          輸出:[2]

          提示:

          • n==nums.length
          • 1 <=n <=10^5
          • 1 <=nums[i] <=n

          進階:你能在不使用額外空間且時間復雜度為 O(n) 的情況下解決這個問題嗎? 你可以假定返回的數組不算在額外空間內。

          代碼卡片

          題目解析

          給定一個長度為 n 的數組 nums,數組中的元素值范圍在 [1, n] 之間。題目要求找出 [1, n] 范圍內沒有出現在 nums 中的所有數字,并以數組形式返回結果。

          方法一:使用哈希表

          可以通過哈希表來記錄 nums 中出現過的數字。然后遍歷 [1, n],如果某個數字沒有出現在哈希表中,就將其加入到結果數組中。

          • 時間復雜度: O(n),遍歷了數組兩次,一次是構建哈希表,另一次是查找未出現的數字。
          • 空間復雜度: O(n),使用了額外的哈希表存儲出現過的數字。
          var findDisappearedNumbers=function(nums) {
              const n=nums.length;
              const numSet=new Set(nums);
              const result=[];
          
              for (let i=1; i <=n; i++) {
                  if (!numSet.has(i)) {
                      result.push(i);
                  }
              }
          
              return result;
          };

          方法二:標記法(不使用額外空間)

          如果要在不使用額外空間且時間復雜度為 O(n) 的情況下解決問題。可以通過對原數組進行標記的方法來實現。遍歷數組中的每個數字,將數字 nums[i] 對應的位置上的值標記為負數,表示該位置對應的數字已經出現過。最后,再次遍歷數組,凡是值為正數的位置,其對應的數字就是缺失的數字。

          • 時間復雜度: O(n),只遍歷了數組兩次。
          • 空間復雜度: O(1),除了返回值外,未使用額外的空間。
          var findDisappearedNumbers=function(nums) {
              for (let i=0; i < nums.length; i++) {
                  const index=Math.abs(nums[i]) - 1;
                  if (nums[index] > 0) {
                      nums[index]=-nums[index];
                  }
              }
          
              const result=[];
              for (let i=0; i < nums.length; i++) {
                  if (nums[i] > 0) {
                      result.push(i + 1);
                  }
              }
          
              return result;
          };

          總結

          方法二使用了原地修改的模式更優,如果是面試最好都寫出來。

          最后

          如果你有其他思路或方法,歡迎在評論區分享!祝你編碼 ? 愉快!


          主站蜘蛛池模板: 亚洲一区二区三区高清| 亚洲福利视频一区二区三区| 国产精品久久久久久一区二区三区| 国模视频一区二区| 亚洲欧洲一区二区三区| 人妻aⅴ无码一区二区三区| asmr国产一区在线| 国产午夜一区二区在线观看| 国产精品制服丝袜一区| 无码人妻精品一区二区三区66| 色欲AV无码一区二区三区| 亚洲一区二区三区免费视频| 国产精品无码AV一区二区三区| 国产成人精品一区二区三在线观看 | 亚洲第一区精品日韩在线播放| 国产精品区AV一区二区| 亚洲国产欧美国产综合一区| 久久99国产精品一区二区| 国产成人精品久久一区二区三区av | 国产乱码一区二区三区四 | 波多野结衣一区二区三区高清在线| 国产香蕉一区二区精品视频| 精品国产伦一区二区三区在线观看| 亚洲日韩精品无码一区二区三区| 国产福利电影一区二区三区,亚洲国模精品一区 | 亚洲色精品三区二区一区| 亚洲一区二区三区高清视频| 91成人爽a毛片一区二区| 一区二区中文字幕| 韩国美女vip福利一区| 精品黑人一区二区三区| 色一情一乱一伦一区二区三欧美 | 人妻av无码一区二区三区| 人体内射精一区二区三区| 国产91久久精品一区二区| 色婷婷av一区二区三区仙踪林 | 亚洲福利视频一区二区| 精品成人av一区二区三区| 国产一区二区三区在线2021| 久久一本一区二区三区| 成人区精品一区二区不卡亚洲 |