JSON.stringify() 的深入理解

eechen 發(fā)布于2019-08-23 18:40 / 2097人閱讀

摘要：深入理解規(guī)則字符串化并非嚴(yán)格意義上的強(qiáng)制類型轉(zhuǎn)換，但其中涉及的相關(guān)規(guī)則基本類型值的字符串化規(guī)則為轉(zhuǎn)換為，轉(zhuǎn)換為，轉(zhuǎn)換為。如果對(duì)象有自己的方法，字符串化時(shí)就會(huì)調(diào)用該方法并使用其返回值。將對(duì)象強(qiáng)制類型轉(zhuǎn)換為是通過抽象操作來完成的。

[TOC]

序言

最近在看《你所不知道的javascript》[中卷]一書，第一部分是類型和語(yǔ)法。本文是基于這部分的產(chǎn)物。在強(qiáng)制類型轉(zhuǎn)換->抽象值操作-> toString 部分，其中對(duì)工具函數(shù) JSON.stringify(..) 將 JSON 對(duì)象序列化為字符串部分介紹進(jìn)行了詳細(xì)的介紹，而自己之前對(duì) JSON.stringify(..) 認(rèn)識(shí)也比較淺。

JSON.stringify() 不論是在面試還是工作中（對(duì)象的深拷貝、json 字符串序列化）都是重點(diǎn)，總是能看到它的身影。所以針對(duì)這個(gè)知識(shí)點(diǎn)記錄整理一下。

語(yǔ)法

參考MDN

JSON.stringify(value[, replacer [, space]])

參數(shù)

value

將要序列化成一個(gè)JSON 字符串的值。

這是第一個(gè)參數(shù)，應(yīng)該都不陌生，最常用的也是這個(gè)。其他兩個(gè)基本用不到。

一般傳入一個(gè)對(duì)象。但是不僅僅如此，還可以傳入其他值哦。

replacer | 可選

可以三種類型的值：

函數(shù)，在序列化過程中，被序列化的值的每個(gè)屬性都會(huì)經(jīng)過該函數(shù)的轉(zhuǎn)換和處理

數(shù)組，只有包含在這個(gè)數(shù)組中的屬性名才會(huì)被序列化到最終的 JSON 字符串中

null或者未提供，對(duì)象所有的屬性都會(huì)被序列化

一般情況下，我們都不傳，按第3種方式處理。

space | 可選

指定縮進(jìn)用的空白字符串，用于美化輸出。

可以指定三種類型的值：

數(shù)字，代表有多少的空格。上限為10，該值若小于1，則意味著沒有空格。

字符串，字符串的前十個(gè)字母，該字符串將被作為空格。

null或者未提供，將沒有空格。

一般情況下，我們都不傳，按第3種方式處理。

返回值

一個(gè)表示給定值的 json 字符串。

深入理解 ToString 規(guī)則

JSON 字符串化并非嚴(yán)格意義上的強(qiáng)制類型轉(zhuǎn)換，但其中涉及 ToString 的相關(guān)規(guī)則：

基本類型值的字符串化規(guī)則為：null 轉(zhuǎn)換為 "null"，undefined 轉(zhuǎn)換為 "undefined"，true 轉(zhuǎn)換為 "true"。

數(shù)字的字符串化則遵循通用規(guī)則，變成字符串?dāng)?shù)字，其中對(duì)極小和極大的數(shù)字使用指數(shù)形式：

// 1.07 連續(xù)乘以七個(gè) 1000
var a = 1.07 * 1000 * 1000 * 1000 * 1000 * 1000 * 1000 * 1000;
// 七個(gè)1000一共21位數(shù)字
a.toString(); // "1.07e21"

對(duì)普通對(duì)象來說，除非自行定義，否則 toString()（Object.prototype.toString()）返回

內(nèi)部屬性 [[Class]] 的值，如 "[object Object]"。

如果對(duì)象有自己的 toString() 方法，字符串化時(shí)就會(huì)調(diào)用該方法并使用其返回值。

