數值的擴展方法以及新增數據類型BigInt

来源:https://www.cnblogs.com/wang-fan-w/archive/2023/02/21/17141037.html
-Advertisement-
Play Games

二進位和八進位表示法 ES6提供了二進位和八進位數值的新的寫法，分別用首碼0b(或0B)和0o或(0O)表示 0b111110111 503 // true; 0o767 503; // true 在es5開始，嚴格模式中，八進位不允許使用首碼0 表示，否則會報錯 // 嚴格模式 (function ...


二進位和八進位表示法

ES6提供了二進位和八進位數值的新的寫法，分別用首碼0b(或0B)和0o或(0O)表示

0b111110111 === 503 // true;
0o767 === 503; // true

在es5開始，嚴格模式中，八進位不允許使用首碼0 表示，否則會報錯

// 嚴格模式
       (function(){
         console.log(0o11 === 011); // 報錯
       })()

    // 非嚴格模式
      (function(){
          console.log(0o11 === 011); // true
        })()

如果要將0b和0o首碼的字元串數值轉十進位，使用Number即可

Number('0o111')  // 7
Number('0o10')  // 8

數值分隔符

較長的數值允許添加分隔符，es2021允許js的數值使用下劃線（_）作為分隔符

let num = 1_000_000_000
console.log(1000000000 === num);   // true

註意：分隔符並不影響原始值

分隔符沒有間隔位數的限制

let num2 = 1_00_0000_00
console.log(100000000 === num2);  // true

小數和科學計數法也可以使用數值分隔符

console.log(0.00_01); // 0.0001
console.log(1e10_000); // Infinity

需要註意的是
1、_不能放在數值的最前面或最後面
2、_ 不能兩個或以上的分隔符連在一起使用
3、_ 小數點的前後不能有分隔符
4、_ 科學計數法中，表示指數的E或e前後不能有分隔符

// 全部報錯
3_.141
3._141
1_e12
1e_12
123__456
_1464301
1464301_

其它進位的數值也可以使用分隔符

console.log(0b1010_0001_1000_0101);  // 二進位
console.log(0xA0_B0_C0);  // 十六進位

註意：進位的首碼前後不能使用分隔符： 0b、0B、0o、0O、0x、0X
不支持數值分隔符的函數：
1、Number()
2、parseInt()
3、parseFloat()

Number('123_456');  // NaN
parseInt('123_456');  // 123

Number.isFinite(), Number.isNaN()

Number.isFinite():用來檢查一個數值是否為有限的,即不是Infinity
有限：true
非有限或非數值：false

Number.isFinite(10);  // true
Number.isFinite(1.2);  // true
Number.isFinite(NaN);  // false
Number.isFinite(Infinity);  // false
Number.isFinite('東方不敗');  // false
Number.isFinite('123');  // false
Number.isFinite(true);  // false

Number.isNaN() : 用來檢查一個值是否為NaN，如果參數不是NaN，返回false

Number.isNaN(NaN);  // true
Number.isNaN(10);  // false
Number.isNaN('10');  // false
Number.isNaN(true);  // false
Number.isNaN(9/NaN);  // true
Number.isNaN('東方不敗' * 10);  // true
Number.isNaN(true / true);  // true

註意
它們與傳統的全局方法isFinite()和isNaN()的區別在於，
傳統方法先調用Number()將非數值的值轉為數值，再進行判斷，而這兩個新方法只對數值有效。
Number.isFinite()對於非數值一律返回false
Number.isNaN()只有對於NaN才返回true，非NaN一律返回false

Number.parseInt(),Number.parseFloat()

ES5 : parseInt()、parseFloat()
ES6 : Number.parseInt()、Number.parseFloat()
行為完全保持一致，這樣做的目的是逐步減少全局性方法，使語言逐步模塊化

parseInt('12.55');  // 12
Number.parseInt('12.55');   // 12

parseFloat('12.55');  // 12.55
Number.parseFloat('12.55');   // 12.55

isInteger()

Number.isInteger()用來判斷值是否為整數

Number.isInteger(15);  // true
Number.isInteger(15.1);  // false

如果值不是數值則返回false

Number.isInteger('15');  //false
Number.isInteger(true);  //false
Number.isInteger(NaN);  //false
Number.isInteger();  //false

JavaScript 採用 IEEE 754 標準，數值存儲為64位雙精度格式，數值精度最多可以達到 53 個二進位位（1 個隱藏位與 52 個有效位）,如果數值的精度超過這個限度，第54位及後面的位就會被丟棄，這種情況下，Number.isInteger可能會誤判。

Number.isInteger(3.0000000000000002) // true

