js中的bigint类型转化为json字符串时报无法序列化的问题

更新时间：2024年01月23日 09:52:43 作者：panglinglong

JSON序列化指将JSON对象转换为JSON字符串,J实现方式有两种：一种是调用JSON对象内置的stringify()函数,一种是为对象自定义toJSON()函数,本文重点介绍js中的bigint类型转化为json字符串时报无法序列化的问题,感兴趣的朋友一起看看吧

网上查了一下，解决这个问题的思路就是将bigint类型的数据转化为字符串，这样就能正确转化为json字符串了。对于一个是bigint的变量，直接使用toString方法就可以转化为字符串了，但是bigint变量在一个对象中，那么我们就需要一个更加通用的方法，网上看到一个很好的封装好的方法，如下。

export default function objReplacer(key, value) {
  if (typeof value === 'bigint') {
      return value.toString();
  } else if (typeof value === 'object') {
      for (const k in value) {
          if (typeof value[k] === 'bigint') {
              value[k] = value[k].toString();
          } else if (typeof value[k] === 'object') {
              value[k] = objReplacer(k, value[k]); // 递归处理嵌套对象
          }
      }
  }
  return value;
}

import objReplacer from "src/utils/bingintToString"
JSON.stringify(res,objReplacer)

扩展

JavaScript JSON序列化和反序列化

概述

JSON序列化指将JSON对象转换为JSON字符串。J实现方式有两种：一种是调用JSON对象内置的stringify()函数，一种是为对象自定义toJSON()函数。

JSON反序列化指将JSON字符串转换为JSON对象。实现方式有两种：一种是使用JSON对象内置的parse()函数，一种是使用eval()函数。

序列化

方式一：JSON.stringify()

语法

JSON.stringify(value, replacer, space)

说明

参数value：需要处理的值，可以为对象活数组。

参数replacer：可选参数。

如果其值为一个函数，则表示在序列化过程中，被序列化值的每个属性都会经过该函数的处理；
如果其值为一个数组，则表示只有包含在这个数组中的属性名才会被序列化到最终的JSON字符串中；
如果该值为null或者未传递，则value参数对应值的所有属性都会被序列化。

参数space：可选参数。用于指定缩进用的空白字符串，美化输出。

如果参数是个数字，则代表有多少个空格，上限值为10；
如果该参数的值小于1，则意味着没有空格；
如果参数为字符串，则取字符串的前十个字符作为空格；
如果没有传入参数或者传入的值为null，将没有空格。

var obj = {
    name: "xiaoming",
    age: 18,
    sex: true,
    address: ["广东省", "广州市"]
};
var jsonStr = JSON.stringify(obj);
console.log(jsonStr); 
//{"name":"xiaoming","age":18,"sex":true,"address":["广东省","广州市"]}

使用2个参数

var obj = {
    name: "xiaoming",
    age: 18,
    sex: true,
    address: ["广东省", "广州市"]
};
function replacerFn(key, value) {
    if (typeof value === "string") {
        return value.toUpperCase();
    }
    return value;
}
var jsonStr = JSON.stringify(obj, replacerFn);
console.log(jsonStr);
//{"name":"XIAOMING","age":18,"sex":true,"address":["广东省","广州市"]}

var obj = {
    name: "xiaoming",
    age: 18,
    sex: true,
    address: ["广东省", "广州市"]
};
var jsonStr = JSON.stringify(obj, ["name", "age"]);
console.log(jsonStr);
//{"name":"xiaoming","age":18}

使用3个参数

var obj = {
    name: "xiaoming",
    age: 18,
    sex: true,
    address: ["广东省", "广州市"]
};
function replacerFn(key, value) {
    if (typeof value === "string") {
        return value.toUpperCase();
    }
    return value;
}
var jsonStr = JSON.stringify(obj, ["name", "age"], 10);
console.log(jsonStr);

var obj = {
    name: "xiaoming",
    age: 18,
    sex: true,
    address: ["广东省", "广州市"]
};
function replacerFn(key, value) {
    if (typeof value === "string") {
        return value.toUpperCase();
    }
    return value;
}
var jsonStr = JSON.stringify(obj, ["name", "age"], "@@@");
console.log(jsonStr);

在这里插入图片描述

其他

var jsonStr = JSON.stringify([new Number(1), new String("false"), new Boolean(false)]);
console.log(jsonStr); 
//[1,"false",false]

var jsonStr = JSON.stringify({
    x: undefined,
    y: Object,
    z: Symbol("")
});
console.log(jsonStr);
//{}

var jsonStr = JSON.stringify([undefined, Object, Symbol("")]);
console.log(jsonStr);
//[null,null,null]

方式二：自定义toJson

如果一个被序列化的对象拥有toJSON()函数，那么toJSON()函数就会覆盖默认的序列化行为，被序列化的值将不再是原来的属性值，而是toJSON()函数的返回值。

toJSON()函数用于更精确的控制序列化，可以看作是对stringify()函数的补充。