將對(duì)象強(qiáng)制類型轉(zhuǎn)換為 string 是通過 ToPrimitive 抽象操作來完成的。

補(bǔ)充：

[[Class]]：所有 typeof 返回值為 "object" 的對(duì)象（如數(shù)組）都包含一個(gè)內(nèi)部屬性 [[Class]]（可以把它看作一個(gè)內(nèi)部的分類，而非傳統(tǒng)的面向?qū)ο笠饬x上的類）。這個(gè)屬性無法直接訪問，一般通過 Object.prototype.toString(..) 來查看。

Object.prototype.toString.call( [1,2,3] );
// "[object Array]"
Object.prototype.toString.call( /regex-literal/i );
// "[object RegExp]"
上例中，數(shù)組的內(nèi)部 [[Cl

ToPrimitive：為了將值轉(zhuǎn)換為相應(yīng)的基本類型值，抽象操作 ToPrimitive 會(huì)首先（通過內(nèi)部操作 DefaultValue）檢查該值是否有 valueOf() 方法。
如果有并且返回基本類型值，就使用該值進(jìn)行強(qiáng)制類型轉(zhuǎn)換。如果沒有就使用 toString()的返回值（如果存在）來進(jìn)行強(qiáng)制類型轉(zhuǎn)換。
如果 valueOf() 和 toString() 均不返回基本類型值，會(huì)產(chǎn)生 TypeError 錯(cuò)誤。

對(duì)大多數(shù)簡(jiǎn)單值來說，JSON 字符串化和 toString() 的效果基本相同，只不過序列化的結(jié)果總是字符串：

JSON.stringify( 42 ); // "42"
JSON.stringify( "42" ); // ""42"" （含有雙引號(hào)的字符串）
JSON.stringify( null ); // "null"
JSON.stringify( true ); // "true"

json 序列化為字符串時(shí)，需要注意的點(diǎn)：

轉(zhuǎn)換值如果有toJSON()方法，該方法定義什么值將被序列化。

非數(shù)組對(duì)象的屬性不能保證以特定的順序出現(xiàn)在序列化后的字符串中。

布爾值、數(shù)字、字符串的包裝對(duì)象在序列化過程中會(huì)自動(dòng)轉(zhuǎn)換成對(duì)應(yīng)的原始值。

undefined、任意的函數(shù)以及 symbol 值，在序列化過程中

出現(xiàn)在非數(shù)組對(duì)象的屬性值中時(shí)，會(huì)被忽略（包括屬性名）

出現(xiàn)在數(shù)組中時(shí)，會(huì)被轉(zhuǎn)換成 null（以保證單元位置不變）。

函數(shù)、undefined被多帶帶轉(zhuǎn)換時(shí)，會(huì)返回undefined，如 JSON.stringify(function(){}) or JSON.stringify(undefined).

對(duì)包含循環(huán)引用的對(duì)象（對(duì)象之間相互引用，形成無限循環(huán)）執(zhí)行此方法，會(huì)拋出錯(cuò)誤。

所有以 symbol 為屬性鍵的屬性都會(huì)被完全忽略掉，即便 replacer 參數(shù)中強(qiáng)制指定包含了它們。

Date日期調(diào)用了toJSON()將其轉(zhuǎn)換為了string字符串（同Date.toISOString()），因此會(huì)被當(dāng)做字符串處理。

NaN和Infinity格式的數(shù)值及null都會(huì)被當(dāng)做null。

其他類型的對(duì)象，包括Map/Set/weakMap/weakSet，僅會(huì)序列化可枚舉的屬性。

會(huì)拋棄對(duì)象的 constructor。即 JSON.parse(JSON.stringify(obj))后得到的對(duì)象，不管這個(gè)對(duì)象原來的構(gòu)造函數(shù)是什么，在深拷貝之后都會(huì)變成 Object。

JSON.stringify({});                        // "{}"
JSON.stringify(true);                      // "true"
JSON.stringify("foo");                     // ""foo""
JSON.stringify([1, "false", false]);       // "[1,"false",false]"
JSON.stringify({ x: 5 });                  // "{"x":5}"

JSON.stringify({x: 5, y: 6});              
// "{"x":5,"y":6}"

JSON.stringify([new Number(1), new String("false"), new Boolean(false)]); 
// "[1,"false",false]"

JSON.stringify({x: undefined, y: Object, z: Symbol("")}); 
// "{}"

JSON.stringify([undefined, Object, Symbol("")]);          
// "[null,null,null]" 

JSON.stringify({[Symbol("foo")]: "foo"});                 
// "{}"

JSON.stringify({[Symbol.for("foo")]: "foo"}, [Symbol.for("foo")]);
// "{}"

JSON.stringify(
    {[Symbol.for("foo")]: "foo"}, 
    function (k, v) {
        if (typeof k === "symbol"){
            return "a symbol";
        }
    }
);

// undefined 

// 不可枚舉的屬性默認(rèn)會(huì)被忽略：
JSON.stringify( 
    Object.create(
        null, 
        { 
            x: { value: "x", enumerable: false }, 
            y: { value: "y", enumerable: true } 
        }
    )
);

// "{"y":"y"}"

// 序列化，然后反序列化后丟失 constructor
function Animation (name) { this.name = name; }
var dog = new Animation("小白");
console.log(dog.constructor); // ? Animation (name) { this.name = name; }

var obj = JSON.parse(JSON.stringify(dog));
console.log(obj.constructor); // ? Object() { [native code] }

安全的 json 值

所有安全的 JSON 值都可以使用 JSON.stringify(..) 字符串化。安全的 JSON 值是指能夠呈現(xiàn)為有效 JSON 格式的值。

不安全的 JSON 值：undefined、function、symbol（ES6+）和包含循環(huán)引用的對(duì)象都不符合 JSON 結(jié)構(gòu)標(biāo)準(zhǔn)，支持 JSON 的語(yǔ)言無法處理它們。例如：

JSON.stringify( undefined ); // undefined
JSON.stringify( function(){} ); // undefined
JSON.stringify(
 [1,undefined,function(){},4]
); // "[1,null,null,4]"
JSON.stringify(
 { a:2, b:function(){} }
); // "{"a":2}"

將不安全的 json 轉(zhuǎn)換成安全的 json

方式1：toJSON

如果對(duì)象中定義了 toJSON() 方法，JSON 字符串化時(shí)會(huì)首先調(diào)用該方法，然后用它的返回值來進(jìn)行序列化。

如果要對(duì)含有非法 JSON 值的對(duì)象做字符串化，或者對(duì)象中的某些值無法被序列化時(shí)，就需要定義 toJSON() 方法來返回一個(gè)安全的 JSON 值。例如：

var o = { };
var a = {
 b: 42,
 c: o,
 d: function(){}
};

// 在a中創(chuàng)建一個(gè)循環(huán)引用
o.e = a;
// 循環(huán)引用在這里會(huì)產(chǎn)生錯(cuò)誤
// JSON.stringify( a );

// 自定義的JSON序列化
a.toJSON = function() {
 // 序列化僅包含b
 return { b: this.b };
};
JSON.stringify( a ); // "{"b":42}"

toJSON() 應(yīng)該“返回一個(gè)能夠被字符串化的安全的 JSON 值”，而不是“返回一個(gè) JSON 字符串”。

方式2：向 JSON.stringify(..) 傳遞一個(gè)可選參數(shù) replacer

可選參數(shù) replacer，可以是數(shù)組或者函數(shù)，用來指定對(duì)象序列化過程中哪些屬性應(yīng)該被處理，哪些應(yīng)該被排除，和 toJSON() 很像。

如果 replacer 是一個(gè)數(shù)組，那么它必須是一個(gè)字符串?dāng)?shù)組，其中包含序列化要處理的對(duì)象
的屬性名稱，除此之外其他的屬性則被忽略。

