美图齐众专注资阳网站设计 资阳网站制作 资阳网站建设
资阳网站建设公司服务热线：028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

前端大数的运算及相关知识总结

 背景

前段时间我在公司的项目中负责的是权限管理这一块的需求。需求的大概内容就是系统的管理员可以在用户管理界面对用户和用户扮演的角色进行增删改查的操作，然后当用户进入主应用时，前端会请求到一个表示用户权限的数组usr_permission，前端通过usr_permission来判断用户是否拥有某项权限。

创新互联是一家专业提供和平企业网站建设,专注与网站设计制作、做网站、H5建站、小程序制作等业务。10年已为和平众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。

这个usr_permission是一个长度为16的大数字符串数组，如下所示：

 
 
 
    
  
  
  
  1. const usr_permission = [ 
    2.   
  
  
  2.   "17310727576501632001", 
    3.   
  
  
  3.     "1081919648897631175", 
    4.   
  
  
  4.     "4607248419625398332", 
    5.   
  
  
  5.     "18158795172266376960", 
    6.   
  
  
  6.     "18428747250223005711", 
    7.   
  
  
  7.     "17294384420617192448", 
    8.   
  
  
  8.     "216384094707056832", 
    9.   
  
  
  9.     "13902625308286185532", 
    10.   
  
  
  10.     "275821367043", 
    11.   
  
  
  11.     "0", 
    12.   
  
  
  12.     "0", 
    13.   
  
  
  13.     "0", 
    14.   
  
  
  14.     "0", 
    15.   
  
  
  15.     "0", 
    16.   
  
  
  16.     "0", 
    17.   
  
  
  17.     "0", 
    18.   
  
  
  18. ] 
    19.

数组中的每一个元素可以转成64位的二进制数，二进制数中的每一位通过0和1表示一种权限，这样每一个元素可以表示64种权限，整个usr_permission就可以表示16*64=1024种权限。后端之所以要对usr_permission进行压缩，是因为后端采用的是微服务架构，各个模块在通信的过程中通过在请求头中加入usr_permission来做权限的认证。

数组usr_permission的第0个元素表示第[0, 63]号的权限，第1个元素表示第[64, 127]号的权限，以此类推。比如现在我们要查找第220号权限：

 
 
 
    
  
  
  
  1. const permission = 220 // 查看销售出库 
    2.   
  
  
  2. const usr_permission = [ 
    3.   
  
  
  3.   "17310727576501632001", 
    4.   
  
  
  4.     "1081919648897631175", 
    5.   
  
  
  5.     "4607248419625398332", 
    6.   
  
  
  6.     "18158795172266376960", 
    7.   
  
  
  7.     "18428747250223005711", 
    8.   
  
  
  8.     "17294384420617192448", 
    9.   
  
  
  9.     "216384094707056832", 
    10.   
  
  
  10.     "13902625308286185532", 
    11.   
  
  
  11.     "275821367043", 
    12.   
  
  
  12.     "0", 
    13.   
  
  
  13.     "0", 
    14.   
  
  
  14.     "0", 
    15.   
  
  
  15.     "0", 
    16.   
  
  
  16.     "0", 
    17.   
  
  
  17.     "0", 
    18.   
  
  
  18.     "0", 
    19.   
  
  
  19. ] 
    20.   
  
  
  20.  
    21.   
  
  
  21. // "18158795172266376960" 表示第193号~第256号权限 
    22.   
  
  
  22. // 1111 1100 0000 0000 1111 1111 1111 1111 1111 0000 0000 0011 1111 1111 0000 0000 
    23.   
  
  
  23. // 220 % 64 = 28 
    24.   
  
  
  24. // 0000 0000 0000 0000 0000 0000 0000 1111 1100 0000 0000 1111 1111 1111 1111 1111 
    25.   
  
  
  25. // 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0001 
    26.   
  
  
  26. // ------------------------------------------------------------------------------- 
    27.   
  
  
  27. // 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0001 
    28.
  • 从usr_permission中我们得知第220号权限由第3个元素"18158795172266376960"表示。
  • 我们将"18158795172266376960"转成二进制得到1111 1100 0000 0000 1111 1111 1111 1111 1111 0000 0000 0011 1111 1111 0000 0000。
  • 将220除以64得到余数28，也就是说二进制数1111 1100 0000 0000 1111 1111 1111 1111 1111 0000 0000 0011 1111 1111 0000 0000从右数的第28位表示第220号权限。
  • 我们可以将二进制数1111 1100 0000 0000 1111 1111 1111 1111 1111 0000 0000 0011 1111 1111 0000 0000右移28位，将表示第220号权限的位数推到最低位。
  • 然后将二进制数与1进行按位与操作，如果当前用户拥有第220号权限，则最后得到的结果为1，反之为0。

