2. 程式人生 > >JSON.parse() 和 JSON.stringify()的簡單介紹

JSON.parse() 和 JSON.stringify()的簡單介紹

阿新 • • 發佈：2018-11-14
文本 原來 local 也不能 將不 一次 json格式 iter ati

參考地址:

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

最近一段時間在測試前端頁面的時候, 需要對後臺數據進行處理, 後臺返回的數據基本都是json格式, 這裏就要用到 JSON.parse() 和 JSON.stringify()兩種方式處理.

1. JSON.parse() 方法用來解析JSON字符串，構造由字符串描述的JavaScript值或對象。提供可選的reviver函數用以在返回之前對所得到的對象執行變換(操作)。

2. JSON.stringify() 方法是將一個JavaScript值(對象或者數組)轉換為一個 JSON字符串，如果指定了replacer是一個函數，則可以替換值，或者如果指定了replacer是一個數組，可選的僅包括指定的屬性。

1. JSON.parse

語法

JSON.parse(text[, reviver])

參數

text

要被解析成JavaScript值的字符串，查看

JSON

對象學習的JSON 語法的說明。

reviver

可選,

如果是一個函數，則規定了原始值如何被解析改造，在被返回之前。

返回值

Object對應給定的JSON文本。

異常

若被解析的 JSON 字符串是非法的，則會拋出 一個語法錯誤

異常。

下面是測試實例:

var json = ‘{"result":true, "count":42}‘;
obj = JSON.parse(json);

console.log(obj.count);
// expected output: 42

console.log(obj.result);
// expected output: true

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

如果指定了 reviver 函數，則解析出的 JavaScript 值（解析值）會經過一次轉換後才將被最終返回（返回值）。更具體點講就是：解析值本身以及它所包含的所有屬性，會按照一定的順序（從最最裏層的屬性開始，一級級往外，最終到達頂層，也就是解析值本身）分別的去調用 reviver 函數，在調用過程中，當前屬性所屬的對象會作為 this 值，當前屬性名和屬性值會分別作為第一個和第二個參數傳入 reviver 中。如果 reviver 返回 undefined，則當前屬性會從所屬對象中刪除，如果返回了其他值，則返回的值會成為當前屬性新的屬性值。

當遍歷到最頂層的值（解析值）時，傳入 reviver 函數的參數會是空字符串 ""（因為此時已經沒有真正的屬性）和當前的解析值（有可能已經被修改過了），當前的 this 值會是 {"": 修改過的解析值}，在編寫 reviver 函數時，要註意到這個特例。（這個函數的遍歷順序依照：從最內層開始，按照層級順序，依次向外遍歷）

JSON.parse(‘{"p": 5}‘, function (k, v) {
    if(k === ‘‘) return v;     // 如果到了最頂層，則直接返回屬性值，
    return v * 2;              // 否則將屬性值變為原來的 2 倍。
});                            // { p: 10 }

技術分享圖片
可以看出5和3對應的是object

JSON.parse() 不允許用逗號作為結尾

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

2. JSON.stringify()

語法

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

參數

value
將要序列化成 一個JSON 字符串的值。
replacer 可選
如果該參數是一個函數，則在序列化過程中，被序列化的值的每個屬性都會經過該函數的轉換和處理；如果該參數是一個數組，則只有包含在這個數組中的屬性名才會被序列化到最終的 JSON 字符串中；如果該參數為null或者未提供，則對象所有的屬性都會被序列化；關於該參數更詳細的解釋和示例，請參考使用原生的 JSON 對象一文。
space 可選
指定縮進用的空白字符串，用於美化輸出（pretty-print）；如果參數是個數字，它代表有多少的空格；上限為10。該值若小於1，則意味著沒有空格；如果該參數為字符串(字符串的前十個字母)，該字符串將被作為空格；如果該參數沒有提供（或者為null）將沒有空格。

返回值

一個表示給定值的JSON字符串。

關於序列化，有下面五點註意事項：

  • 非數組對象的屬性不能保證以特定的順序出現在序列化後的字符串中。
  • 布爾值、數字、字符串的包裝對象在序列化過程中會自動轉換成對應的原始值。
  • undefined、任意的函數以及 symbol 值，在序列化過程中會被忽略（出現在非數組對象的屬性值中時）或者被轉換成 null（出現在數組中時）。
  • 對包含循環引用的對象（對象之間相互引用，形成無限循環）執行此方法，會拋出錯誤。
  • 所有以 symbol 為屬性鍵的屬性都會被完全忽略掉，即便 replacer 參數中強制指定包含了它們。
  • 不可枚舉的屬性會被忽略
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 

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

replacer參數

