JSON · 廖雪峰 JavaScript Python Git 教程

# JSON JSON是JavaScript Object Notation的縮寫，它是一種數據交換格式。在JSON出現之前，大家一直用XML來傳遞數據。因為XML是一種純文本格式，所以它適合在網絡上交換數據。XML本身不算復雜，但是，加上DTD、XSD、XPath、XSLT等一大堆復雜的規范以后，任何正常的軟件開發人員碰到XML都會感覺頭大了，最后大家發現，即使你努力鉆研幾個月，也未必搞得清楚XML的規范。終于，在2002年的一天，道格拉斯·克羅克福特（Douglas Crockford）同學為了拯救深陷水深火熱同時又被某幾個巨型軟件企業長期愚弄的軟件工程師，發明了JSON這種超輕量級的數據交換格式。道格拉斯同學長期擔任雅虎的高級架構師，自然鐘情于JavaScript。他設計的JSON實際上是JavaScript的一個子集。在JSON中，一共就這么幾種數據類型： * number：和JavaScript的`number`完全一致； * boolean：就是JavaScript的`true`或`false`； * string：就是JavaScript的`string`； * null：就是JavaScript的`null`； * array：就是JavaScript的`Array`表示方式——`[]`； * object：就是JavaScript的`{ ... }`表示方式。以及上面的任意組合。并且，JSON還定死了字符集必須是UTF-8，表示多語言就沒有問題了。為了統一解析，JSON的字符串規定必須用雙引號`""`，Object的鍵也必須用雙引號`""`。由于JSON非常簡單，很快就風靡Web世界，并且成為ECMA標準。幾乎所有編程語言都有解析JSON的庫，而在JavaScript中，我們可以直接使用JSON，因為JavaScript內置了JSON的解析。把任何JavaScript對象變成JSON，就是把這個對象序列化成一個JSON格式的字符串，這樣才能夠通過網絡傳遞給其他計算機。如果我們收到一個JSON格式的字符串，只需要把它反序列化成一個JavaScript對象，就可以在JavaScript中直接使用這個對象了。 ## 序列化讓我們先把小明這個對象序列化成JSON格式的字符串： ``` var xiaoming = { name: '小明', age: 14, gender: true, height: 1.65, grade: null, 'middle-school': '\"W3C\" Middle School', skills: ['JavaScript', 'Java', 'Python', 'Lisp'] }; JSON.stringify(xiaoming); // '{"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"middle-school":"\"W3C\" Middle School","skills":["JavaScript","Java","Python","Lisp"]}' ``` 要輸出得好看一些，可以加上參數，按縮進輸出： ``` JSON.stringify(xiaoming, null, ' '); ``` 結果： ``` { "name": "小明", "age": 14, "gender": true, "height": 1.65, "grade": null, "middle-school": "\"W3C\" Middle School", "skills": [ "JavaScript", "Java", "Python", "Lisp" ] } ``` 第二個參數用于控制如何篩選對象的鍵值，如果我們只想輸出指定的屬性，可以傳入`Array`： ``` JSON.stringify(xiaoming, ['name', 'skills'], ' '); ``` 結果： ``` { "name": "小明", "skills": [ "JavaScript", "Java", "Python", "Lisp" ] } ``` 還可以傳入一個函數，這樣對象的每個鍵值對都會被函數先處理： ``` function convert(key, value) { if (typeof value === 'string') { return value.toUpperCase(); } return value; } JSON.stringify(xiaoming, convert, ' '); ``` 上面的代碼把所有屬性值都變成大寫： ``` { "name": "小明", "age": 14, "gender": true, "height": 1.65, "grade": null, "middle-school": "\"W3C\" MIDDLE SCHOOL", "skills": [ "JAVASCRIPT", "JAVA", "PYTHON", "LISP" ] } ``` 如果我們還想要精確控制如何序列化小明，可以給`xiaoming`定義一個`toJSON()`的方法，直接返回JSON應該序列化的數據： ``` var xiaoming = { name: '小明', age: 14, gender: true, height: 1.65, grade: null, 'middle-school': '\"W3C\" Middle School', skills: ['JavaScript', 'Java', 'Python', 'Lisp'], toJSON: function () { return { // 只輸出name和age，并且改變了key： 'Name': this.name, 'Age': this.age }; } }; JSON.stringify(xiaoming); // '{"Name":"小明","Age":14}' ``` ## 反序列化拿到一個JSON格式的字符串，我們直接用`JSON.parse()`把它變成一個JavaScript對象： ``` JSON.parse('[1,2,3,true]'); // [1, 2, 3, true] JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14} JSON.parse('true'); // true JSON.parse('123.45'); // 123.45 ``` `JSON.parse()`還可以接收一個函數，用來轉換解析出的屬性： ``` JSON.parse('{"name":"小明","age":14}', function (key, value) { // 把number * 2: if (key === 'name') { return value + '同學'; } return value; }); // Object {name: '小明同學', age: 14} ``` 在JavaScript中使用JSON，就是這么簡單！ ## 練習用瀏覽器訪問Yahoo的[天氣API](https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20%3D%202151330&format=json)，查看返回的JSON數據。