以上就是前端查找权限的大致过程，那么这个代码要怎么写呢？在编写代码之前，我们先来复习一下JavaScript大数相关的知识，了解编写代码的过程中会遇到什么问题。

IEEE 754标准

在计算机组成原理这门课里我们学过，在以IEEE 754为标准的浮点运算中，有两种浮点数值表示方式，一种是单精度（32位），还有一种是双精度（64位）。

在IEEE 754标准中，一个数字被表示成 +1.0001x2^3 这种形式。比如说在单精度（32位）表示法中，有1位用来表示数字的正负（符号位），8位用来表示2的幂次方（指数偏移值E，需要减去一个固定的数字得到指数e），23位表示1后面的小数位（尾数）。

比如0 1000 0010 0001 0000 0000 0000 0000 000，第1位0表示它是正数，第[2, 9]位1000 0010转换成十进制就是130，我们需要减去一个常数127得到3，也就是这个数字需要乘以2的三次方，第[10, 32]位则表示1.0001 0000 0000 0000 0000 000，那么这个数字表示的就是二级制中的 +1.0001*2^3 ，转换成十进制也就是8.5。

同理，双精度（64位）也是一样的表现形式，只是在64位中有11位用来表示2的幂次方，52位用来表示小数位。

JavaScript 就是采用IEEE754 标准定义的64 位浮点格式表示数字。在64位浮点格式中，有52位可以表示小数点后面的数字，加上小数点前面的1，就有53位可以用来表示数字，也就是说64位浮点可以表示的最大的数字是 2^53-1 ，超过 2^53-1 的数字就会发生精度丢失。因为2^53用64位浮点格式表示就变成了这样：

符号位：0 指数：53 尾数：1.000000...000 （小数点后一共52个0）

小数点后面的第53个0已经被丢弃了，那么 2^53+1 的64位浮点格式就会变得和 2^53 一样。一个浮点格式可以表示多个数字，说明这个数字是不安全的。所以在JavaScript中，最大的安全数是 2^53-1 ，这样就保证了一个浮点格式对应一个数字。

0.1 + 0.2 !== 0.3

有一道很常见的前端面试题，就是问你为什么JavaScript中0.1+0.2为什么不等于0.3？0.1转换成二进制是0.0 0011 0011 0011 0011 0011 0011 ... （0011循环），0.2转换成二进制是0.0011 0011 0011 0011 0011 0011 0011 ... （0011循环），用64位浮点格式表示如下：

 
 
 
    
  
  
  
  1. // 0.1 
    2.   
  
  
  2. e = -4; 
    3.   
  
  
  3. m = 1.1001100110011001100110011001100110011001100110011010 (52位) 
    4.   
  
  
  4.  
    5.   
  
  
  5. // 0.2 
    6.   
  
  
  6. e = -3; 
    7.   
  
  
  7. m = 1.1001100110011001100110011001100110011001100110011010 (52位) 
    8.