上面代碼中，Number.isInteger的參數明明不是整數，但是會返回true，原因就是這個小數的精度達到了小數點後16個十進位位，轉成二進位位超過了53個二進位位，導致最後的那個2被丟棄了。
!!!!! 總之，如果對數據精度的要求較高，不建議使用Number.isInteger()判斷一個數值是否為整數。

Math對象的擴展

Math.trunc()

Math.trunc用於去掉數值的小數部分，返回整數部分

Math.trunc(5.1);  // 5
Math.trunc(5.5);  // 5
Math.trunc(-5.1); // -5
Math.trunc(-0.123);  // 0

對於非數值，會先使用Number方法將其轉換為數值再返回

Math.trunc(true); // 1
Math.trunc(false); // 0
Math.trunc(null); // 0
Math.trunc('10.123'); // 10

對於空值或無法轉換的值，返回NaN

Math.trunc(NaN);  // NaN
Math.trunc('hello');  // NaN
Math.trunc();  // NaN

Math.sign()

Math.sign()方法用來判斷一個數到底是正數、負數、還是零。非數值會先轉換為數值

說明 結果
參數為正數 +1
參數為負數 -1
參數未0 0
參數為-0 -0
其他 NaN 
Math.sign('5');  // 1
Math.sign(5); // 1
Math.sign(-5); // -1
Math.sign(0); // 0
Math.sign(-0); // -0
Math.sign(true); // 1
Math.sign('hello'); // NaN

Math.hypot()

Math.hypot()方法返回所有參數的平方和和平方根

Math.hypot(3,4);  // 5
Math.hypot(3,4,5); // 7.0710678118654755
Math.hypot(3,4,'5'); // 7.0710678118654755
Math.hypot(3,4,'hello'); // NaN
Math.hypot(); // 0

重點 ！

BigInt 數據類型

js的所有數字都保存成64位浮點數，這給數值的表示帶來了很大的限制
一 ：數值的經度只能到53個二進位位，相當於16個十進位位，大於這個範圍的正數無法精確表示,使得js不適合進行科學和金融方面的精確計算。
二 ：大於等於2的1024次方的數值，js無法表示，會返回Infinity。

// 超過53個二進位的數值們無法保持精度
Math.pow(2,53) === Math.pow(2,53) + 1;  // true

// 超過2的1024次方的數值，無法表示
Math.pow(2,1024);  // Infinity

