分享：就是這麼簡單易懂的JSON入門

JSON JavaScript Java XML 程序員程序猿的內心獨白 2019-04-06

本節重點來介紹一下JSON，JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式，我們稱之為JavaScript對象表示法。也就是說，JSON是一種格式。首先搞清楚三個概念，即什麼是JSON字符串，什麼是JavaScript對象，還有什麼又叫做JSON對象？先來說一個事，在沒有JSON之前，前臺頁面和Java等語言充當的服務器層，到底是如何傳輸數據的呢？沒錯，是通過XML來傳輸的。比如一個登陸頁面。

頁面上有用戶名和密碼兩個輸入框，當我點擊登錄按鈕，這兩個數據就會被傳遞到服務器層。那麼，如何傳輸呢？如果用XML，也許是這樣的：

<LoginData> <name>zhangsan</name> <password>123</password></LoginData>

後臺接收到這個數據，然後就可以開始解析，最終拿到zhangsan和123兩個字面量。時間線再往前推，在XML還沒有出來的時候，怎麼辦呢？聰明的程序開發人員則會規定幾種特殊的格式，拼接一個特殊的字符串，傳遞到後臺中去。比如像這樣的：

"name=zhangsan&password=123"

那麼後臺的程序員也知道這個規則，如果是Java的話，就可以使用String的splite方法，先通過逗號把這個字符串分割成兩份，也就是變成：name=zhangsan還有password=123兩個字符串，然後再通過“=”分割，將“name=zhangsan”分割成“name”和“zhangsan”，把“password=123”分割成“password”和“123”兩部分。終於，到底還是拿到用戶名和密碼了。

接下來還是談JSON，其實JSON就是一種數據格式。諸如：

{
 key1 : value1 ,
 key2 : value2
};

這樣的格式就是JSON格式，它是一系列鍵值對的集合，不同的鍵值對之間用逗號分隔，最後一個鍵值對不需要加逗號。符合這種格式的字符串就是JSON字符串。比如：

"{'name' : 'Jack'}"

它歸根到底還是一個字符串，不是一個對象。而JSON對象，其實就是Javascript對象，我們可以通過字面值的方式直接創造一個對象，比如：

var person = {name : 'Jack'}

等同於：

var person = {'name' : 'Jack'}

在上邊這個例子中，name可加單引號，也可加雙引號，甚至可以什麼都不加。而右邊的值必須是一個實實在在的東西，比如字符串，或者一個對象，甚至是一個函數。我們不考慮JS內部的對象機制，只是簡單地說明一下，是有這麼個事情的。這就是所謂的JSON對象，也就是js對象。在JavaScript中，對象是鍵值對的集合，符合JSON格式。我們可以通過下面的方法，把JS對象轉換成JSON格式的字符串。

var person = {'name' : 'Jack'}
alert(JSON.stringify(person));

同樣，一個JSON格式的字符串，可以變成一個JS對象，如：

console.log(JSON.parse("{"name":"Jack"}"));

做個小結，JSON字符串就是符合JSON格式的字符串，他還是字符串，JSON對象就是JavaScript對象，我們推薦使用字面值的方式來創建一個JS對象。然後，JS對象和JSON字符串可以互相轉換。通過這一個特點，我們能夠實現JS對象的拷貝。一般來說，比如我有一個js對象。

var person = {'name' : 'Jack'}
var person2 = person;

這樣做，並不是對象的複製，person2僅僅是一個指針，他和person一樣，指向了{'name' : 'Jack'}這一片內存空間。當person發生改變，person2必然也跟著改變。

var person = {'name' : 'Jack'}
var person2 = person;
person.age = 10; //給person動態地添加一個屬性
alert(JSON.stringify(person2)); //person2也跟著變了

那有沒有什麼辦法可以實現對象的複製呢？一個好的解決方案就是，先把person轉換成JSON字符串，然後再轉成JS對象，這個時候就是另外一個JS對象了。比如：

var person = {'name' : 'Jack'}
var person2 = JSON.parse(JSON.stringify(person));
person.age = 10; //給person動態地添加一個屬性
alert(JSON.stringify(person2)); //person2不變

接下來說說js對象內容的訪問和操作，我們上面已經說了，JS對象中無非是一些鍵值對的集合，他更像是一個容器，既然是容器，自然有內容，我們如何訪問其中的內容呢？在上面的例子中，我們已經通過“對象.屬性名”的方式來訪問JS對象的具體內容。比如：

var obj = {
 id : 1
};
var id = obj.id;
alert(id);

另外一種方式，就是通過對象["屬性名"] 來操作其內容。比如：

var id = obj['id']

可以用雙引號，也可以用單引號，看個人習慣了。在JS對象中，屬性名永遠都是字符串，雖然諸如這樣的代碼：

var obj = {
 id : 1
};

id沒有加上引號，但它實際上還是以字符串的形式被保存起來的。再說一遍，如果你要訪問和操作JS對象的內容，有兩種方式，第一種方式是用點，第二種方式則是用中括號。兩種方式如果做一個比較，顯然是第二種方式較為靈活，因為它是用字符串去找對應的鍵值對，而不是用一個標識符。比如剛才的例子，你這樣寫：

var id = obj.id;

我問你，obj.id中的id是什麼？為了符合規範，id必須是標識符，你不能寫 obj.123 吧。這顯然是不合法，也無法運行通過的。比如，你能這樣寫嗎？

var obj = {
 123 : 'Hello JavaScript!'
};
var id = obj.123;
alert(id);

肯定不行，會報錯的:

但是，如果你用中括號就可以：

var obj = {
 123 : 'Hello JavaScript!'
};
var id = obj['123'];
alert(id);

具體用那種方式，隨你喜好而定。

現在，我們已經對JSON格式和JS對象有了一個比較充分的瞭解，我要在此拋出一個問題，有沒有什麼辦法能夠獲取JS對象的屬性詳情呢？注意我的用詞，是屬性詳情，也就是說，比如有一個JS對象：

var obj = {
 message: 'Hello JavaScript!'
};

message就是它的屬性，關於這個屬性，有沒有什麼詳細的描述信息呢？答案是有的，在JS中，有一個內置的Object對象，它給我們提供了一個getOwnPropertyDescriptor方法，可以看到某個對象的某個屬性的具體情況。你可以把這個理解為Java中的靜態類調用方法。我們可以這樣做：

var obj = {
 message : 'Hello JavaScript!'
};

console.log(Object.getOwnPropertyDescriptor(obj,'message'));

可以看到，我們成功挖掘出了四個屬性，如果你不明白我在說什麼，我就說得更加直白一些，就是說，

var obj = {
 message: 'Hello JavaScript!'
};

obj裡面有一個屬性message，而message又有四個描述性的東西，分別是configurable（可配置），enumerable（可枚舉），value（值），還有 writable（可寫入）。這四樣東西，專業術語叫做屬性描述符，或者數據描述符。目前我們看到的數據描述符都被賦予了默認值，我們也可以通過defineProperty方法對其進行個性化配置。

比如，我們把message設置為只讀：

var obj = {
 message : 'Hello JavaScript!'
};
console.log(Object.getOwnPropertyDescriptor(obj,'message'));
Object.defineProperty(obj,'message',{
 writable:false
});
obj.message = 'haha';
alert(obj.message);