解决超出JS的安全整数的限制范围问题

 更新时间:2024年08月30日 14:52:14   作者:攻^城^狮  
这篇文章主要介绍了解决超出JS的安全整数的限制范围问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

解决超出JS的安全整数的限制范围

JavaScript 能够准确表示的整数范围在-2^53到 2^53之间,超过这个范围,无法精确表示这个值。

Number.MIN_SAFE_INTEGER //-9007199254740991
Number.MAX_SAFE_INTEGER // 9007199254740991

此时用到 json-bigint将后端返回数据处理处理之后才能正常使用:

  • 1.项目需要安装的依赖
> npm i json-bigint
  • 2.引入json-bigint文件
>import JSONbig from 'json-bigint'

transformResponse是将后端返回的原始数据进行处理

下面使用 : try-catch 来捕获异常

因为:后端返回的数据可能不是 JSON 格式字符串,如果不是则将data数据原封不动的直接返回给请求使用

const request = axios.create({
  baseURL: '', // 请求的基础路径
  transformResponse: [function (data) {
    try {
      return JSONbig.parse(data)
    } catch (err) {
      return data
    }
  }]
  })

请求回来的数据使用.toString() 即可获取

request({
	method:'GET',//请求方法
	url:'',//请求路径
	params: {},//请求参数拼接在url上面
}).then(res=>{
			console.log(res.data.id.toString())
			})

JS实现超范围的数相加

在js中能表示的最大安全整数是 9007199254740991,可以用API Number.MAX_SAFE_INTEGER 看一下

超出范围就会发生精度丢失,像这样

解决方法

相当于一个字符串相加的问题。不能把数字简单的相加,需要倒序取数字的每一位,进行相加,大于等于10,进1,小于10,进0,把结果保存在一个字符串中。

注意点:

  • 1、要考虑长度不一样
  • 2、要考虑进位,所以需要倒序来相加

代码如下:

function add(a,b){
    // 保存最终结果
    var res='';

    // 保存两位相加的结果 和 进位值
    var c=0;

    // 字符串转数组
    a = a.split('');
    b = b.split('');

    while (a.length || b.length || c){
        // ~~ 用来把String类型 转为 Number类型
        // 把两位相加的结果 和 进位值相加
        // pop方法返回数组的最后一位,并删除
        c += ~~a.pop() + ~~b.pop();

        // 取余,把余数拼接到最终结果中
        res = c % 10 + res;

        // 保存进位,true 或者 false
        c = c>9;
    }
    return res;
}
add('11111111111111111','22222222222222222');

解释:

1、~ 是JavaScript中的操作符,按位非

~~ 经常用来进行取整和类型转换,他和显示的用Number进行类型转换还是有区别的,比如处理 undefined 的时候。

而在两个大整数,长度不一样的时候,其中一个数 已经 pop 了所有数组中的元素之后,还要pop的话,就会返回 undefined ,所以如果用 Number 显示的转化,起码要写成这样。

var ai = a.pop();
ai = ai===undefined? 0:Number(ai);

var bi = b.pop();
bi = bi===undefined? 0:Number(bi);

c += ai + bi;

明显是用 ~~ 方便。

2、在保存进位值的时候,用的并不是 1 和 0 ,而是true 和 false,这是因为隐式类型转换的时候,true会转为1,false会转为0。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 原生JS实现的轮播图功能详解

    原生JS实现的轮播图功能详解

    这篇文章主要介绍了原生JS实现的轮播图功能,结合实例形式分析了javascript实现轮播图的原理、操作技巧与相关注意事项,需要的朋友可以参考下
    2018-08-08
  • Fetch超时设置与终止请求详解

    Fetch超时设置与终止请求详解

    这篇文章主要给大家介绍了关于Fetch超时设置与终止请求的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Fetch具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • JavaScript中代理与反射的用法详解

    JavaScript中代理与反射的用法详解

    JavaScript作为一门灵活而强大的语言,提供了代理(Proxy)与反射(Reflect)这两个元编程工具,它们为开发者提供了更深层次的语言控制和操作,在本篇博客中,我们将深入研究代理与反射的概念、用法,以及如何巧妙地结合它们来实现高级的编程技巧,需要的朋友可以参考下
    2023-12-12
  • Bootstrap图片轮播组件Carousel使用方法详解

    Bootstrap图片轮播组件Carousel使用方法详解

    这篇文章主要为大家详细介绍了Bootstrap图片轮播组件Carousel使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • layui-table表复选框勾选的所有行数据获取的例子

    layui-table表复选框勾选的所有行数据获取的例子

    今天小编就为大家分享一篇layui-table表复选框勾选的所有行数据获取的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 用javascript实现记录来宾姓名的代码

    用javascript实现记录来宾姓名的代码

    用javascript实现记录来宾姓名的代码...
    2007-03-03
  • iframe父页面获取子页面参数的方法

    iframe父页面获取子页面参数的方法

    这篇文章主要介绍了iframe父页面获取子页面参数的方法,需要的朋友可以参考下
    2014-02-02
  • JS中使用TextDecoder解码二进制数据(数据流的逐步解码)

    JS中使用TextDecoder解码二进制数据(数据流的逐步解码)

    JS中使用TextDecoder将二进制数据转换为可读文本字符串,首先,创建TextDecoder对象,使用decode()方法,解码为字符串,,{stream:true}选项允许处理流式数据,适用于大型数据流的逐步解码,TextDecoder广泛应用于WebSocket通信、文件读取、网络响应等场景
    2024-10-10
  • TypeScript中定义变量方式以及数据类型详解

    TypeScript中定义变量方式以及数据类型详解

    TypeScript支持 JavaScript的所有语法和语义,同时通过作为ECMAScript的超集来提供一些额外的功能,如类型检测和更丰富的语法,这篇文章主要给大家介绍了关于TypeScript中定义变量方式以及数据类型详解的相关资料,需要的朋友可以参考下
    2022-08-08
  • 使用HTML5+Boostrap打造简单的音乐播放器

    使用HTML5+Boostrap打造简单的音乐播放器

    这篇文章主要介绍了使用HTML5+Boostrap打造简单的音乐播放器 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08

最新评论