對此，ES2020引入了新的數據類型BigInt(大整數），作為第八種數據類型，BigInt只用來表示整數，沒有位數限制，任何位數的整數都可以精確表示，語法： 數據n

// 使用BigInt
  let a = 2172141653n
  let b = 15346349309n
  console.log(a*b);  // 33334444555566667777n  // 可以保持精度

// 普通數值
  let c = 2172141653
  let d = 15346349309
  console.log(c * d);  // 33334444555566670000 // 無法保持精度

與整數的區別

  • 123 普通整數
  • 123n BigInt
  • BigInt 類型的數據必須添加尾碼n

BigInt與普通整數是兩種值，它們之間並不相等

15n === 15; // false

數據類型返回bigint

typeof(15n); // bigint

BigInt函數

BigInt可以用來做數據轉換，轉換的方法與Number()基本一致

BigInt(123);  // 123n
BigInt('123'); // 123n
BigInt(true); // 1n
BigInt(false); //0n

下麵是報錯的一些場景

BigInt();   //  TypeError
BigInt('hello');   //  SyntaxError

/* 字元串 123n 會無法解析成Number類型，所以報錯 */
BigInt('123n');   //  SyntaxError

BigInt(null);   //  TypeError
BigInt(NaN);   //  TypeError

/* 參數是小數也會報錯 */
BigInt(1.2);   //  RangeError

BigInt('1.2');   //  SyntaxError

BigInt繼承了Object對象的兩個實例方法

  • BigInt.prototype.toString()
  • BigInt.prototype.valueOf()

它還繼承了 Number 對象的一個實例方法

  • BigInt.prototype.toLocaleString()

此外還提供了三個靜態方法

  • BigInt.asUintN(width, BigInt)
  • BigInt.asIntN(width, BigInt)
  • BigInt.parseInt(string[, radix])

BigInt 轉換規則

可以使用Boolean、Number、String 這三個方法，將BigInt轉換為布爾、數值、字元串類型，轉換後，尾碼n會消失

Boolean(0n);  // false
Number(2n);  // 2
String(2n);  // '2'

取反 ! 運算符可以轉換布爾值

console.log( !0n );  // true
console.log( !1n );  // false

BigInt 數學運算

在數學運算方面， + - *和**這四個運算符與number類型基本一致，除法運算 / 會捨去小數部分，返回一個整數

 console.log( 9 / 5 );  // 1.8
 console.log( 9n / 5n );  // 1n  捨去小數

幾乎所有的數值運算符都可以用在 BigInt，但是有兩個例外。

  • 不帶符號的右移位運算符>>>
  • 一元的求正運算符+

BigInt不能與普通數值混合運算,因為這樣精度會丟失

console.log( 2n + 5);  // TypeError

同樣的原因，如果一個函數參數預期是Number類型，但是得到的是一個BigInt就會報錯。

// 錯誤的寫法
Math.sqrt(4n) // 報錯

// 正確的寫法
Math.sqrt(Number(4n)) // 2

BigInt其他運算

BigInt對應的布爾值，與Number類型一致

  • 0n : false
  • 1n : true
let n = 1n
if(n){
   console.log(true);
} else {
   console.log(false);
}  // true

比較運算符和相等運算符允許BigInt與其他類型的值混合計算，因為這樣做不會損失精度。

 console.log( 0n < 1 );  // true
 console.log( 0n == false);  // true
 console.log( 0n == 0);  // true
 console.log( 0n === 0);  // false

案例源碼：https://gitee.com/wang_fan_w/es6-science-institute

如果覺得這篇文章對你有幫助，歡迎點亮一下star喲


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • scrollView 嵌套 recyclerview 時 BaseQuickAdapter 九宮格圖片拖拽到底部刪除
    九宮格圖片佈局，長按直接拖拽圖片，長按時顯示底部刪除佈局，拖拽到刪除佈局處鬆手可刪除佈局，最後添加按鈕不可拖拽，基於 BaseQuickAdapter 基礎上實現 BaseQuickAdapter 確實很好用，簡化我們的實現代碼，它本身也集成了一套拖拽實現，不過目前無法完美的滿足上面的需求，需要做一 ...
  • Android WebView 踩坑日記，字體怎麼突然變小了？？？
    背景 最近，端內在做 webView 統一的時候，個性簽名中的 WebView 替換為 CustomWebView 之後，發現字體突然變小。 一開始不知道是什麼原因，通過二分法查找最近的提交，排查之後，發現是 SignatureWebView 的繼承關係從 WebView 修改為 CustomWeb ...
  • Map數據結構詳解
    Map Object本質上是鍵值對的集合（Hash結構），但Object只能將字元串當做鍵，這就給Object帶來了很大的限制。 let data = {} let s = { name : '東方不敗' } data[s] = '西方求敗' // 如果鍵傳入非字元串的值，會自動為字元串 conso ...
  • 記錄--uni-app實現京東canvas拍照識圖功能
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 最近公司出了一個新的功能模塊(如下圖)，大提上可以描述為實現拍照完上傳圖片，拖動四方框拍照完成上傳功能，大體樣子如下圖。但是我找遍了 dcloud 插件市場，找到的插件都是移動背景圖片來實現裁剪的，跟京東的功能是相反的，沒辦法只能自己來實 ...
  • 深入理解JavaScript對象
    前言 在 JavaScript 中，對象是一種非常常見的數據類型，幾乎每個程式員都會在日常工作中頻繁地使用對象。在本篇文章中，我們將深入瞭解 JavaScript 對象的一些基本概念和一些高級概念，這些概念對於我們正確理解對象在 JavaScript 中的行為非常重要。 對象的基本概念 在 Java ...
  • Vue3 企業級優雅實戰 - 組件庫框架 - 12 發佈開源組件庫
    前面使用了 11 篇文章分享基於 vue3 、Monorepo 的組件庫工程完整四件套（組件庫、文檔、example、cli）的開發、構建及組件庫的發佈。本文屬於這 11 篇文章的擴展 —— 如何發佈到 GitHub 上以及如何快速利用 GitHub 發佈組件庫文檔。這樣優雅哥的《組件庫框架》系列便 ...
  • 使用VS code將本地的項目推送到gitee的方法（圖例）
    第一步：在gitee新建一個倉庫 寫上基本信息，點擊創建（不要勾選初始化），記住項目名稱 成功後的頁面中，把這個項目地址複製好 第二步VS code推送至gitee 把項目地址粘貼在輸入框，回車 再輸入剛纔新建的項目名稱，回車 此時第一次提交會有新彈窗界面，提示輸入gitee的用戶名和密碼，輸入後點 ...
  • JavaScript 中字元串和數組的截取辦法總結
    字元串 substring 形式：substring(index1, index2) 不會改變原始字元串 將小的參數作為開始位置 start，大的作為結束位置 stop 包含 start，但不包含 stop 如果只給一個參數表示從它 start 截取到字元串結尾 如果某個參數為負，會先將負數變為 0 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類