快捷導(dǎo)航

js中的bigint類型轉(zhuǎn)化為json字符串時(shí)報(bào)無(wú)法序列化的問(wèn)題

更新時(shí)間：2024年01月23日 09:52:43 作者：panglinglong

JSON序列化指將JSON對(duì)象轉(zhuǎn)換為JSON字符串,J實(shí)現(xiàn)方式有兩種：一種是調(diào)用JSON對(duì)象內(nèi)置的stringify()函數(shù),一種是為對(duì)象自定義toJSON()函數(shù),本文重點(diǎn)介紹js中的bigint類型轉(zhuǎn)化為json字符串時(shí)報(bào)無(wú)法序列化的問(wèn)題,感興趣的朋友一起看看吧

網(wǎng)上查了一下，解決這個(gè)問(wèn)題的思路就是將bigint類型的數(shù)據(jù)轉(zhuǎn)化為字符串，這樣就能正確轉(zhuǎn)化為json字符串了。對(duì)于一個(gè)是bigint的變量，直接使用toString方法就可以轉(zhuǎn)化為字符串了，但是bigint變量在一個(gè)對(duì)象中，那么我們就需要一個(gè)更加通用的方法，網(wǎng)上看到一個(gè)很好的封裝好的方法，如下。

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]); // 遞歸處理嵌套對(duì)象
          }
      }
  }
  return value;
}

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

擴(kuò)展

JavaScript JSON序列化和反序列化

概述

JSON序列化指將JSON對(duì)象轉(zhuǎn)換為JSON字符串。J實(shí)現(xiàn)方式有兩種：一種是調(diào)用JSON對(duì)象內(nèi)置的stringify()函數(shù)，一種是為對(duì)象自定義toJSON()函數(shù)。

JSON反序列化指將JSON字符串轉(zhuǎn)換為JSON對(duì)象。實(shí)現(xiàn)方式有兩種：一種是使用JSON對(duì)象內(nèi)置的parse()函數(shù)，一種是使用eval()函數(shù)。

序列化

方式一：JSON.stringify()

語(yǔ)法

JSON.stringify(value, replacer, space)

說(shuō)明

參數(shù)value：需要處理的值，可以為對(duì)象活數(shù)組。

參數(shù)replacer：可選參數(shù)。

如果其值為一個(gè)函數(shù)，則表示在序列化過(guò)程中，被序列化值的每個(gè)屬性都會(huì)經(jīng)過(guò)該函數(shù)的處理；
如果其值為一個(gè)數(shù)組，則表示只有包含在這個(gè)數(shù)組中的屬性名才會(huì)被序列化到最終的JSON字符串中；
如果該值為null或者未傳遞，則value參數(shù)對(duì)應(yīng)值的所有屬性都會(huì)被序列化。

參數(shù)space：可選參數(shù)。用于指定縮進(jìn)用的空白字符串，美化輸出。

如果參數(shù)是個(gè)數(shù)字，則代表有多少個(gè)空格，上限值為10；
如果該參數(shù)的值小于1，則意味著沒(méi)有空格；
如果參數(shù)為字符串，則取字符串的前十個(gè)字符作為空格；
如果沒(méi)有傳入?yún)?shù)或者傳入的值為null，將沒(méi)有空格。

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個(gè)參數(shù)

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個(gè)參數(shù)

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

如果一個(gè)被序列化的對(duì)象擁有toJSON()函數(shù)，那么toJSON()函數(shù)就會(huì)覆蓋默認(rèn)的序列化行為，被序列化的值將不再是原來(lái)的屬性值，而是toJSON()函數(shù)的返回值。

toJSON()函數(shù)用于更精確的控制序列化，可以看作是對(duì)stringify()函數(shù)的補(bǔ)充。

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}

序列化順序

序列化處理的順序如下：

如果待序列化的對(duì)象存在toJSON()函數(shù)，則優(yōu)先調(diào)用toJSON()函數(shù)，以toJSON()函數(shù)的返回值作為待序列化的值，否則返回JSON對(duì)象本身。
如果stringify()函數(shù)提供了第二個(gè)參數(shù)replacer，則對(duì)上一步的返回值經(jīng)過(guò)replacer參數(shù)處理。
如果stringify()函數(shù)提供了第三個(gè)參數(shù)，則對(duì)JSON字符串進(jìn)行格式化處理，返回最終的結(jié)果。

反序列化

方式一：JSON.parse()

語(yǔ)法

JSON.parse(text, reviver)

說(shuō)明

參數(shù)text：待解析度JSON字符串。

參數(shù)reviver：可選參數(shù)。

如果是一個(gè)函數(shù)，則規(guī)定了原始值在返回之前如何被解析改造。
如果被解析的JSON字符串是非法的，則會(huì)拋出異常。

僅一個(gè)參數(shù)使用

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個(gè)參數(shù)

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()函數(shù)用于計(jì)算JavaScript字符串，并把它作為腳本來(lái)執(zhí)行。

語(yǔ)法

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

說(shuō)明

這里為什么要使用括號(hào)將拼接出來(lái)的字符串括起來(lái)呢？

因?yàn)镴SON字符串是以“{}”表示開始和結(jié)束，在JavaScript中它會(huì)被當(dāng)作一個(gè)語(yǔ)句塊來(lái)處理，所以必須強(qiáng)制將它處理成一個(gè)表達(dá)式，所以采用括號(hào)。

使用

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

到此這篇關(guān)于js中的bigint類型轉(zhuǎn)化為json字符串時(shí)報(bào)無(wú)法序列化的問(wèn)題的文章就介紹到這了,更多相關(guān)js bigint類型轉(zhuǎn)化json字符串報(bào)無(wú)法序列化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: