超出JavaScript安全整数限制的数字计算BigInt详解


Posted in Javascript onJune 24, 2018

JavaScript中的基本数据类Number是双精度浮点数,它可以表示的最大安全范围是正负9007199254740991,也就是2的53次方减一,在浏览器控制台分别输入Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER可查看对应的最大/小值

const max = Number.MAX_SAFE_INTEGER;
  // → 9_007_199_254_740_991
  // 注意:为了便于阅读,我使用下划线作为分隔符将这些数字分组为千位数。数字文字分隔符提案对普通的JavaScript数字文字使用正确。

将这个最大值加一,可以得到预期的结果:

max + 1;
// → 9_007_199_254_740_992 ✅

但是,如果我们再次增加它,结果不再可以完全表示为JavaScript Number:

max + 2;
// → 9_007_199_254_740_992 ❌

我们会发现max+1和max+2的结果一样。只要我们在JavaScript中获得这个特定的值,就无法判断它是否准确。对安全整数范围以外的整数(即从Number.MIN_SAFE_INTEGER到Number.MAX_SAFE_INTEGER)的任何计算可能会失去精度。出于这个原因,我们只能依靠安全范围内的数字整数值。

BigInt

BigInt是JavaScript中的一个新的原始类型,可以用任意精度表示整数。使用BigInt,即使超出JavaScript Number 的安全整数限制,也可以安全地存储和操作大整数。

chrome 67+开始支持BigInt,本文所有demo都是基于chrome 67。

要创建一个BigInt,在数字后面添加n后缀即可,例如,123变成123n。全局BigInt(number)函数可以用来将Number转换成BigInt。换句话说,BigInt(123) === 123n。让我们用这两种技术来解决我们之前遇到的问题:

BigInt(Number.MAX_SAFE_INTEGER) + 2n;
// → 9_007_199_254_740_993n ✅

我们将两个Number 相乘:

1234567890123456789 * 123;
// → 151851850485185200000 ❌

查看上面两个数字,末尾分别是9和3,9*3=27,然而结果末尾却是000,明显是错误的,让我们用BigInt代替:

1234567890123456789n * 123n;
// → 151851850485185185047n ✅

这次我们得到了正确的结果。

Number 的安全整数限制不适用于BigInt。因此,BigInt我们可以执行正确的整数运算而不必担心失去精度。

BigInt是JavaScript语言中的一个原始类型。因此,可以使用typeof操作符检测到这种类型:

typeof 123;
// → 'number'
typeof 123n;
// → 'bigint'

因为BigInts是一个单独的类型,所以a BigInt永远不会等于a Number,例如 42n !== 42。要比较a BigInt和a Number,在比较之前将其中一个转换为另一个的类型或使用abstract equal(==):

42n === BigInt(42);
// → true
42n == 42;
// → true

当强制转换为布尔型(使用if,&&,||,或Boolean(int)),BigInt按照和Number相同的逻辑转换。

if (0n) {
 console.log('if');
} else {
 console.log('else');
}
// → logs 'else', because `0n` is falsy.

运算符

BigInt支持最常见的运算符,二元运算符+、-、*、**、/、%都正常工作,按位操作|,&, <<,>>和Number是一样的

(7 + 6 - 5) * 4 ** 3 / 2 % 3;
// → 1
(7n + 6n - 5n) * 4n ** 3n / 2n % 3n;
// → 1n

一元运算符-可以用来表示一个负值BigInt,例如-42n。一元+是不支持的,因为它会破坏asm.js代码,在asm.js中+x总是抛出异常。

另外一个问题是,不允许在BigInt和Number 之间混合运算。看看这个例子:

BigInt(Number.MAX_SAFE_INTEGER) + 2.5;
// → ?? ?

结果应该是什么?这里没有好的答案。BigInt不能表示小数,并且 Number不能表示BigInt超出安全整数限制的数字。因此,BigInt和Number 之间的混合操作会导致TypeError异常。

这个规则的唯一例外是比较运算符,比如===(如前所述) <,并且>=- 因为它们返回布尔值,所以不存在精度损失的风险。

1 + 1n;
// → TypeError
123 < 124n;
// → true

API

全局BigInt构造函数与构造函数Number类似:将其参数转换为BigInt(如前所述)。如果转换失败,它抛出一个SyntaxError或 RangeError异常。

BigInt(123);
// → 123n
BigInt(1.5);
// → RangeError
BigInt('1.5');
// → SyntaxError

两个库函数启用将BigInt值封装为有符号或无符号整数,限于特定的位数。BigInt.asIntN(width, value)将一个BigInt值包装为一个 width-digit二进制有符号整数,并将BigInt.asUintN(width, value)一个BigInt值包装为一个width-digit二进制无符号整数。例如,如果您正在执行64位算术,则可以使用这些API来保持适当的范围:

// Highest possible BigInt value that can be represented as a
// signed 64-bit integer.
const max = 2n ** (64n - 1n) - 1n;
BigInt.asIntN(64, max);
→ 9223372036854775807n
BigInt.asIntN(64, max + 1n);
// → -9223372036854775808n
//  ^ negative because of overflow

请注意,只要我们传递BigInt超过64位整数范围的值(例如,绝对数值为63位+符号为1位),就会发生溢出。

BigInt可以准确地表示64位有符号和无符号整数,这些常用于其他编程语言。两种新类型的数组风格,BigInt64Array并且 BigUint64Array更容易有效地表示和操作这些值的列表:

const view = new BigInt64Array(4);
// → [0n, 0n, 0n, 0n]
view.length;
// → 4
view[0];
// → 0n
view[0] = 42n;
view[0];
// → 42n

BigInt64Array确保其值是64位有符号的。

// Highest possible BigInt value that can be represented as a
// signed 64-bit integer.
const max = 2n ** (64n - 1n) - 1n;
view[0] = max;
view[0];
// → 9_223_372_036_854_775_807n
view[0] = max + 1n;
view[0];
// → -9_223_372_036_854_775_808n
//  ^ negative because of overflow

BigUint64Array确保这些值是64位无符号的。

Javascript 相关文章推荐
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
轻松理解Javascript变量的相关问题
Jan 20 Javascript
jquery实现焦点轮播效果
Feb 23 Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 Javascript
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
微信小程序中换行空格(多个空格)写法详解
Jul 10 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 Javascript
使用jquery实现轮播图效果
Jan 02 jQuery
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
JS的函数调用栈stack size的计算方法
Jun 24 #Javascript
JavaScript中var、let、const区别浅析
Jun 24 #Javascript
使用JavaScript中的lodash编写双色球效果
Jun 24 #Javascript
Vue中$refs的用法详解
Jun 24 #Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 #Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 #Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
Jun 22 #Javascript
You might like
使用PHP提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
php中获取关键词及所属来源搜索引擎名称的代码
2011/02/15 PHP
php实现网页缓存的工具类分享
2015/07/14 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
两个Javascript小tip资料
2010/11/23 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
JavaScript中的数学运算介绍
2014/12/29 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
javascript中Function类型详解
2015/04/28 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
关于Vue中$refs的探索浅析
2020/11/05 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
Python中的字符串切片(截取字符串)的详解
2019/05/15 Python
python的移位操作实现详解
2019/08/21 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
行政人员岗位职责
2013/12/08 职场文书
运动会解说词200字
2014/02/06 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
学校中秋节活动总结
2015/03/23 职场文书
奖金申请报告模板
2015/05/15 职场文书
人民币使用说明书
2019/04/17 职场文书
python基础之文件处理知识总结
2021/05/23 Python
JavaScript实现酷炫的鼠标拖尾特效
2022/02/18 Javascript