有意思的JSON.parse（）、JSON.stringify（）

程式碼寫著寫著就懂了發表於2018-11-10

前言

現在JSON格式在web開發中非常重要，特別是在使用ajax開發專案的過程中，經常需要將後端響應的JSON格式的字串返回到前端，前端解析成JS物件值（JSON 物件），再對頁面進行渲染。在資料傳輸過程中，JSON是以文字，即字串的形式傳遞的，而JS操作的是JSON物件，所以，JSON物件和JSON字串之間的相互轉換是關鍵。

1.JSON格式

簡單說一下JSON格式,JSON格式就是一種表示一系列的“值”的方法，這些值包含在陣列或物件之中，是它們的成員。

對於這一系列的“值”，有如下幾點格式規定：

陣列或物件的每個成員的值，可以是簡單值，也可以是複合值。
簡單值分為四種：字串、數值（必須以十進位制表示）、布林值和null（NaN, Infinity, -Infinity和undefined都會被轉為null）。
複合值分為兩種：符合JSON格式的物件和符合JSON格式的陣列。
陣列或物件最後一個成員的後面，不能加逗號。
陣列或物件之中的字串必須使用雙引號，不能使用單引號。
物件的成員名稱必須使用雙引號。

以下是合格的JSON值:

["one", "two", "three"]

{ "one": 1, "two": 2, "three": 3 }

{"names": ["張三", "李四"] }

[ { "name": "張三"}, {"name": "李四"} ]

複製程式碼

以下是不合格的 JSON 值：

{ name: "張三", 'age': 32 }  // 屬性名必須使用雙引號

[32, 64, 128, 0xFFF] // 不能使用十六進位制值

{ "name": "張三", age: undefined } // 不能使用undefined

{ "name": "張三",
  "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
  "getName": function() {
      return this.name;
  }
} // 不能使用函式和日期物件

複製程式碼

注意⚠️：

空陣列和空物件都是合格的JSON值，null本身也是一個合格的JSON值。

2. 解析JSON

所有現代瀏覽器都支援 JSON物件，有兩個非常有用的方法來處理 JSON 格式的內容：

JSON.parse(string) ：接受一個 JSON 字串並將其轉換成一個 JavaScript 物件。 JSON.stringify(obj) ：接受一個 JavaScript 物件並將其轉換為一個 JSON 字串。

2.1 JSON.stringify()

在寫JavaScript的時候，我們用JSON.stringify將某個值序列化為一個字串值來表示一個物件。

小栗子：

JSON.stringify({
    name: "Samara",
    country: "Jimbabwe"
});
// 輸出結果:  "{"name":"Samara","country":"Jimbabwe"}"

JSON.stringify("Oh look, a string!");
// 輸出結果： ""Oh look, a string!""

JSON.stringify([1,2,"open","the","door"]);
// 輸出結果： "[1,2,"open","the","door"]"

複製程式碼

注意⚠️：

undefined 值、函式或者XML值會被忽略

如果你的陣列當中含有 undefined值，函式或XML值，該陣列中的這些值將會被當成 null

再舉一個栗子：

JSON.stringify({
    doStuff: function() { },
    doThings: [ function() {}, undefined ]
});
// 輸出結果:  "{"doThings":[null,null]}"
複製程式碼

分析：

上面程式碼中，原始物件的doStuff屬性是一個函式，JSON.stringify方法返回的字串會將這個屬性省略。而doThings屬性是一個陣列，成員分別為函式和undefined，它們都被轉成了null。

正則物件會被轉成空物件。

JSON.stringify(/foo/) // "{}"
複製程式碼

2.1.1 JSON.stringify 方法會忽略物件的不可遍歷屬性

var obj = {};
Object.defineProperties(obj, {
  'foo': {
    value: 1,
    enumerable: true
  },
  'bar': {
    value: 2,
    enumerable: false
  }
});

JSON.stringify(obj); // {"foo":1}
複製程式碼