作為函數(shù)，它有兩個(gè)參數(shù)，鍵(key)值(value)都會(huì)被序列化。

如果返回一個(gè) Number, 轉(zhuǎn)換成相應(yīng)的字符串被添加入JSON字符串。

如果返回一個(gè) String, 該字符串作為屬性值被添加入JSON。

如果返回一個(gè) Boolean, "true" 或者 "false"被作為屬性值被添加入JSON字符串。

如果返回任何其他對(duì)象，該對(duì)象遞歸地序列化成JSON字符串，對(duì)每個(gè)屬性調(diào)用replacer方法。除非該對(duì)象是一個(gè)函數(shù)，這種情況將不會(huì)被序列化成JSON字符串。

如果返回undefined，該屬性值不會(huì)在JSON字符串中輸出。

注意: 不能用replacer方法，從數(shù)組中移除值(values)，如若返回undefined或者一個(gè)函數(shù)，將會(huì)被null取代。

所以如果要忽略某個(gè)鍵就返回 undefined，否則返回指定的值。舉例：

var a = {
 b: 42,
 c: "42",
 d: [1,2,3]
};
JSON.stringify( a, ["b","c"] ); // "{"b":42,"c":"42"}"
JSON.stringify( a, function(k,v){
 if (k !== "c") return v;
} ); // "{"b":42,"d":[1,2,3]}"

var foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};


function replacer(key, value) {
  if (typeof value === "string") {
    return undefined;
  }
  return value;
}
// 函數(shù)
var jsonString = JSON.stringify(foo, replacer); // {"week":45,"month":7}

// 數(shù)組
JSON.stringify(foo, ["week", "month"]);  
// "{"week":45,"month":7}", 只保留“week”和“month”屬性值。

方式3：利用一些工具（比如JSON-js），主要處理循環(huán)引用問題?？蓞⒖?

JSON-js解決對(duì)象循環(huán)引用問題

decycle和retrocycle實(shí)現(xiàn)

JSON-js是老外寫的一個(gè)對(duì)JSON處理的小工具，其中的decycle和retrocycle是專門用來破除/恢復(fù)這種循環(huán)結(jié)構(gòu)的?；居梅ㄈ缦拢?/p>

let a={name:"aaa",link:""}
let b={name:"bbb",link:""}
a.link=b;
b.link=a;
/*decycle*/
JSON.stringify(JSON.decycle(a));
/*結(jié)果*/
"{"name":"aaa","link":{"name":"bbb","link":{"$ref":"$"}}}"

可以看到，破解循環(huán)后確實(shí)沒有報(bào)錯(cuò)，但是出現(xiàn)了$ref:"$"這樣的代碼，這種標(biāo)志表示識(shí)別除了循環(huán)引用，其中$ref為固定的，右邊的"$..."表示它循環(huán)引用的部分，單個(gè)$為頂層對(duì)象。

美化序列化后的字符串

JSON.string 還有一個(gè)可選參數(shù) space，用來指定輸出的縮進(jìn)格式。

正整數(shù)時(shí),是指定每一級(jí)縮進(jìn)的字符數(shù)，最多10個(gè)空格

字符串時(shí)，是最前面的十個(gè)字符被用于每一級(jí)的縮進(jìn)：

var a = {
    b: 42,
    c: "42",
    d: [1,2,3]
};

// 數(shù)字
JSON.stringify( a, null, 3 );
/*
"{
   "b": 42,
   "c": "42",
   "d": [
      1,
      2,
      3
   ]
}"
*/

// 字符串
JSON.stringify( a, null, "-----" );
/*
"{
-----"b": 42,
-----"c": "42",
-----"d": [
----------1,
----------2,
----------3
-----]
}"
*/

反序列化：JSON.parse(..)

參考MDN

語(yǔ)法：

JSON.parse(text[, reviver])

