今天我們來講一下Javascript對象中的JSON。JSON是一種輕量級的數據交換格式,以鍵值對方式存儲數據,快速有效地進行數據交換。相信想必大家在項目開發中已經深有體會,實踐當中也有了自己的一些心得體會。
首先,讓我們看看JSON是如何定義對象的,這是我們在工程實踐中最常見的用法。
{ "name": "Peter", "age": 28, "city": "Beijing", "job": "Software Engineer" }
上述對象結構以鍵值對進行存儲,在這里,name、age、city、job分別是對象的屬性名,對應的值分別為Peter、28、Beijing、Software Engineer。通過{}將屬性名和屬性值綁定在一起,使它變成了一個JSON對象,是不是很直觀易懂呢?
在這里提醒大家,因為JSON格式要求屬性名和字符串必須要用雙引號來包裹,否則會報錯。下面這個例子就可以引發錯誤:
{ name: "Peter", age: 28, city: "Beijing", job: "Software Engineer" }
下一步,帶你一起了解JSON.parse()方法和JSON.stringify()方法。
JSON.parse()方法,用于將一個符合JSON格式的字符類型轉換成一個Javascript對象。
var str = '{"name": "Peter", "age": 28, "city": "Beijing", "job": "Software Engineer"}'; var obj = JSON.parse(str); console.log(obj.name); // "Peter" console.log(obj.age); // 28 console.log(obj.city); // "Beijing" console.log(obj.job); // "Software Engineer"
JSON.stringify()方法的作用是將一個對象或數組轉換為JSON字符串:
var obj = {name: "Peter", age: 28, city: "Beijing", job: "Software Engineer"}; console.log(JSON.stringify(obj)); // "{"name":"Peter","age":28,"city":"Beijing","job":"Software Engineer"}"
接下來,舉一個實際場景的例子。一個RESTful API接口返回的數據如下:
[ { "word": "github", "description": "一個代碼托管平臺" },{ "word": "ubuntu", "description": "一個基于Debian的操作系統" },{ "word": "npm", "description": "Node.js的包管理器" } ]
我們需要通過Javascript將它轉換為一個具體的數組,對其進行操作:
var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://localhost:3000', true); xhr.send(); xhr.onreadystatechange = function() { if(xhr.readyState === 4 && xhr.status === 200) { var responseArr = JSON.parse(xhr.responseText); console.log(responseArr[0].word); // github console.log(responseArr[1].description); // 一個基于Debian的操作系統 } }
上述代碼通過XMLHttpRequest對象從服務器端獲取RESTful API接口返回的數據,然后通過JSON.parse()方法將它轉換成了一個Javascript對象。此時我們就可以對這個數組進行操作。
總結一下,JSON作為一種輕量簡便的數據格式,在前端開發工作中扮演著非常重要的角色。掌握JSON相關的方法,對于提高代碼水平也十分有幫助,希望大家通過閱讀這篇文章,掌握JSON的相關知識,運用起來更加高效便捷。