分析： 當物件的屬性設定成不可遍歷，使用JSON.stringify處理該物件時會忽略掉這部分屬性。上面程式碼中，bar是obj物件的不可遍歷屬性，JSON.stringify方法會忽略這個屬性。

2.1.2 JSON.stringify 方法的第二個引數

1. `JSON.stringify`方法還可以接受一個陣列引數，指定需要轉成字串的屬性。

JSON.stringify({ a:1, b:2 }, ['a'])
// '{"a":1}'
複製程式碼

分析：

上面程式碼中，JSON.stringify方法的第二個引數指定，只轉a屬性。

2. JSON.stringify 方法還可以接受一個函式作為引數，用來更改預設的字串化的行為。

function f(key, value) {
  if (typeof value === "number") {
    value = 2 * value;
  }
  return value;
}

JSON.stringify({ a:1, b:2 }, f)
// '{"a":2,"b":4}'
複製程式碼

上面程式碼中的f函式，接受兩個引數，分別是被轉化物件的鍵和值。

如果一個鍵的值是數值，就將它乘以2，否則就原樣返回。

如果是多級巢狀的物件它會怎麼處理呢？

要點一 ：其實這個處理函式是遞迴處理所有的鍵。

接下來看一個比較有意思的栗子：

var o = {a: {b:1}};

function f(key, value) {
  console.log("["+ key +"]:" + value);
  return value;
}

JSON.stringify(o, f)
// []:[object Object] 
// [a]:[object Object]
// [b]:1
// '{"a":{"b":1}}'

複製程式碼

分析：

上面的程式碼中，物件 o 一共會被 f 函式處理三次。第一次鍵名為空，鍵值是整個物件o；第二次鍵名為a，鍵值是{b:1}；第三次鍵名為b，鍵值為1。

要點二：遞迴處理中，每一次處理的物件，都是前一次返回的值。

var o = {a: 1};

function f(key, value){
  if (typeof value === "object"){
    return {b: 2};
  }
  return value*2;
}

JSON.stringify(o,f)
// '{"b":4}'
複製程式碼

上面程式碼中，f 函式修改了物件o,接著 JSON.stringify方法就遞迴處理修改後的物件o。

要點三： 如果處理函式返回undefined或沒有返回值，則該屬性會被忽略。

function f(key, value) {
  if (typeof(value) == "string") {
    return undefined;
  }
  return value;
}

JSON.stringify({ a:"abc", b:123 }, f)
// '{"b":123}'
複製程式碼

分析：

上面程式碼中，a屬性經過處理後，返回undefined，於是該屬性被忽略了。

2.1.3 JSON.stringify 方法的第三個引數

JSON.stringify還可以接受第三個引數，用於增加返回的JSON字串的可讀性。

如果是數字，表示每個屬性前面新增的空格（最多不超過10個）；如果是字串（不超過10個字元），則該字串會新增在每行前面。

（1）當第三個引數為數字的時候

下面的案例是當第三個引數為數字的時候：

// 這是一段應用程式中的除錯標記日誌
var person = {
    name: "Jim Cowart",
    location: {
        city: {
            name: "Chattanooga",
            population: 167674
        },
        state: {
            name: "Tennessee",
            abbreviation: "TN",
            population: 6403000
        }
    },
    company: "appendTo"
};

JSON.stringify(person)

// 我們得到的資料
'{"name":"Jim Cowart","location":{"city":{"name":"Chattanooga","population":167674},"state":{"name":"Tennessee","abbreviation":"TN","population":6403000}},"company":"appendTo"}'

// 我們期望的格式
"{
    "name": "Jim Cowart",
    "location": {
        "city": {
            "name": "Chattanooga",
            "population": 167674
        },
        "state": {
            "name": "Tennessee",
            "abbreviation": "TN",
            "population": 6403000
        }
    },
    "company": "appendTo"
}"
複製程式碼

