JavaScript對象表示法（JSON）是用于將結構化數(shù)據(jù)表示為JavaScript對象的標準格式，通常用于在網(wǎng)站上表示和傳輸數(shù)據(jù) (i.e. 從服務器向客戶端發(fā)送一些數(shù)據(jù)，因此可以將其顯示在網(wǎng)頁上). 您會經(jīng)常遇到它，所以在本文中，我們向您提供使用JavaScript處理JSON的所有工作，包括訪問JSON對象中的數(shù)據(jù)項并編寫自己的JSON。
| 前提: | 計算機基礎知識，HTML 和 CSS 基礎 (see First steps and Building blocks) 和 JS 面向?qū)ο蠡A(see Introduction to objects)。 |
|---|---|
| 目標: | 理解 JSON 的數(shù)據(jù)儲存工作原理，創(chuàng)建你的 JSON 對象。 |
JSON 是一種按照JavaScript對象語法的數(shù)據(jù)格式，這是 Douglas Crockford 推廣的。雖然它是基于 Javascript 語法，但它獨立于javaScript，這也是為什么許多程序環(huán)境能夠讀?。ń庾x）和生成 JSON。
JSON可以作為一個對象或者字符串存在，前者用于解讀 JSON 中的數(shù)據(jù)，后者用于通過網(wǎng)絡傳輸 JSON 數(shù)據(jù)。 這不是一個大事件——JavaScript 提供一個全局的 可訪問的 JSON 對象來對這兩種數(shù)據(jù)進行轉(zhuǎn)換。
一個 JSON 對象可以被儲存在它自己的文件中，這基本上就是一個文本文件，擴展名為 .json， 還有 MIME type 用于 application/json.
我們已經(jīng)可以推測出 JSON 對象就是基于 Javascript 對象，而且這幾乎是正確的。你可以把 JavaScript 對象原原本本的寫入 JSON 數(shù)據(jù)——字符串，數(shù)字，數(shù)組，布爾還有其它的字面值對象。這允許你構造出一個對象樹，如下：
{ 'squadName' : 'Super hero squad', 'homeTown' : 'Metro City', 'formed' : 2016, 'secretBase' : 'Super tower', 'active' : true, 'members' : [ { 'name' : 'Molecule Man', 'age' : 29, 'secretIdentity' : 'Dan Jukes', 'powers' : [ 'Radiation resistance', 'Turning tiny', 'Radiation blast' ] }, { 'name' : 'Madame Uppercut', 'age' : 39, 'secretIdentity' : 'Jane Wilson', 'powers' : [ 'Million tonne punch', 'Damage resistance', 'Superhuman reflexes' ] }, { 'name' : 'Eternal Flame', 'age' : 1000000, 'secretIdentity' : 'Unknown', 'powers' : [ 'Immortality', 'Heat Immunity', 'Inferno', 'Teleportation', 'Interdimensional travel' ] } ]}如果我們要加載對象進入 Javascript 程序，以保存為一個名為 superHeroes 對象為例，我們使用 . 或 [] 訪問對象內(nèi)的數(shù)據(jù)（關于. 和 []概念，見 ]
為了訪問對象中的對象，你只需簡單地鏈式訪問（通過屬性名和數(shù)組索引）。例如，訪問 superHeroes 對象中的 members 數(shù)組對象的第二個元素的 powers 數(shù)組對象的第三個元素，你可以這樣做：
superHeroes['members'][1]['powers'][2]['members'].members 包含有對象數(shù)組，我們想要訪問第二個元素，所以我們使用 [1].['powers'].[2].注：我們已經(jīng)在 JSONText.html 實例中讓JSON 對象進入變量中使其可訪問(see the source code)。嘗試加載它并且在您的瀏覽器上訪問對象數(shù)據(jù)。
前面我們已經(jīng)說過，”我們已經(jīng)可以推測出 JSON 對象就是基于 Javascript 對象，而且這幾乎是正確的“——我們說幾乎正確的原因是數(shù)組對象也是一種合法的 JSON 對象，例如：
[ { 'name' : 'Molecule Man', 'age' : 29, 'secretIdentity' : 'Dan Jukes', 'powers' : [ 'Radiation resistance', 'Turning tiny', 'Radiation blast' ] }, { 'name' : 'Madame Uppercut', 'age' : 39, 'secretIdentity' : 'Jane Wilson', 'powers' : [ 'Million tonne punch', 'Damage resistance', 'Superhuman reflexes' ] }]上面是完全合法的 JSON。你只需要通過數(shù)組索引就可以訪問數(shù)組元素，如[0]['powers'][0]。
好了，讓我們通過運行這個示例來展示我們?nèi)绾卫肑SON數(shù)據(jù)。
首先，拷貝我們的 heroes.html 和 style.css 文件。后者包含了用于頁面的簡單的 CSS ，前者包含了簡單的 HTML body。
header>header>section>section>添加
