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

程式碼寫著寫著就懂了發表於2018-11-10
JSON
有意思的JSON.parse（）、JSON.stringify（）

前言

現在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"]"複製程式碼

注意⚠️：

  1. undefined 值、函式或者XML值會被忽略
  2. 如果你的陣列當中含有 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') // trueJSON.parse('"foo"') // "foo"JSON.parse('[1, 5, "false"]') // [1, 5, "false"]JSON.parse('null') // nullvar 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 // 11o.b // undefined複製程式碼

收。。。

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

來源：https://juejin.im/post/5be5b9f8518825512f58ba0e

相關文章