參數(shù)：

text：要被解析成JavaScript值的字符串。

reviver（可選）：轉(zhuǎn)換器, 如果傳入該參數(shù)(函數(shù))，可以用來修改解析生成的原始值，調(diào)用時(shí)機(jī)在parse函數(shù)返回之前。

返回值：Object類型, 對(duì)應(yīng)給定JSON文本的對(duì)象/值

reviver 參數(shù)和 JSON.stringify 的第二個(gè)參數(shù) replacer，原理差不多。具體為：

解析值本身以及它所包含的所有屬性，會(huì)按照一定的順序（從最最里層的屬性開始，一級(jí)級(jí)往外，最終到達(dá)頂層，也就是解析值本身）分別的去調(diào)用 reviver 函數(shù)，在調(diào)用過程中，當(dāng)前屬性所屬的對(duì)象會(huì)作為 this 值，當(dāng)前屬性名和屬性值會(huì)分別作為第一個(gè)和第二個(gè)參數(shù)傳入 reviver 中。

如果 reviver 返回 undefined，則當(dāng)前屬性會(huì)從所屬對(duì)象中刪除，如果返回了其他值，則返回的值會(huì)成為當(dāng)前屬性新的屬性值。

當(dāng)遍歷到最頂層的值時(shí)，傳入 reviver 函數(shù)的參數(shù)會(huì)是空字符串 ""（因?yàn)榇藭r(shí)已經(jīng)沒有真正的屬性）和當(dāng)前的解析值（有可能已經(jīng)被修改過了），當(dāng)前的 this 值會(huì)是 {"": 修改過的解析值}，在編寫 reviver 函數(shù)時(shí)，要注意到這個(gè)特例。

函數(shù)的遍歷順序依照：從最內(nèi)層開始，按照層級(jí)順序，依次向外遍歷

舉例

JSON.parse("{"p": 5}", function (k, v) {
    if(k === "") return v; // 如果到了最頂層，則直接返回屬性值，
    return v * 2; // 否則將屬性值變?yōu)樵瓉淼?2 倍。
}); // { p: 10 }

JSON.parse("{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}", function (k, v) {
    console.log(k); // 輸出當(dāng)前的屬性名，從而得知遍歷順序是從內(nèi)向外的，
                    // 最后一個(gè)屬性名會(huì)是個(gè)空字符串。
    return v; // 返回原始屬性值，相當(dāng)于沒有傳遞 reviver 參數(shù)。
}); // 1 2 4 6 5 3 ""

注意：不允許用逗號(hào)作為結(jié)尾

// both will throw a SyntaxError
JSON.parse("[1, 2, 3, 4, ]");
JSON.parse("{"foo" : 1, }");

原生 js 實(shí)現(xiàn)

