3.9 JSON對象 · JavaScript 標準參考教程

[TOC] ## JSON格式 JSON格式（JavaScript Object Notation的縮寫）是一種用于數據交換的文本格式，2001年由Douglas Crockford提出，目的是取代繁瑣笨重的XML格式。相比XML格式，JSON格式有兩個顯著的優點：書寫簡單，一目了然；符合JavaScript原生語法，可以由解釋引擎直接處理，不用另外添加代碼。所以，JSON迅速被接受，已經成為各大網站交換數據的標準格式，并被寫入ECMAScript 5，成為標準的一部分。簡單說，JSON格式就是一種表示一系列的“值”的方法，這些值包含在數組或對象之中，是它們的成員。對于這一系列的“值”，有如下幾點格式規定： 1. 數組或對象的每個成員的值，可以是簡單值，也可以是復合值。 2. 簡單值分為四種：字符串、數值（必須以十進制表示）、布爾值和null（NaN, Infinity, -Infinity和undefined都會被轉為null）。 3. 復合值分為兩種：符合JSON格式的對象和符合JSON格式的數組。 4. 數組或對象最后一個成員的后面，不能加逗號。 5. 數組或對象之中的字符串必須使用雙引號，不能使用單引號。 6. 對象的成員名稱必須使用雙引號。以下是合格的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值。 ## JSON對象 ES5新增了JSON對象，用來處理JSON格式數據。它有兩個方法：JSON.stringify和JSON.parse。 ### JSON.stringify() JSON.stringify方法用于將一個值轉為字符串。該字符串符合JSON格式，并且可以被JSON.parse方法還原。 ~~~ JSON.stringify("abc") // '"abc"' JSON.stringify(1) // "1" JSON.stringify(false) // "false" JSON.stringify([]) // "[]" JSON.stringify({}) // "{}" JSON.stringify([1, "false", false]) // '[1,"false",false]' JSON.stringify({ name: "張三" }) // '{"name":"張三"}' ~~~ 上面代碼將各種類型的值，轉成JSON字符串。需要注意的是，對于原始類型的字符串，轉換結果會帶雙引號，即字符串`abc`會被轉成`"abc"`，這是因為將來還原的時候，雙引號可以讓JavaScript引擎知道，abc是一個字符串，而不是一個變量名。如果原始對象中，有一個成員的值是undefined、函數或XML對象，這個成員會被省略。如果數組的成員是undefined、函數或XML對象，則這些值被轉成null。 ~~~ JSON.stringify({ f: function(){}, a: [ function(){}, undefined ] }); // "{"a":[null,null]}" ~~~ 上面代碼中，原始對象的f屬性是一個函數，JSON.stringify方法返回的字符串會將這個屬性省略。而a屬性是一個數組，成員分別為函數和undefined，它們都被轉成了null。正則對象會被轉成空對象。 ~~~ JSON.stringify(/foo/) // "{}" ~~~ JSON.stringify方法會忽略對象的不可遍歷屬性。 ~~~ var obj = {}; Object.defineProperties(obj, { 'foo': { value: 1, enumerable: true }, 'bar': { value: 2, enumerable: false } }); JSON.stringify(obj); // {"foo":1} ~~~ 上面代碼中，bar是obj對象的不可遍歷屬性，JSON.stringify方法會忽略這個屬性。 JSON.stringify方法還可以接受一個數組參數，指定需要轉成字符串的屬性。 ~~~ JSON.stringify({ a:1, b:2 }, ['a']) // '{"a":1}' ~~~ 上面代碼中，JSON.stringify方法的第二個參數指定，只轉a屬性。 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，于是該屬性被忽略了。 JSON.stringify還可以接受第三個參數，用于增加返回的JSON字符串的可讀性。如果是數字，表示每個屬性前面添加的空格（最多不超過10個）；如果是字符串（不超過10個字符），則該字符串會添加在每行前面。 ~~~ JSON.stringify({ p1:1, p2:2 }, null, 2); // "{ "p1": 1, "p2": 2 }" JSON.stringify({ p1:1, p2:2 }, null, "|-"); // "{ |-"p1": 1, |-"p2": 2 }" ~~~ 如果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方法處理。 ### JSON.parse() JSON.parse方法用于將JSON字符串轉化成對象。 ~~~ JSON.parse('{}') // {} JSON.parse('true') // true JSON.parse('"foo"') // "foo" JSON.parse('[1, 5, "false"]') // [1, 5, "false"] JSON.parse('null') // null var o = JSON.parse('{"name":"張三"}'); o.name // 張三 ~~~ 如果傳入的字符串不是有效的JSON格式，JSON.parse方法將報錯。 ~~~ JSON.parse("'String'") // illegal single quotes // SyntaxError: Unexpected token ILLEGAL ~~~ 上面代碼中，雙引號字符串中是一個單引號字符串，因為單引號字符串不符合JSON格式，所以報錯。為了處理解析錯誤，可以將JSON.parse方法放在try...catch代碼塊中。 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 // 11 o.b // undefined ~~~ ## 參考鏈接 * MDN,?[Using native JSON](https://developer.mozilla.org/en-US/docs/Using_native_JSON) * MDN,?[JSON.parse](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/JSON/parse) * Dr. Axel Rauschmayer,?[JavaScript’s JSON API](http://www.2ality.com/2011/08/json-api.html) * Jim Cowart,?[What You Might Not Know About JSON.stringify()](http://freshbrewedcode.com/jimcowart/2013/01/29/what-you-might-not-know-about-json-stringify/) * Marco Rogers polotek,?[What is JSON?](http://docs.nodejitsu.com/articles/javascript-conventions/what-is-json)