然后把它们相加：

 
 
 
    
  
  
  
  1. e = -4; m = 1.1001100110011001100110011001100110011001100110011010 (52位) 
    2.   
  
  
  2. + 
    3.   
  
  
  3. e = -3; m = 1.1001100110011001100110011001100110011001100110011010 (52位) 
    4.   
  
  
  4.  
    5.   
  
  
  5. // 0.1和0.2指数不一致，需要进行对阶操作 
    6.   
  
  
  6. // 对阶操作，会产生精度丢失 
    7.   
  
  
  7. // 之所以选0.1进行对阶操作是因为右移带来的精度丢失远远小于左移带来的溢出 
    8.   
  
  
  8. e = -3; m = 0.1100110011001100110011001100110011001100110011001101 (52位) 
    9.   
  
  
  9. + 
    10.   
  
  
  10. e = -3; m = 1.1001100110011001100110011001100110011001100110011010 (52位) 
    11.   
  
  
  11.  
    12.   
  
  
  12.  
    13.   
  
  
  13. e = -3; m = 10.0110011001100110011001100110011001100110011001100111 (52位) 
    14.   
  
  
  14.  
    15.   
  
  
  15. // 发生精度丢失 
    16.   
  
  
  16. e = -2; m = 1.00110011001100110011001100110011001100110011001100111 (53位) 
    17.

我们看到已经溢出来了（超过了52位），那么这个时候我们就要做四舍五入了，那怎么舍入才能与原来的数最接近呢？比如1.101要保留2位小数，那么结果有可能是 1.10 和 1.11 ，这个时候两个都是一样近，我们取哪一个呢？规则是保留偶数的那一个，在这里就是保留 1.10。

回到我们之前的就是取m=1.0011001100110011001100110011001100110011001100110100 （52位）

然后我们得到最终的二进制数：

1.0011001100110011001100110011001100110011001100110100 * 2 ^ -2

=0.010011001100110011001100110011001100110011001100110100

转换成十进制就是0.30000000000000004，所以，所以0.1 + 0.2 的最终结果是0.30000000000000004。

BigInt

通过前面的讲解，我们清晰地认识到在以前，JavaScript是没有办法对大于 2^53-1 的数字进行处理的。不过后来，JavaScript提供了内置对象BigInt来处理大数。 BigInt 可以表示任意大的整数。可以用在一个整数字面量后面加 n 的方式定义一个 BigInt ，如： 10n ，或者调用函数 BigInt() 。

 
 
 
    
  
  
  
  1. const theBiggestInt = 9007199254740991n; 
    2.   
  
  
  2.  
    3.   
  
  
  3. const alsoHuge = BigInt(9007199254740991); 
    4.   
  
  
  4. // ↪ 9007199254740991n 
    5.   
  
  
  5.  
    6.   
  
  
  6. const hugeString = BigInt("9007199254740991"); 
    7.   
  
  
  7. // ↪ 9007199254740991n 
    8.   
  
  
  8.  
    9.   
  
  
  9. typeof 1n === 'bigint'; // true 
    10.   
  
  
  10. typeof BigInt('1') === 'bigint'; // true 
    11.   
  
  
  11.  
    12.   
  
  
  12. 0n === 0 // ↪ false 
    13.   
  
  
  13.  
    14.   
  
  
  14. 0n == 0 // ↪ true 
    15.

用BigInt实现的权限查找代码如下：

 
 
 
    
  
  
  
  1. hasPermission(permission: Permission) { 
    2.   
  
  
  2.     const usr_permissions = this.userInfo.usr_permissions 
    3.   
  
  
  3.     const arr_index = Math.floor(permission / 64) 
    4.   
  
  
  4.     const bit_index = permission % 64 
    5.   
  
  
  5.     if (usr_permissions && usr_permissions.length > arr_index) { 
    6.   
  
  
  6.       if ((BigInt(usr_permissions[arr_index]) >> BigInt(bit_index)) & 1n) { 
    7.   
  
  
  7.         return true 
    8.   
  
  
  8.       } 
    9.   
  
  
  9.     } 
    10.   
  
  
  10.     return false 
    11.   
  
  
  11. } 
    12.

兼容分析

但是BigInt存在兼容性问题：

