JSON.parse() 入門

JavaScript的JSON字串轉換為JS物件的方式我們常常用的有三種:

var str = '{"name":"悟空","age":500}';
複製程式碼

將字串轉換為Java物件的方式

var json = JSON.parse(str); 推薦使用
var json = eval("(" + str + ")"); 很早之前用過
var json = (new Function("return " + str))(); 沒有用過

執行結果為:

1.JSON.parse() 使用

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

var str = '{"name":"悟空","age":18}';
console.log(JSON.parse(str));
複製程式碼

語法結構: JSON.parse(text[, reviver])

text: 要被解析成JavaScript值的字串，檢視 JSON 物件學習的JSON 語法的說明。

reviver[可選]: 如果是一個函式，則規定了原始值如何被解析改造，在被返回之前。

返回值: Object對應給定的JSON文字。

異常: 若被解析的 JSON 字串是非法的，則會丟擲一個 語法錯誤 異常。

測試reviver引數使用

var user = {
    name: 'pangsir',
    email: 'hanpang8983@foxmail.com',
    age: 18,
    status:false
};

var userStr = JSON.stringify(user);

var newUserStr = JSON.parse(userStr, function(key, value){
    if (typeof value === 'string') {
        return value.toUpperCase();
    }
    if(typeof value === 'number'){
        return value*2;
    }
    return value;
});

console.log(newUserStr);
複製程式碼

執行結果為

如果指定了 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 }

JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', function (k, v) {
    console.log(k); // 輸出當前的屬性名，從而得知遍歷順序是從內向外的，
                    // 最後一個屬性名會是個空字串。
    return v;       // 返回原始屬性值，相當於沒有傳遞 reviver 引數。
});

// 1
// 2
// 4
// 6
// 5
// 3 
// ""
複製程式碼

2.注意的坑點

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

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

B.單引號與雙引號

我們看到一開始的舉例中 var str = '{"name":"悟空","age":18}';

使用單引號來套雙引號，如果反過來寫呢，

如：var str = "{'name':'小明', 'age':18}";（相信也不少人習慣用雙引號套單引號）

結果使用JSON.parse()來轉化也會報錯

C.相容問題

IE6/7瀏覽器中不支援使用JSON.parse()方法轉成json物件，所以需要引入一個json2.js檔案。可以在這個網站（json2.js）去下載物件檔案。

最後總結來說，如果使用JSON.parse()方法來轉化成json物件的資料格式的話，需要注意的是被轉化的字串裡面的屬性要使用引號，並且總體是單引號套雙引號的方式，以及IE6/7瀏覽器是不支援該方法。

當然，如果你使用eval()或者new Function()的方式來轉化，那就完全可以忽略上述的這兩點需要注意的地方!

JSON.parse 新手入門