Web基礎(chǔ)復(fù)習(xí)——JSON

什么是JSON

JavaScript Object Notation剧包,JS對象表示方法贷岸。
是輕量級的文本數(shù)據(jù)交換格式。
與XML類似头镊。

XML和JSON的區(qū)別

相同:

  • 都是純文本
  • 具有“自我描述性”,人類可讀
  • 具有層級結(jié)構(gòu)
  • 可通過JS進(jìn)行解析
  • 數(shù)據(jù)可使用AJAX進(jìn)行傳輸

不同:

對JSON來說:

  • 沒有結(jié)束標(biāo)簽
  • 更短
  • 讀寫速度更快
  • 使用數(shù)組
  • 無保留字
  • 可使用內(nèi)建的 JavaScript eval() 方法進(jìn)行解析

語法

基本語法規(guī)則在前面整理 JavaScript 的文章中有提到魄幕,不再重復(fù)相艇。

創(chuàng)建對象

var animal = [
    {"name":"Cat","Color":"Orange"},
    {"name":"Dog","Color":"Black"},
    {"name":"Rabbit","Color":"White"}
]

訪問對象值
var a = animal[0].name;
var b = animal[1]["name"];
兩種方式都可以。

循環(huán)輸出對象屬性

for (i in animal[0]) {
        document.getElementById('property').innerHTML += i + "<br>";
}

循環(huán)輸出對象屬性值

for (j in animal[0]) {
        document.getElementById('property').innerHTML += animal[0][j] + "<br>";
}

循環(huán)數(shù)組啥的balabala都類似纯陨,看一眼就融會(huì)貫通了坛芽,不多寫了。主要是懶

以上示例代碼運(yùn)行結(jié)果:

對象數(shù)組的創(chuàng)建翼抠、修改與訪問

示例代碼:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>對象數(shù)組</title>
</head>
<body>
    <h1>對象數(shù)組的創(chuàng)建靡馁、修改與訪問</h1>
    <p>第一只貓叫<span id = "name1"></span></p>
    <p>第一只貓改名之后叫<span id = "name2"></span></p>

    <script type="text/javascript">
        //創(chuàng)建對象數(shù)組
        var cat = [
        {"name":"團(tuán)團(tuán)","breed":"英短"},
        {"name":"Nuts","breed":"曼赤肯"},
        {"name":"湯圓","breed":"美短"},
        ];

        //訪問對象數(shù)組
        document.getElementById('name1').innerHTML = cat[0].name;

        //修改
        cat[0].name = "包子";

        document.getElementById("name2").innerHTML = cat[0].name;
    </script>
</body>
</html>

運(yùn)行結(jié)果:

數(shù)據(jù)與JS對象相互轉(zhuǎn)換

數(shù)據(jù)轉(zhuǎn)JS對象:JSON.parse()
JS對象轉(zhuǎn)數(shù)據(jù):JSON.stringify()
具體怎么用,在整理JavaScript的文章中有詳細(xì)示例机久,這里就不復(fù)制粘貼湊字?jǐn)?shù)了。

JSON的整理有部分內(nèi)容JS里面有提到赔嚎,就簡單略過了膘盖,補(bǔ)充了一些之前沒有顧到的地方。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末尤误,一起剝皮案震驚了整個(gè)濱河市侠畔,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌损晤,老刑警劉巖软棺,帶你破解...
    沈念sama閱讀 211,348評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異尤勋,居然都是意外死亡喘落,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,122評論 2 385
  • 文/潘曉璐 我一進(jìn)店門最冰,熙熙樓的掌柜王于貴愁眉苦臉地迎上來瘦棋,“玉大人,你說我怎么就攤上這事暖哨《呐螅” “怎么了?”我有些...
    開封第一講書人閱讀 156,936評論 0 347
  • 文/不壞的土叔 我叫張陵篇裁,是天一觀的道長沛慢。 經(jīng)常有香客問我,道長达布,這世上最難降的妖魔是什么团甲? 我笑而不...
    開封第一講書人閱讀 56,427評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮往枣,結(jié)果婚禮上伐庭,老公的妹妹穿的比我還像新娘粉渠。我一直安慰自己,他們只是感情好圾另,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,467評論 6 385
  • 文/花漫 我一把揭開白布霸株。 她就那樣靜靜地躺著,像睡著了一般集乔。 火紅的嫁衣襯著肌膚如雪去件。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,785評論 1 290
  • 那天扰路,我揣著相機(jī)與錄音尤溜,去河邊找鬼。 笑死汗唱,一個(gè)胖子當(dāng)著我的面吹牛宫莱,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播哩罪,決...
    沈念sama閱讀 38,931評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼授霸,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了际插?” 一聲冷哼從身側(cè)響起碘耳,我...
    開封第一講書人閱讀 37,696評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎框弛,沒想到半個(gè)月后辛辨,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,141評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡瑟枫,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,483評論 2 327
  • 正文 我和宋清朗相戀三年斗搞,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片力奋。...
    茶點(diǎn)故事閱讀 38,625評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡榜旦,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出景殷,到底是詐尸還是另有隱情溅呢,我是刑警寧澤,帶...
    沈念sama閱讀 34,291評論 4 329
  • 正文 年R本政府宣布猿挚,位于F島的核電站咐旧,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏绩蜻。R本人自食惡果不足惜铣墨,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,892評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望办绝。 院中可真熱鬧伊约,春花似錦姚淆、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至超埋,卻和暖如春搏讶,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背霍殴。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工媒惕, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人来庭。 一個(gè)月前我還...
    沈念sama閱讀 46,324評論 2 360
  • 正文 我出身青樓妒蔚,卻偏偏與公主長得像,于是被迫代替她去往敵國和親月弛。 傳聞我的和親對象是個(gè)殘疾皇子面睛,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,492評論 2 348

推薦閱讀更多精彩內(nèi)容