如果我們得到一段資料但是它的可讀性不是很好，我們期望它變成我們想要的可讀性更棒的格式，這個時候就運用到了JSON.stringify的第三個引數了。

var person = {
    name: "Jim Cowart",
    location: {
        city: {
            name: "Chattanooga",
            population: 167674
        },
        state: {
            name: "Tennessee",
            abbreviation: "TN",
            population: 6403000
        }
    },
    company: "appendTo"
};
//如果你希望縮排量為2 個空格，
// 你可以這麼幹：
JSON.stringify(person, null, 2);
/* produces:
"{
  "name": "Jim Cowart",
  "location": {
    "city": {
      "name": "Chattanooga",
      "population": 167674
    },
    "state": {
      "name": "Tennessee",
      "abbreviation": "TN",
      "population": 6403000
    }
  },
  "company": "appendTo"
}"
*/
// 如果你希望使用 tab 縮排，那麼
// 你可以傳入 \t 作為第三個引數
// 以此來告別空格縮排
JSON.stringify(person, null, "\t");
/*輸出結果:
"{
    "name": "Jim Cowart",
    "location": {
        "city": {
            "name": "Chattanooga",
            "population": 167674
        },
        "state": {
            "name": "Tennessee",
            "abbreviation": "TN",
            "population": 6403000
        }
    },
    "company": "appendTo"
}"
*/
複製程式碼

分析：我們看到它的第二個引數我們傳的null,上面已經說過了第二個引數可以為陣列也可以為函式。

如果第二個引數是一個陣列，它將只輸出你在該陣列中所想要包含的keys。

// 假定 person物件是上一例子中的那個，
JSON.stringify(person, ["name", "company"], 4);
/* 輸出結果:
"{
    "name": "Jim Cowart",
    "company": "appendTo"
}"
*/

複製程式碼

如果第二個引數是函式，那麼這個函式需要有兩個引數：key 和 value ：

// a bit contrived, but it shows what's possible
// FYI - 被序列化的值是第一個傳給replacerFn的東西, 也即是這個物件的每一個key，因此需要檢查key的真假。
var replacerFn = function(key, value) {
    if(!key || key === 'name' || key === 'company') {
        return value;
    }
    return; //返回 undefined 並忽略 
}
JSON.stringify(person, replacerFn, 4);
/* produces:
"{
    "name": "Jim Cowart",
    "company": "appendTo"
}"
*/
複製程式碼

（2）當第三個引數為字串的時候

那麼還有一種情況是第三個引數是字串的時候：

JSON.stringify({ p1:1, p2:2 }, null, "|-");
// "{
|-"p1": 1,
|-"p2": 2
}"

複製程式碼

2.1.4 JSON.stringify 方法處理的物件，包含一個 toJSON 方法

如果JSON.stringify方法處理的物件，包含一個toJSON方法，則它會使用這個方法得到一個值，然後再將這個值轉成字串，而忽略其他成員。

JSON.stringify({
  toJSON: function() {
    return "Cool"
  }
})
// "Cool""

var o = {
  foo: 'foo',
  toJSON: function() {
    return 'bar';
  }
};
var json = JSON.stringify({x: o}); 
// '{"x":"bar"}'

複製程式碼

Date物件就部署了一個自己的toJSON方法。

JSON.stringify(new Date("2011-07-29"))
// "2011-07-29T00:00:00.000Z"

複製程式碼

toJSON方法的一個應用是，可以將正則物件自動轉為字串。

RegExp.prototype.toJSON = RegExp.prototype.toString;

JSON.stringify(/foo/)
// "/foo/"

複製程式碼

分析：上面程式碼，在正則物件的原型上面部署了toJSON方法，將其指向toString方法，因此遇到轉換成JSON時，就正則物件就先呼叫toJSON方法轉為字串，然後再被JSON.stingify方法處理。

2.2 JSON.parse()

JSON.parse方法用於將JSON字串轉化成物件。