根据我司用户使用浏览器版本数据的分析，得到如下饼状图：

不兼容BigInt浏览器的比例占到12.4%

解决兼容性的问题，一种方式是如果希望在项目中继续使用BigInt，那么需要Babel的一些插件进行转换。这些插件需要调用一些方法去检测运算符什么时候被用于BigInt，这将导致不可接受的性能损失，而且在很多情况下是行不通的。另外一种方法就是找一些封装大数运算方法的第三方库，使用它们的语法做大数运算。

用第三方库实现

很多第三方库可以用来做大数运算，大体的思路就是定义一个数据结构来存放大数的正负及数值，分别算出每一位的结果再存储到数据结构中。

jsbn 解决方案

 
 
 
    
  
  
  
  1. // yarn add jsbn @types/jsbn 
    2.   
  
  
  2.  
    3.   
  
  
  3. import { BigInteger } from 'jsbn' 
    4.   
  
  
  4.  
    5.   
  
  
  5. hasPermission(permission: Permission) { 
    6.   
  
  
  6.     const usr_permissions = this.userInfo.usr_permissions 
    7.   
  
  
  7.     const arr_index = Math.floor(permission / 64) 
    8.   
  
  
  8.     const bit_index = permission % 64 
    9.   
  
  
  9.     if (usr_permissions && usr_permissions.length > arr_index) { 
    10.   
  
  
  10.       if ( 
    11.   
  
  
  11.         new BigInteger(usr_permissions[arr_index]) 
    12.   
  
  
  12.           .shiftRight(bit_index) 
    13.   
  
  
  13.           .and(new BigInteger('1')) 
    14.   
  
  
  14.           .toString() !== '0' 
    15.   
  
  
  15.       ) { 
    16.   
  
  
  16.         return true 
    17.   
  
  
  17.       } 
    18.   
  
  
  18.     } 
    19.   
  
  
  19.     return false 
    20.   
  
  
  20.   } 
    21.

jsbi 解决方案

 
 
 
    
  
  
  
  1. // yarn add jsbi 
    2.   
  
  
  2.  
    3.   
  
  
  3. import JSBI from 'jsbi' 
    4.   
  
  
  4.  
    5.   
  
  
  5. hasPermission(permission: Permission) { 
    6.   
  
  
  6.     // 开发环境不受权限限制 
    7.   
  
  
  7.     if (__DEVELOPMENT__) { 
    8.   
  
  
  8.       return true 
    9.   
  
  
  9.     } 
    10.   
  
  
  10.  
    11.   
  
  
  11.     const usr_permissions = this.userInfo.usr_permissions 
    12.   
  
  
  12.     const arr_index = Math.floor(permission / 64) 
    13.   
  
  
  13.     const bit_index = permission % 64 
    14.   
  
  
  14.     if (usr_permissions && usr_permissions.length > arr_index) { 
    15.   
  
  
  15.       const a = JSBI.BigInt(usr_permissions[arr_index]) 
    16.   
  
  
  16.       const b = JSBI.BigInt(bit_index) 
    17.   
  
  
  17.       const c = JSBI.signedRightShift(a, b) 
    18.   
  
  
  18.       const d = JSBI.BigInt(1) 
    19.   
  
  
  19.       const e = JSBI.bitwiseAnd(c, d) 
    20.   
  
  
  20.       if (e.toString() !== '0') { 
    21.   
  
  
  21.         return true 
    22.   
  
  
  22.       } 
    23.   
  
  
  23.     } 
    24.   
  
  
  24.     return false 
    25.   
  
  
  25.   } 
    26.

权限查找新思路

后来，一位同事提到了一种新的权限查找的解决方案：前端获取到数组usr_permission以后，将usr_permission的所有元素转成二进制，并进行字符串拼接，得到一个表示用户所有权限的字符串permissions。当需要查找权限时，查找permissions对应的位数即可。这样相当于在用户进入系统时就将所有的权限都算好，而不是用一次算一次。