var obj = {
    name: "xiaoming",
    age: 18,
    sex: true,
    address: ["广东省", "广州市"],
    toJSON: function() {
        return {
            Name: this.name,
            Age: this.age,
            Sex: this.sex
        };
    }
};
var jsonStr = JSON.stringify(obj);
console.log(jsonStr);
//{"Name":"xiaoming","Age":18,"Sex":true}

序列化顺序

序列化处理的顺序如下：

如果待序列化的对象存在toJSON()函数，则优先调用toJSON()函数，以toJSON()函数的返回值作为待序列化的值，否则返回JSON对象本身。
如果stringify()函数提供了第二个参数replacer，则对上一步的返回值经过replacer参数处理。
如果stringify()函数提供了第三个参数，则对JSON字符串进行格式化处理，返回最终的结果。

反序列化

方式一：JSON.parse()

语法

JSON.parse(text, reviver)

说明

参数text：待解析度JSON字符串。

参数reviver：可选参数。

如果是一个函数，则规定了原始值在返回之前如何被解析改造。
如果被解析的JSON字符串是非法的，则会抛出异常。

仅一个参数使用

var arrStr = '[1,true,"hello"]';
var arr = JSON.parse(arrStr);
console.log(arr); //[1, true, "hello"]

var objStr = `{
"name":"xiaoming",
"age":18,
"address":"beijing"
}`;
var obj = JSON.parse(objStr);
console.log(obj); //{name: "xiaoming", age: 18, address: "beijing"}

var a = "12.34";
var result = JSON.parse(a);
console.log(result); //12.34

使用2个参数

var objStr = `{
"name":"xiaoming",
"age":18,
"address":"beijing"
}`;
var result = JSON.parse(objStr, function(key, value) {
    if (key === "name") {
        return value + "先生";
    }
    if (key === "age") {
        return value + "岁";
    }
    return value;
});
console.log(result); //{name: "xiaoming先生", age: "18岁", address: "beijing"}

方式二eval()

eval()函数用于计算JavaScript字符串，并把它作为脚本来执行。

语法

eval("(" + str + ")")

说明

这里为什么要使用括号将拼接出来的字符串括起来呢？

因为JSON字符串是以“{}”表示开始和结束，在JavaScript中它会被当作一个语句块来处理，所以必须强制将它处理成一个表达式，所以采用括号。

使用

var objStr = `{
"name":"xiaoming",
"age":18,
"address":"beijing"
}`;
var result = eval("(" + objStr + ")");
console.log(result); //{name: "xiaoming先生", age: "18岁", address: "beijing"}

到此这篇关于js中的bigint类型转化为json字符串时报无法序列化的问题的文章就介绍到这了,更多相关js bigint类型转化json字符串报无法序列化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

js实现网页同时进行多个倒计时功能
这篇文章主要为大家详细介绍了js实现网页同时进行多个倒计时功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-02-02
原生JS实现手动轮播图效果实例代码
手动轮播图，为轮播图中的一种，轮播图主要有无缝轮播，手动轮播，延迟轮播，切换轮播等等，轮播图主要用于展现图片，新出商品，词条，又能美观网页。給网页中增加动态效果。接下来通过本文给大家分享原生JS实现手动轮播图的实例代码，一起看看吧
2018-11-11
javascript实现的基于金山词霸网络翻译的代码
下面的这段代码是基于金山词霸网络翻译提供的接口，远程调用文件，可以作为一个自定义的在线查询工具。
2010-01-01
关键字空格替换为逗号的js代码
这个功能主要是方便我们在发布文章时填写关键字的时候，不用切换为英文状态输入逗号，他可以将中文逗号和空格统一转换为英文逗号，提高工作效率。
2008-11-11
前端实现序列帧动画的几种常见方法
这篇文章主要介绍了前端实现序列帧动画的多种方法,包括CSS动画、JavaScript控制、Canvas绘制、SVG动画和WebGL,文中通过代码介绍的非常详细,需要的朋友可以参考下
2025-01-01
js中常见的4种创建对象方式与优缺点
不管是哪门语言,千变万化不离其宗,深入理解其本质,方能应用自如,下面这篇文章主要给大家介绍了关于js中常见的4种创建对象方式与优缺点,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-01-01
JavaScript实现重置表单（reset）的方法
这篇文章主要介绍了JavaScript实现重置表单（reset）的方法,涉及javascript中reset()方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-04-04
javascript填充默认头像方法
本篇文章通过代码实例给大家讲述了如何javascript填充默认头像以及相代码分享，对此有兴趣的朋友可以学习下。
2018-02-02
ES6实现的遍历目录函数示例
这篇文章主要介绍了ES6实现的遍历目录函数,涉及ES6文件目录的遍历、读取、回调函数及json相关操作技巧,需要的朋友可以参考下
2017-04-04
如何用前端html实现2024烟花效果
这篇文章主要给大家介绍了关于如何用前端html实现2024烟花效果的相关资料,文中介绍的是JavaScript代码定义了烟花碎片和火箭类,通过动画循环模拟烟花爆炸效果,需要的朋友可以参考下
2024-11-11