json基礎

morra發表於2016-12-25
JSON

1 xml缺點

用xml表示一個物件，資料儲存效率低

<person>
<firstName>Morra<firstName>
<lastName>Doe<lastName>
<age>30</age>
</person>

xml的解析過程如下，過程相當繁瑣：

var personElement = document.querySelector("person");
var firstName = personElement.querySelector("firstName").innerHTML;
var lastName = personElement.querySelector("lastName").innerHTML;
var age = personElement.querySelector("age").innerHTML;
 
var person = {
    firstName:firstName,
    lastName:lastName,
    age:age,
};

xml缺點：

  • 資料結構佔比比較大，資料儲存效率低
  • xml閱讀、解析、與生成資料需要繁瑣的程式碼，程式碼編寫效率低。

2 json基礎

由於xml的以上缺點，json開始流行起來。JSON是一種資料格式，不是語言，它只定義物件的結構和資料。

字串必須用雙引號，數字和布林值不變。

2.1 物件

js中的物件：

var person = {
    firstName:"Morra",
    lastName:"Doe",
    age:30
};

JSON寫法：

{
    "firstName":"Morra",      //json中屬性名也是放在雙引號裡的
    "lastName":"Doe",
    "age":30
}                            //也沒有分號

也可以巢狀：

 {
    "firstName": "Morra",
    "lastName": "Doe",
    "age": 30,
    "address": {
        "country": "China",
        "city": "somewhere"
    }
}

2.2 陣列

js中的陣列：

var values = ["john", 30, false, null];

json陣列格式：

["john", 30, false, null]

2.3 序列化與反序列化

需要用到js裡的JSON物件，它可以序列化js物件，也能解析json物件。

var person = {
    firstName:"Morra",
    lastName:"Doe",
    age:30
};
 
var json =JSON.stringify(person);  //序列化
console.log(json);  //{"firstName":"Morra","lastName":"Doe","age":30}
 
var personData = JSON.parse(json);   //解析json，反序列化
console.log(personData); //Object {firstName: "Morra", lastName: "Doe", age: 30}

相關文章