replacer參數可以是一個函數或者一個數組。作為函數，它有兩個參數，鍵(key)值(value)都會被序列化。

  • 如果返回一個 Number, 轉換成相應的字符串被添加入JSON字符串。
  • 如果返回一個 String, 該字符串作為屬性值被添加入JSON。
  • 如果返回一個 Boolean, "true" 或者 "false"被作為屬性值被添加入JSON字符串。
  • 如果返回任何其他對象，該對象遞歸地序列化成JSON字符串，對每個屬性調用replacer方法。除非該對象是一個函數，這種情況將不會被序列化成JSON字符串。
  • 如果返回undefined，該屬性值不會在JSON字符串中輸出。

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

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

var foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};
var jsonString = JSON.stringify(foo, replacer);
JSON序列化結果為 {"week":45,"month":7}.

如果replacer是一個數組，數組的值代表將被序列化成JSON字符串的屬性名。

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

space 參數

space 參數用來控制結果字符串裏面的間距。

如果是一個數字, 則在字符串化時每一級別會比上一級別縮進多這個數字值的空格（最多10個空格）；

如果是一個字符串，則每一級別會比上一級別多縮進用該字符串（或該字符串的前十個字符）。

JSON.stringify({a:2}, null, " ");   // ‘{\n "a": 2\n}‘


使用制表符（\t）來縮進：
JSON.stringify({uno:1,dos:2}, null, ‘\t‘)
// ‘{            \
//     "uno": 1, \
//     "dos": 2  \
// }‘

toJSON 方法

如果一個被序列化的對象擁有 toJSON 方法，那麽該 toJSON 方法就會覆蓋該對象默認的序列化行為：不是那個對象被序列化，而是調用 toJSON 方法後的返回值會被序列化，例如：

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

JSON.stringify用作 JavaScript

註意JSON不是javascript嚴格意義上的子集，在JSON中不需要省略兩條終線(Line separator和Paragraph separator)但在JavaScript中需要被省略。

因此，如果JSON被用作JSONP時，下面方法可以使用：

function jsFriendlyJSONStringify (s) {
    return JSON.stringify(s).
        replace(/\u2028/g, ‘\\u2028‘).
        replace(/\u2029/g, ‘\\u2029‘);
}

var s = {
    a: String.fromCharCode(0x2028),
    b: String.fromCharCode(0x2029)
};
try {
    eval(‘(‘ + JSON.stringify(s) + ‘)‘);
} catch (e) {
    console.log(e); // "SyntaxError: unterminated string literal"
}

// No need for a catch
eval(‘(‘ + jsFriendlyJSONStringify(s) + ‘)‘);

// console.log in Firefox unescapes the Unicode if
//   logged to console, so we use alert
alert(jsFriendlyJSONStringify(s)); // {"a":"\u2028","b":"\u2029"}

使用 JSON.stringify 結合 localStorage 的例子

一些時候，你想存儲用戶創建的一個對象，並且，即使在瀏覽器被關閉後仍能恢復該對象。

下面的例子是 JSON.stringify 適用於這種情形的一個樣板：

// 創建一個示例數據
var session = {
    ‘screens‘ : [],
    ‘state‘ : true
};
session.screens.push({"name":"screenA", "width":450, "height":250});
session.screens.push({"name":"screenB", "width":650, "height":350});
session.screens.push({"name":"screenC", "width":750, "height":120});
session.screens.push({"name":"screenD", "width":250, "height":60});
session.screens.push({"name":"screenE", "width":390, "height":120});
session.screens.push({"name":"screenF", "width":1240, "height":650});

// 使用 JSON.stringify 轉換為 JSON 字符串
// 然後使用 localStorage 保存在 session 名稱裏
localStorage.setItem(‘session‘, JSON.stringify(session));

// 然後是如何轉換通過 JSON.stringify 生成的字符串，該字符串以 JSON 格式保存在 localStorage 裏
var restoredSession = JSON.parse(localStorage.getItem(‘session‘));

// 現在 restoredSession 包含了保存在 localStorage 裏的對象
console.log(restoredSession);

待續......

JSON.parse() 和 JSON.stringify()的簡單介紹

相關推薦

JSON.parse() 和 JSON.stringify()的簡單介紹

文本 原來 local 也不能 將不 一次 json格式 iter ati 參考地址: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

JSON.parse()和JSON.stringify()使用介紹

parse用於從一個字串中解析出json物件 注意：單引號寫在{}外，每個屬性名都必須用雙引號，否則會丟擲異常。 stringify()用於從一個物件解析出字串 <!DOCTYPE h

JSON.parse()和JSON.stringify()

結果 console str ted pro att name 字符串 tor parse用於從一個字符串中解析出json對象,如 var str = ‘{"name":"huangxiaojian","age":"23"}‘ 結果： JSON.parse(str)

JSON.parse和JSON.stringify 引數詳解

