JS核心-(30)-物件-JSON

前言

什麼是 JSON ？

我們先來看維基百科怎麼定義 JSON

可以了解到，Json 其實是一個字串的格式，它的結構雖然跟物件相似，但卻有些微不同之處

例如屬性的部分一定要用雙引號，使用單引號或是無引號的狀況都會報錯。

值的部分如果是字串也一定要是雙引號，使用單引號或是無引號的狀況都會報錯。

Json 結構

我們來看看下面的程式碼

var family = {
        name: '小明家',
        members: {
            father: '老爸',
            mom: '老媽',
            ming: '小明'
        }
    };

var json = JSON.stringify(family);
console.log(json);

執行結果如下

我們印出來的 json 結構就是字串

那麼我們有了共識再來看看下面兩種 ajax 的寫法會回傳甚麼

// 原生 AJAX
function getData() {
    console.log(this.response);
    // var data = JSON.parse(this.response);
    // console.log(data);
}

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", getData);
oReq.open("GET", "family.json");
oReq.send();

你會發現用原生 AJAX 傳進來的，就是字串的 json 結構，必須要用 JSON.parse 轉換成物件的結構才能取用資料。

但是如果是用 jQuery 封裝好的 ajax 方法的話，他就會自動幫你轉換成物件結構

// jQuery Ajax
$.ajax({
    url: "family.json"
}).done(function (data) {
    console.log(data);
});

另外，也可以透過 開發者工具 > Network > 點選檔案 > Response > 原始json的字串資料，來觀察原來的資料結構

結論

Json 是字串的一種，跟物件的結構相似，但他以字串的方式進行訊息的傳遞。

可以透過 JSON.stringify 以及 JSON.parse 分別傳換為 json 字串 或是 物件格式 的資料結構。