項目中JavaScript 中最大的安全整數

894974231 發布于2019-08-26 13:57 / 2663人閱讀

摘要：什么是最大安全整數是一個值為的常量。因為的數字存儲使用了中規定的雙精度浮點數數據類型，而這一數據類型能夠安全存儲到之間的數值包含邊界值。

什么是最大安全整數？

MAX_SAFE_INTEGER 是一個值為 9007199254740991的常量。因為Javascript的數字存儲使用了IEEE 754中規定的雙精度浮點數數據類型，而這一數據類型能夠安全存儲 -(253 - 1) 到 253 - 1 之間的數值（包含邊界值）。--- MDN WEB DOCS

在項目會導致什么錯誤？

在代碼中輸出比MAX_SAFE_INTEGER大的Number值

console.log(9007199254740999) // 9007199254741000
console.log(9007199254740993) // 9007199254740992

在代碼中比較超出安全存儲的數值，可能會存在下列情況

9007199254740993 === 9007199254740992 // true

實際項目中碰到的問題

在進行vue 項目開發的時候，通過axios進行前后端數據交互

后端在定義某些數據時將數據的ID 設置為比MAX_SAFE_INTEGER大的int類型

而我取到后也沒有注意到這一情況，在修改某一條數據時，是通過傳回數據ID進行數據定位的。

然后問題就出現了。。。。

數據死活修改不了，后端返回無這條數據，調試了半天，

然后通過對比preview 和 response 中的數據發現了兩者數據不一致

如何解決？

第一個想法是在axios的攔截器中做處理,將數字類型轉換為字符串

9007199254740993  => "9007199254740993"

但經過嘗試后發現axios攔截器中的數據本身就是錯誤了。

然后就用了原生的fetch 做處理

export function getData(data) {
  const promise = new Promise(function (resolve, reject) {
    const headers = new Headers()
    headers.append("Content-Type", "application/json")
    const config = { method: "POST", headers, body: JSON.stringify(data) }
    fetch("api/url", config).then(res => res.text()).then(text => {
      function numberToString (match) {
        return `:"${match.substring(1, match.length - 1)}",`
      }
      const responseJson = JSON.parse(text.replace(/:d{15,100},/g, numberToString))
      resolve(responseJson)
    })
  })
  return promise
}

但問題是這個只解決了一個api 的問題，然后每個都這樣寫，太煩了。
而且fetch 并沒有axios中的攔截器，不能統一處理異常

所有便想要自己封裝一個fetch通過模仿axios 那樣設置攔截器之類的功能。。。。。。

然后就沒有然后了，感覺封裝一個目前需要的fetch會花個半天到一天的時間。
而且又快下班了，所以就去看axios文檔了。
發現axios文檔中已經有這樣一個回調函數，能解決這個問題

 // `transformResponse` allows changes to the response data to be made before
  // it is passed to then/catch
  transformResponse: [function (data) {
    // Do whatever you want to transform the data

    return data;
  }],

這個不看文檔的壞習慣，浪費了大半天時間

最后代碼

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
  timeout: 5*1000, // request timeout
  transformResponse: [function (data) {
    function numberToString (match) {
      return `:"${match.substring(1, match.length - 1)}",`
    }
    if (isJSON(data)) {
      const responseJson = JSON.parse(data.replace(/:d{15,100},/g, numberToString))
      return responseJson
    } else {
      return data
    }
  }]
})

總結

第一，我這個數據是json類型的的所以在取到原始數據就是字符串，其實是對字符串進行處理

第二，最后的方案不是最優的，應為這個會處理每一條數據，不管那條數據中有沒有超出范圍的數字

第三，能想到的比較好的方案是和后端對接時問清楚那些是超出的，然后將這兩種情況區分開來，再使用不同的axios 封裝

GPU云服務器云服務器數據分析中最大的數 java項目中的調度服務器中的項目路徑 js中聲明整數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/109893.html

JS中如何理解浮點數？

摘要：本文通過介紹的二進制存儲標準來理解浮點數運算精度問題，和理解對象的等屬性值是如何取值的，最后介紹了一些常用的浮點數精度運算解決方案。浮點數精度運算解決方案關于浮點數運算精度丟失的問題，不同場景可以有不同的解決方案。本文由云+社區發表相信大家在平常的 JavaScript 開發中，都有遇到過浮點數運算精度誤差的問題，比如 console.log(0.1+0.2===0.3)// fa...

bang590 2019-08-26 13:26 評論0 收藏0
你不知道的JavaScript中卷第一、二章

摘要：表達式沒有返回值，因此返回結果是。并不改變表達式的結果，只要讓表達式不返回值按慣例我們用來獲得這主要源自語言，當然使用或其他表達式也是可以的。不是數字的數字如果數學運算的操作數不是數字類型，就無法返回一個有效的數字，這種情況下返回值為。這里的內容是讀書筆記，僅供自己學習所用，有欠缺的地方歡迎留言提示。第一部分類型和語法第1章類型ECMAScript語言類型包括Undefin...

levy9527 2019-08-26 14:05 評論0 收藏0
探尋 JavaScript 精度問題以及解決方案

摘要：推導為何等于在中所有數值都以標準的雙精度浮點數進行存儲的。先來了解下標準下的雙精度浮點數。精度位總共是，因為用科學計數法表示，所以首位固定的就沒有占用空間。驗證完成的最大安全數是如何來的根據雙精度浮點數的構成，精度位數是。閱讀完本文可以了解到 0.1 + 0.2 為什么等于 0.30000000000000004 以及 JavaScript 中最大安全數是如何來的。十進制小數轉為二...

YanceyOfficial 2019-08-23 12:13 評論0 收藏0
【重溫基礎】6.數字

摘要：本文是重溫基礎系列文章的第六篇。以指定的精度返回該數值對象的字符串表示，可接收一個參數，用來指定有效數個數的整數。本文是重溫基礎系列文章的第六篇。今日感受：自己需要多總結，會有不同收獲（比如今晚我做的轉正總結）。系列目錄：【復習資料】ES6/ES7/ES8/ES9資料整理(個人整理) 【重溫基礎】1.語法和數據類型【重溫基礎】2.流程控制和錯誤處理【重溫基礎】3.循環和...

terro 2019-08-23 14:10 評論0 收藏0
一個函數讓你看懂 'Why 0.1+0.2!=0.3'

摘要：的二進制科學計數法第位是，所以就有了下面的結果有著同樣的問題，其實正是由于這樣的存儲，在這里有了精度丟失，導致了。最大安全數字中表示最大安全數字計算結果是，即在這個數范圍內不會出現精度丟失小數除外這個數實際上是。是一個任意精度的整數。話不多說，先上代碼 function judgeFloat(n, m) { const binaryN = n.toString(2...

mushang 2019-08-23 15:37 評論0 收藏0