JSON.parse和JSON.stringify這兩個瀏覽器自帶（IE6/7除外）的方法平常我們經常用到，但是一般都只是用到了他們的第一個引數，比如字串轉物件：JSON.parse('{}')   物件轉字串：JSON.stringify({}) 今天特意看了下這

get和post請求用JSON.parse和JSON.stringify取引數

1，JSON.parse將一個 JSON 字串轉換為物件 2，JSON.stringify將物件轉成字串   JSON.parse()【從一個字串中解析出json物件】 例子： //定義一個字串 var data='{"name":"goatling"}' //

(JSON解析)JSON.parse()和JSON.stringify()的區別

話不多說，直接看程式碼 <script> //定義一個字串 var data = '{"name":"hello world"}'; console.log(data); //解析字串 var hello =

將form中的值轉換為鍵值對函式，Json.parse和json.stringify()用法

var utils = {//將form中的值轉換為鍵值對函式 getFormJSON: function(form) { var jsonData = {};

JSON.parse和JSON.stringify轉化失敗的原因

1.所轉化的內容是否為嚴格的json格式： 例如: var text = "{"alpha_list": [NaN, NaN,NaN], "tracking_error_list": [0.0, 0.06, 0.044, 0.115, 0.1, 0.091, 0.091,

JSON物件和字串之間的相互轉換 – JSON.parse() 和 JSON.stringify()

所有現代瀏覽器都支援 JSON 物件，有兩個非常有用的方法來處理 JSON 格式的內容：JSON.parse(string) ：接受一個 JSON 字串並將其轉換成一個 JavaScript 物件。JSON.stringify(obj) ：接受一個 JavaScript 物件

JSON.parse()和JSON.stringify()使用

JSON.parse()和JSON.stringify() JSON.parse()用於從一個字串解析出JSON物件，如： var str = ‘{“name”：“張三”，“age”：“24”

JSON.parse()和JSON.stringify()用法解析

1、parse用於從一個字串中解析出json物件,如 var str = '{"name":"huangxiaojian","age":"23"}' 結果： JSON.parse(str) Object age: "23"name: "huangxiaojian"__

JSON.parse() 與 JSON.stringify() 簡單使用

JSON.parse() 與 JSON.stringify() 簡單使用 真的是需要多學習，多積累，小菜記錄篇 問題情況： 想在通過點選後執行一個函式，ajax 返回的 json 資料直接作為引數再次呼叫的時候，出現 undefined，之前沒有遇到過，現在才開始瞭解有個 J

IE低版本 JSON.parse 和stringify 的兼容 （IE8以下）

json對象 slice rop 版本 常用 reg bool stringify javascrip 低版本的IE不支持JSON，JSON對象解析不是隨著javascript產生的，找到一段兼容常用的JSON.parse和JSON.stringify的代碼if (!win

JSON.parse()和eval()的區別

如果 字符串 擔心 並且 spa 區別 color 操作 插入 JSON.parse()之可以解析json格式的數據，並且會對要解析的字符串進行格式檢查，如果格式不正確則不進行解析，而eval()則可以解析任何字符串，eval是不安全的。 比如下面的字符串： var

JSON.parse()與JSON.stringify()的區別

data lin 結果 gif 一個 字符串 div 對象 oat JSON.parse()【從一個字符串中解析出json對象】 例子： //定義一個字符串 var data=‘{"name":"goatling"}‘ //解析對象? ?JSON.parse(data) 結

JSON.parse與JSON.stringify

arr -c per replacer 技術 分享 objects png console JSON:JavaScript Object Notation(JavaScript對象表示法)；甚至我們就可以大致認為JSON就是Javascript的對象，只不過範圍小上一些。

JSON.parse()與JSON.stringify()作用對比

JSON.parse()【從一個字串中解析出json物件】 例子： //定義一個字串 var data=’{“name”:“goatling”}’ //解析物件​ ​JSON.parse(data) 結果是： ​name:“goatling” JSON.stringify()【從一個物件中解

json_decode， json_encode，JSON.parse，JSON.stringify，eval

*json_decode(json格式的字串，可選bool)把json字串轉為json，如果第二個引數加true，則返回一個關聯陣列  * json_encode(json物件)把json物件轉為json字串    * JSON.parse(text:必需，

JSON.parse()與JSON.stringify()高階用法

    JSON.parse()與JSON.stringify是將JSON物件與字串互相轉換的方法，它們還有一些引數可以讓我們在實際應用中更加方便，現在介紹一下它們的高階用法     JSON.parse()        

JSON.parse()與JSON.stringify()高級用法

cas value json對象 序列 一個 upper defined 作用 sha JSON.parse()與JSON.stringify是將JSON對象與字符串互相轉換的方法，它們還有一些參數可以讓我們在實際應用中更加方便，現在介紹一下它們的高級用法