json 在 js 中的轉換問題

白忙之中記錄並分享下這個問題。

 

最近喜歡把接口的返回值，封裝成json字符串；

優點很明顯，尤其方便對接口的返回值做調整和修改。
先說問題吧：

ajax請求成功后返回一個json字符串如下：

{xdata:["經濟發展","名生保障","生態環保","平安建設","脫貧攻堅","其他"],ydata:[24,15,15,5,0,0],zdata:[0,2,0,0,1,0]}

 

可看出並不是一個標准的json字符串，於是我就用了JSON.stringify() 轉了下， 原以為已經是一個標准的json字符串了；

然后開始調用JSON.parse打算轉為json對象。

發現沒有並沒有成功，還是一個字符串（未截圖）

但是我調用 eval(" ( " + data + " ) " ); 就輕松的轉成功了。

 

原因：

key 沒問題，但是value 是數組，JSON.stringify()並沒有辦法識別這種類型。所以作為原值返回了。

就像這樣。 

而eval就不一樣了，他是通過js的方式來識別並轉換的，他可以識別這種類型，也就輕松的轉成功了；

現在明白為什么不推薦用eval 了，因為他識別的並不是標准的json字符串，可能有其他稀奇古怪的類型，但是最后都給你轉成了json對象。

但是又不能調用。

 

 

 

 

※以下是總結的三個函數的介紹以及用法。

JSON.stringify 

JSON.parse

還有一個eval() 函數

 

概述：

JSON.stringify  智能化的將不規范的js對象，或者json字符串，轉為標准的json字符串

 

JSON.parse  將標准json字符串，轉為 jsonObject 對象。

 

一

1  JSON.stringify智能化的體現

• 鍵名不是雙引號的（包括沒有引號或者是單引號），會自動變成雙引號；字符串是單引號的，會自動變成雙引號
• 最后一個屬性后面有逗號的，會被自動去掉
• 非數組對象的屬性不能保證以特定的順序出現在序列化后的字符串中
  這個好理解，也就是對非數組對象在最終字符串中不保證屬性順序和原來一致
• 布爾值、數字、字符串的包裝對象在序列化過程中會自動轉換成對應的原始值
  也就是你的什么 new String("bala") 會變成 "bala" ， new Number(2017) 會變成 2017
• undefined、任意的函數（其實有個函數會發生神奇的事，后面會說）以及 symbol 值（symbol詳見ES6對symbol的介紹）
  • 出現在非數組對象的屬性值中：在序列化過程中會被忽略
  • 出現在數組中時：被轉換成 null

JSON.stringify({x: undefined, y: function(){return 1;}, z: Symbol("")});
//出現在非數組對象的屬性值中被忽略："{}"
JSON.stringify([undefined, Object, Symbol("")]);
//出現在數組對象的屬性值中，變成null："[null,null,null]"

 

• NaN、Infinity和-Infinity，不論在數組還是非數組的對象中，都被轉化為null
• 所有以 symbol 為屬性鍵的屬性都會被完全忽略掉，即便 replacer 參數中強制指定包含了它們
• 不可枚舉的屬性會被忽略

2、

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

其實他有三個參數。

一般只傳入第一個參數、Json格式的js對象或者js數組。

• 第二個參數可以是一個函數或者一個數組

• 第二項是函數的時候，格式是這樣的，function(key,value){

},對第一個參數中的每一項 都進行處理。並且每一項都要有返回值，否則會報undefined錯

當第一個參數為jsonObject 時，會傳入key與value，邏輯處理后返回key，處理過的value；

 

當第一個參數為jsonArray時，也會傳入key+value，那么key就是數組的索引，value就是該數據項。

當第二個參數為數組時，相當於篩選功能。

• 第一個參數為jsonObject時

只有在數組中出現的屬性才會被序列化進結果字符串key+value，

而這個數組中存在但是源JS對象中不存在的屬性會被忽略，不會報錯

•  第一個參數為jsonArray時

 方法失效？？

 

第三個參數，有雞肋的感覺：指定縮進用的填充字符。截圖說明

 

 

JSON.parse 是將標准的json字符串轉為json對象。

值得注意的是，他有第二個可選參數。

可能你已經發現了端倪，他是"有內而外"的處理。

 

eval() 函數比較特殊，特殊點在於，沒怎么看明白官網里面的定義介紹。

我的理解是：可以用js的語法來解析成json對象。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style="display: none;">