var myJson = {
  parse: function (jsonStr) {
    return (new Function("return " + jsonStr))();
  },
  stringify: function (jsonObj) {
    var result = "",
      curVal;
    if (jsonObj === null) {
      return String(jsonObj);
    }
    switch (typeof jsonObj) {
      case "number":
      case "boolean":
        return String(jsonObj);
      case "string":
        return """ + jsonObj + """;
      case "undefined":
      case "function":
        return undefined;
    }

    switch (Object.prototype.toString.call(jsonObj)) {
      case "[object Array]":
        result += "[";
        for (var i = 0, len = jsonObj.length; i < len; i++) {
          curVal = JSON.stringify(jsonObj[i]);
          result += (curVal === undefined ? null : curVal) + ",";
        }
        if (result !== "[") {
          result = result.slice(0, -1);
        }
        result += "]";
        return result;
      case "[object Date]":
        return """ + (jsonObj.toJSON ? jsonObj.toJSON() : jsonObj.toString()) + """;
      case "[object RegExp]":
        return "{}";
      case "[object Object]":
        result += "{";
        for (i in jsonObj) {
          if (jsonObj.hasOwnProperty(i)) {
            curVal = JSON.stringify(jsonObj[i]);
            if (curVal !== undefined) {
              result += """ + i + "":" + curVal + ",";
            }
          }
        }
        if (result !== "{") {
          result = result.slice(0, -1);
        }
        result += "}";
        return result;

      case "[object String]":
        return """ + jsonObj.toString() + """;
      case "[object Number]":
      case "[object Boolean]":
        return jsonObj.toString();
    }
  }
};

說明：JSON.parse() 在這里是利用 new Function() 擁有字符串參數(shù)特性，即能動(dòng)態(tài)編譯 js 代碼的能力?？蓞⒖忌衿娴膃val()與new Function()

JSON.parse() 其他方式實(shí)現(xiàn)：

利用 eval() 實(shí)現(xiàn)，盡量避免在不必要的情況下使用。 eval() "惡名昭彰"，擁有執(zhí)行代碼的能力（可能被惡意使用，帶來安全問題），除此之外，不能利用預(yù)編譯的優(yōu)勢(shì)進(jìn)行性能優(yōu)化，會(huì)比較慢。

var json = eval("(" + jsonStr + ")");

還有其他方式，比如遞歸，可參考：JSON.parse 三種實(shí)現(xiàn)方式

言盡于此，當(dāng)然，不止于此（你懂得）。歡迎大家來補(bǔ)充~

云服務(wù)器 GPU云服務(wù)器深入理解系列深入理解linux 深入理解webrtc 深入理解python

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/105642.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

eechen

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

五、C++11新特性: 指針空值--nullptr及nullptr_t

閱讀 1657·2021-11-16 11:45
美國(guó)高防服務(wù)器怎么樣?美國(guó)高防服務(wù)器的注意事項(xiàng)

閱讀 2588·2021-09-29 09:48
Gcore(gcorelabs)阿什本(弗吉尼亞州)VPS簡(jiǎn)單測(cè)試

閱讀 3453·2021-09-07 10:26
搬瓦工，DC3機(jī)房CN2 VPS匯總，免費(fèi)自動(dòng)備份+快照，G口帶寬

閱讀 1877·2021-08-16 10:50
純css3漂亮的checkbox和radio美化效果插件Pretty.css插件

閱讀 1954·2019-08-30 15:44
CSS學(xué)習(xí)筆記(八) 頁(yè)面布局之三欄-固定寬度布局

閱讀 2727·2019-08-28 18:03
MyBatis插件使用--通用Mapper

閱讀 1926·2019-08-27 10:54
如何讓你的 GitHub 項(xiàng)目表面上更專業(yè)

閱讀 1857·2019-08-26 14:01

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

JSON.stringify() 的深入理解

相關(guān)文章

js中的淺拷貝深拷貝深入理解

JavaScript深入理解對(duì)象方法——Object.assign()

***JSON：如果你愿意一層一層剝開我的心，你會(huì)發(fā)現(xiàn)...這里水很深——深入理解JSON***

深入理解JS深淺拷貝

深入理解 Javascript 之 JS的深淺拷貝

發(fā)表評(píng)論

0條評(píng)論

eechen

男|高級(jí)講師

TA的文章

五、C++11新特性: 指針空值--nullptr及nullptr_t

美國(guó)高防服務(wù)器怎么樣?美國(guó)高防服務(wù)器的注意事項(xiàng)

Gcore(gcorelabs)阿什本(弗吉尼亞州)VPS簡(jiǎn)單測(cè)試

搬瓦工，DC3機(jī)房CN2 VPS匯總，免費(fèi)自動(dòng)備份+快照，G口帶寬

純css3漂亮的checkbox和radio美化效果插件Pretty.css插件

CSS學(xué)習(xí)筆記(八) 頁(yè)面布局之三欄-固定寬度布局

MyBatis插件使用--通用Mapper

如何讓你的 GitHub 項(xiàng)目表面上更專業(yè)

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

JSON.stringify() 的深入理解

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！