在中学时，我们学到的将十进制转成二进制的方法是辗转相除法，这里有一种新思路：

  • 比如我们要用5个二进制位表示11这个数
  • 我们需要先定义一个长度为5，由2的倍数组成的数组[16, 8, 4, 2, 1]，然后将11与数组中的元素挨个比较
  • 11 < 16， 所以得到[0, x, x, x, x]
  • 11 >= 8，所以得到[0, 1, x, x, x]，11 - 8 = 3
  • 3 < 4，所以得到[0, 1, 0, x, x]
  • 3 >= 2，所以得到[0, 1, 0, 1, x]，3 - 2 = 1
  • 1>= 1，所以得到[0, 1, 0, 1, 1]，1 - 1 = 0，结束
  • 所以用5位二进制数表示11的结果就是01011

根据上面的思路可以得到的代码如下，这里用big.js这个包去实现：

 
 
 
    
  
  
  
  1. import Big from 'big.js'     
    2.   
  
  
  2.     import _ from 'lodash' 
    3.   
  
  
  3.  
    4.   
  
  
  4.     permissions = '' // 最后生成的权限字符串 
    5.   
  
  
  5.  
    6.   
  
  
  6.     // 生成长度为64，由2的倍数组成的数组 
    7.   
  
  
  7.     generateBinaryArray(bits: number) { 
    8.   
  
  
  8.       const arr: any[] = [] 
    9.   
  
  
  9.       _.each(_.range(bits), (index) => { 
    10.   
  
  
  10.         arr.unshift(Big(2).pow(index)) 
    11.   
  
  
  11.       }) 
    12.   
  
  
  12.       return arr 
    13.   
  
  
  13.     }   
    14.   
  
  
  14.  
    15.   
  
  
  15.     // 将usr_permission中单个元素转成二进制 
    16.   
  
  
  16.     translatePermission(binaryArray: any[], permission: string) { 
    17.   
  
  
  17.     let bigPermission = Big(permission) 
    18.   
  
  
  18.     const permissionBinaryArray: number[] = [] 
    19.   
  
  
  19.     _.each(binaryArray, (v, i) => { 
    20.   
  
  
  20.       if (bigPermission.gte(binaryArray[i])) { 
    21.   
  
  
  21.         bigPermission = bigPermission.minus(binaryArray[i]) 
    22.   
  
  
  22.         permissionBinaryArray.unshift(1) 
    23.   
  
  
  23.       } else { 
    24.   
  
  
  24.         permissionBinaryArray.unshift(0) 
    25.   
  
  
  25.       } 
    26.   
  
  
  26.     }) 
    27.   
  
  
  27.     return permissionBinaryArray.join('') 
    28.   
  
  
  28.   } 
    29.   
  
  
  29.  
    30.   
  
  
  30.     // 将usr_permission中所有元素的二进制形式进行拼接 
    31.   
  
  
  31.   generatePermissionString() { 
    32.   
  
  
  32.     const usr_permissions = this.userInfo.usr_permissions 
    33.   
  
  
  33.     let str = '' 
    34.   
  
  
  34.     const binaryArray = this.generateBinaryArray(64) 
    35.   
  
  
  35.     _.each(usr_permissions, (permission, index) => { 
    36.   
  
  
  36.       str = `${str}${this.translatePermission(binaryArray, permission)}` 
    37.   
  
  
  37.     }) 
    38.   
  
  
  38.     this.permissions = str 
    39.   
  
  
  39.   } 
    40.   
  
  
  40.  
    41.   
  
  
  41.     // 判断时候拥有某项权限 
    42.   
  
  
  42.   hasPermission(permission: Permission) { 
    43.   
  
  
  43.     if (!this.permissions) { 
    44.   
  
  
  44.       return false 
    45.   
  
  
  45.     } 
    46.   
  
  
  46.     return this.permissions[permission] === '1' 
    47.   
  
  
  47.   } 
    48.

当前名称：前端大数的运算及相关知识总结
URL链接：http://zsjierui.cn/article/codhojg.html

其他资讯