JSON對象和字符串之間的相互轉換 – JSON.parse() 和 JSON.stringify()

全部現代瀏覽器都支持 JSON 對象，有兩個很是有用的方法來處理 JSON 格式的內容：

• JSON.parse(string) ：接受一個 JSON 字符串並將其轉換成一個 JavaScript 對象。
• JSON.stringify(obj) ：接受一個 JavaScript 對象並將其轉換爲一個 JSON 字符串。

好比我有兩個變量，我要將a轉換成字符串，將b轉換成JSON對象：

js 代碼:

    var a={"name":"tom","sex":"男","age":"24"};
    var b='{"name":"Mike","sex":"女","age":"29"}';

在Firefox，chrome，opera，safari，ie9，ie8等高級瀏覽器直接能夠用JSON對象的stringify()和parse()方法。

JSON.stringify(obj)將JSON轉爲字符串。

JSON.parse(string)將字符串轉爲JSON格式；

上面的轉換能夠這麼寫：

js 代碼:

    var a={"name":"tom","sex":"男","age":"24"};
     
    var b='{"name":"Mike","sex":"女","age":"29"}';
     
    var aToStr=JSON.stringify(a);
     
    var bToObj=JSON.parse(b);
     
    console.log(typeof(aToStr)); ?//string
     
    console.log(typeof(bToObj));//object

儘管這些方法一般用在對象上，但它們也能夠在數組上使用：

JavaScript 代碼:

    const myArr = ['bacon', 'letuce', 'tomatoes'];
     
    const myArrStr = JSON.stringify(myArr);
     
    console.log(myArrStr);
    // "["bacon","letuce","tomatoes"]"
     
    console.log(JSON.parse(myArrStr));
    // ["bacon","letuce","tomatoes"]

ie8(兼容模式),ie7和ie6沒有JSON對象，不過http://www.json.org/提供了一個json.js,這樣ie8(兼容模式),ie7和ie6就能夠支持JSON對象以及其stringify()和parse()方法；你能夠在https://github.com/douglascrockford/JSON-js上獲取到這個js，通常如今用json2.js。

ie8(兼容模式),ie7和ie6可使用eval()將字符串轉爲JSON對象，

js 代碼:

    var c='{"name":"Mike","sex":"女","age":"29"}';
    var cToObj=eval("("+c+")");
    console.log(typeof(cToObj));

    var c='[{"name":"Mike","sex":"女","age":"29"}]'; var cToObj=eval(c); console.log(typeof(cToObj));

jQuery中也有將字符串轉爲JSON格式的方法jQuery.parseJSON( json )，接受一個標準格式的 JSON 字符串，並返回解析後的 JavaScript （JSON）對象。固然若是有興趣能夠本身封裝一個jQuery擴展，jQuery.stringifyJSON(obj)將JSON轉爲字符串。

JSON.parse() 和 JSON.stringify() 的高級用法,能夠將返回值過濾，轉換等。請查看：https://www.html.cn/archives/8735

這裏介紹一下，我主要介紹一下 JSON.parse() 和 JSON.stringify() 的高級用法，能夠在實際應用中給咱們帶來一些方便。

JSON.parse()

JSON.parse() 能夠接受第二個參數，它能夠在返回以前轉換對象值。好比這例子中，將返回對象的屬性值大寫：

JavaScript 代碼:

    const user = {
    name: 'John',
    email: 'john@awesome.com',
    plan: 'Pro'
    };
     
    const userStr = JSON.stringify(user);
     
    const newUserStr = JSON.parse(userStr, (key, value) => {
    if (typeof value === 'string') {
    return value.toUpperCase();
    }
    return value;
    });
     
    console.log(newUserStr); //{name: "JOHN", email: "JOHN@AWESOME.COM", plan: "PRO"} 

注：尾隨逗號在JSON 中無效，因此若是傳遞給它的字符串有尾隨逗號，JSON.parse()將會拋出錯誤。

JSON.stringify()

JSON.stringify() 能夠帶兩個額外的參數，第一個是替換函數，第二個間隔字符串，用做隔開返回字符串。

參數：

• value ： 將要轉爲JSON字符串的javascript對象。
• replacer ：該參數能夠是多種類型,若是是一個函數,則它能夠改變一個javascript對象在字符串化過程當中的行爲, 若是是一個包含 String 和 Number 對象的數組,則它將做爲一個白名單.只有那些鍵存在域該白名單中的鍵值對纔會被包含進最終生成的JSON字符串中.若是該參數值爲null或者被省略,則全部的鍵值對都會被包含進最終生成的JSON字符串中。
• space ：該參數能夠是一個 String 或 Number 對象,做用是爲了在輸出的JSON字符串中插入空白符來加強可讀性. 若是是Number對象, 則表示用多少個空格來做爲空白符; 最大可爲10,大於10的數值也取10.最小可爲1,小於1的數值無效,則不會顯示空白符. 若是是個 String對象, 則該字符串自己會做爲空白符,字符串最長可爲10個字符.超過的話會截取前十個字符. 若是該參數被省略 (或者爲null), 則不會顯示空白符

替換函數能夠用來過濾值，由於任何返回 undefined 的值將不在返回的字符串中：

JavaScript 代碼:

    const user = {
    id: 229,
    name: 'John',
    email: 'john@awesome.com'
    };
     
    function replacer(key, value) {
    console.log(typeof value);
    if (key === 'email') {
    return undefined;
    }
    return value;
    }
     
    const userStr = JSON.stringify(user, replacer);
    // "{"id":229,"name":"John"}"

傳入一個間隔參數的示例：

JavaScript 代碼:

    const user = {
    name: 'John',
    email: 'john@awesome.com',
    plan: 'Pro'
    };
     
    const userStr = JSON.stringify(user, null, '...');
    // "{
    // ..."name": "John",
    // ..."email": "john@awesome.com",
    // ..."plan": "Pro"
    // }"

toJSON方法

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

JavaScript 代碼:

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

利用toJSON方法,咱們能夠修改對象轉換成JSON的默認行爲。

用 JSON.stringify 來格式化對象

在實際使用中,咱們可能會格式化一些複雜的對象，這些對象每每對象內嵌套對象。直接看起來並不那麼直觀,結合上面的的 replacer 和 space 參數,咱們能夠這樣格式化複雜對象：

JavaScript 代碼:

    var censor = function(key,value){
    if(typeof(value) == 'function'){
    return Function.prototype.toString.call(value)
    }
    return value;
    }
    var foo = {bar:"1",baz:3,o:{name:'xiaoli',age:21,info:{sex:'男',getSex:function(){return 'sex';}}}};
    console.log(JSON.stringify(foo,censor,4))

實際返回的字符串，記住是字符串，以下:

JavaScript 代碼:

    {
    "bar": "1",
    "baz": 3,
    "o": {
    "name": "xiaoli",
    "age": 21,
    "info": {
    "sex": "男",
    "getSex": "function (){return 'sex';}"
    }
    }
    }