JSON.parse('{}') // {}
JSON.parse('true') // true
JSON.parse('"foo"') // "foo"
JSON.parse('[1, 5, "false"]') // [1, 5, "false"]
JSON.parse('null') // null

var o = JSON.parse('{"name":"張三"}');
o.name // 張三

複製程式碼

如果傳入的字串不是有效的JSON格式，JSON.parse方法將報錯。

JSON.parse("'String'") // illegal single quotes
// SyntaxError: Unexpected token ILLEGAL

複製程式碼

上面程式碼中，雙引號字串中是一個單引號字串，因為單引號字串不符合JSON格式，所以報錯。

為了處理解析錯誤，可以將JSON.parse方法放在try...catch程式碼塊中。

2.2.1 JSON.parse()的第二個引數

JSON.parse方法可以接受一個處理函式，用法與JSON.stringify方法類似。

function f(key, value) {
  if ( key === ""){
      return value;
  }
  if ( key === "a" ) {
    return value + 10;
  }
}

var o = JSON.parse('{"a":1,"b":2}', f);
o.a // 11
o.b // undefined
複製程式碼

收。。。

看完是不是覺得我們還可以用這兩個方法做很多事情呢？

JSON.parse與JSON.stringify(object)
2019-01-28
JSONObject
JSON.parse 和 JSON.stringify 詳解
2021-12-31
JSON
JSON.parse()與JSON.stringify()的用法，以及eval()和new Function
2019-02-16
JSONFunction
JavaScript 中 structuredClone 和 JSON.parse(JSON.stringify()) 克隆物件的區別
2024-09-06
JavaScriptStructJSON物件
JSON.stringify()與JSON.parse()沒有你想的那樣簡單
2023-04-17
JSON
JSON.stringify 的使用
2020-10-08
JSON
JSON.parse()方法
2018-07-28
JSON
JSON.parse() 方法
2019-07-13
JSON
如何提升JSON.stringify()的效能？
2019-06-12
JSON
JSON.stringify() 的深入理解
2019-07-14
JSON
如何提升JSON.stringify的效能？
2024-12-05
JSON
JSON.stringify() 方法
2019-07-12
JSON
JSON.parse () 的非嚴格模式
2020-04-20
JSON模式
你不知道的 JSON.stringify
2021-12-28
JSON
實現深拷貝還在用JSON.parse(JSON.stringify(obj))？帶你用JS實現一個完整版深拷貝函式
2022-04-10
JSONOBJ函式
學習JSON.stringify()
2021-08-06
JSON
JSON.parse 新手入門
2018-03-29
JSON
你不知道的JSON.stringify()妙用
2019-02-16
JSON
前端 JavaScript 中 JSON.stringify() 的基本用法
2021-06-29
前端JavaScriptJSON
JSON.stringify 新手入門
2018-03-29
JSON
有意思、有趣的文字
2024-09-09
JSON.parse()出錯解決
2018-08-07
JSON
JavaScript的高精度計算與JSON.parse的BIGINT
2018-05-10
JavaScriptJSON
理解JSON.stringify()高階用法
2018-10-16
JSON
非常有意思的Flowlet
2018-05-12
有意思的clip-path
2019-02-21
如何實現一個JSON.parse
2018-08-29
JSON
兩個有意思的專案
2024-07-13
當JSON.parse“遇上”非鍵值對
2019-03-03
JSON
比 JSON.stringify 快兩倍的fast-json-stringify
2022-12-05
JSONAST
前端非常有意思的小技巧
2019-03-28
前端
有意思、好用的免費API分享
2023-12-25
API
分享一個有意思的錯誤
2021-07-19
MYSQL 主鍵的那些 “有意思” 故事
2023-02-08
MySql
有意思！強大的 SVG 濾鏡
2021-03-25
SVG
免費有意思的好用API推薦
2023-12-19
API
分享幾個有意思的陣列方法
2019-08-02
陣列
一份很有意思的 GC log
2019-02-01
GC