11-1 JSON 是什麼？為什麼比 XML 好？

Original: https://course.andys.pro/Javascript-Intro/11-1-what-is-json-why-is-it-better-than-xml/

講義

1. 什麼是 JSON？

• 全名：JavaScript Object Notation (JavaScript 物件表達法)。
• 定位：一種輕量級的資料交換格式，以「純文字」為基礎。
• 優點：
  • 相容性高：幾乎所有的程式語言都支援 JSON。
  • 易於閱讀：結構與 JavaScript 物件極為相似。
  • 傳輸效率高：比起 XML，JSON 的資料體積更小，網路傳輸更快。

2. JSON vs XML

在以前，網路主要使用 XML 格式（類似 HTML 的標籤結構）來傳輸資料，但 XML 標籤過多導致資料龐大且解析緩慢。JSON 出現後，因其簡潔的特性，成為現代 Web 開發的主流。

3. JSON 的嚴格語法規則

雖然 JSON 看起來像 JavaScript 物件，但它更為嚴謹：

• 必須使用雙引號 ""：所有的「鍵」(Key) 以及「字串值」(Value) 都必須使用雙引號包裹，不能使用單引號。
• 資料型別：支援數字 (Number)、字串 (String)、布林值 (Boolean)、空值 (Null)、陣列 (Array) 與物件 (Object)。
• 逗號限制：最後一個屬性後面 不可以 多加逗號。

4. 複合結構與資料選取

JSON 可以進行多層嵌套（例如陣列裡面有物件，物件裡面又有陣列）：

{
  "superheroes": [
    {
      "name": "Molecule Man",
      "powers": ["Radiation resistance", "Turning tiny"]
    }
  ]
}

• 存取範例：若要取得第一位英雄的第二個能力，路徑為：data.superheroes[0].powers[1]。

影片逐字稿 (AI 生成)

好 我們來到了11章我們現在開始來講JSON那JSON主要他的名稱是來自於JavaScript Object Notation他是一個物件的表達法他是一個輕量的資料交換語言那其實大家覺得很奇怪說為什麼JSON還是一個新的語言他其實他是一個就是類跟JavaScript一樣的物件然後他把它變成是一個文檔那為什麼要這樣子做呢?就是為什麼要用一個新的文檔的格式原因我們要回到就是在以前的歷史發展進程就是說以前的寫在傳資料的時候其實是用XML就是有HTML那有另外一種在傳資料叫做XML那XML它長的就是像這樣它是有一個Object然後它有Property裡面有Key 有Number然後有然後後面有一個Property有KeySharperName然後StreamJunkDoll它就是把所有的它的Type還有它的數值這些東西還有它是有Property全部這樣子去傳那因為網路其實沒有很快可是你要傳的資料量又那麼大可是你要傳的資料量又那麼大那就是所以以前網頁都很慢嘛然後一直都跑不快那後來大家就是都寫JS寫多了以後呢或是大家都用JS開始在網頁上用JS然後就可以用JSON的格式就可以變成這樣子傳的東西又少然後電腦也可以看得懂然後效能是一樣的所以它有幾個優點它相容性高它格式容易理解因為如果你會JavaScript你就很容易可以理解閱讀和修改都還很方便然後它可以支援的是Numbers,Stream,Booling,Nuals然後Array那都可以就很多程式用JS都可以來改JSON那它是一個純文字格式所以在後面11-2和11-3我們就會教你就是有時候要注意就是你看起來它好像是一個Object可是實際上你要把它從文字格式轉換成JS的物件格式轉換成物件然後再來用用完了以後你要傳的時候你要再把它壓回成JSON再傳好所以它源自於JavaScript那就是現在網頁基本上都是用JSON在做然後它的語法是什麼呢它的語法它是用一個大括號那你看到大括號是不是覺得很親切因為它就像是一個Object一樣那裡面呢有Key和ValueKeyValue大家還記得吧KeyValue就是這是Key這是Value那有一個地方大家要注意喔就是要用雙引號把它刮起來它會比較嚴謹一點就是它嚴謹的點是在於說假如你有因為它是把它壓成文本格式所以你的Key都要都要雙引號起來然後你的Dot點這邊要Dot點Dot點然後這邊就不能有Dot點然後最後面這邊不能多Dot點因為它比較嚴謹一點好那陣列是用括號的方式來存然後這邊都是用雙引號然後這邊都是用雙引號然後這邊有個建議就是說建議不要重複那就是基本上就是不要重複那這邊有提到就是說比如說就像是就算是你是一個Object然後你有你的Key是012你在存的時候你還是要把它雙引號雙引號起來這樣子好那可以存數字字串布林子array還有誤解好那語法大概是長是像這樣然後有name啊這些東西好所以像我們在這邊其實是重新再複複習一次就是說你看這邊是一個superhero可是它實際上它是一個array對不對array裡面有兩個object大家這樣可以看得懂嗎方框框是array對不對好第0個是前面這一坨第1個是後面這一坨所以它第0個可以得到一個第1位超級英雄那它第1個它index為1就是第二個這個那它的age就是從這個object裡面再去拿這個39拿到39那它因為powers它這邊有powers然後這邊powers裡面有好幾種能力然後這邊又是一個array然後第0個array就是medium time punchok那我們要來寫一下我們把它抄一下然後我想要我們這邊是11-111-1-1js然後我們把它我叫它抄它所以我要放在a這樣子比較好抄這樣子然後它其實是一個我這邊是用object我這邊是直接呃比如說追生追生追生追生然後我們裡面它其實我們這邊只是先來demo讓大家理解就是怎麼樣去表然後這邊有一個然後我們有兩個物件然後這邊有namemolecule name我們這邊我們這邊我們這邊會用點我們這邊以及編號我們這邊我們這邊這邊是一個樹立樹立也沒有很多可以變超小我先把這邊關掉好 這邊是第一個人 然後再來是第二個然後我想要把這邊直接卡過來好了這樣改比較快然後這個是可以可以可以可以可以所以點點點點點點點點點點點點點我們存起來好 所以我們這邊有一個jsonx好 所以我們這邊可以log就是jsonx的喔他叫superhero sorry那所以我們這邊應該叫做superhero然後我們這邊superhero然後的第0個然後我們存檔 跑一下他就跑出這樣 這是一個object對不對然後再來我可以去拿他的什麼這邊是object去access他的age然後我們跑那就可以拿到29這個數字再來呢我們拿就是index為1就是第二個這個人然後他的powers那因為每一個人他裡面他是什麼這個power他是objectobject就是powers然後我們拿這個去拿到這個然後裡面呢他是什麼他是一個array那這個array裡面有012然後我們拿第0個所以就會是millionmilliontonpunch欸 我忘記存檔記得要先存檔喔milliontonpunch好這個是這邊的call好的 那這邊是11之1我們就不要再拿到這一個小封面然後我們把這個好看裡面就很容易整個抓緊在這裡我們把這個抓緊抓緊抓緊抓緊抓緊抓緊抓緊抓緊抓緊抓緊抓緊

影片逐字稿largev2

好,我們來到十一章,我們現在開始來講JSON那JSON主要它的名稱是來自於Javascript Object Notation它是一個物件的表達法那是一個輕量的資料交換語言那其實大家會覺得很奇怪說,為什麼JSON還是一個新的語言它其實它是一個類跟Javascript一樣的物件然後它把它變成是一個文檔那為什麼要這樣子做呢?就是為什麼要用一個新的文檔的格式原因我們要回到就是在以前的歷史發展進程就是說以前的寫,在傳資料的時候其實是用XML就是有HTML了嘛,對不對那有另外一種在傳資料叫做XML那XML它長得就是像這樣它是有一個object,然後它有property裡面有key,有number然後後面有一個property,有key,shopper name然後string,john doe它就是把所有的它的type,還有它的數值這些東西還有它是有property,全部這樣子去傳那因為網路其實沒有很快可是你要傳的資料量又那麼大那就是所以以前網頁都很慢嘛然後一直都跑不快那後來大家就是都寫JS,寫多了以後呢或是大家都用JS,開始在網頁上用JS然後就可以用JSON的格式就可以變成這樣子,傳的東西又少然後電腦也可以看得懂然後效能是一樣的所以它有幾個優點它相容性高,它格式容易理解因為如果你會JavaScript你就很容易可以理解閱讀和修改都還很方便然後它可以支援是number,string,boolean,null然後array那都可以就很多程式用JS都可以來改JSON那它是一個純文字格式所以在後面11-2和11-3我們就會教你有時候要注意就是你看起來它好像是一個object可是實際上你要把純文字格式轉換成JS的物件格式轉換成物件,然後再來用用完了以後你要傳的時候你要再把它壓回成JSON再傳所以它源自於JavaScript那就是現在網頁基本上都是用JSON在做那它的語法是什麼呢它的語法是用一個大括號那你看到大括號是不是覺得很親切因為它就像是一個object一樣那裡面有key和valuekey value大家還記得吧key value就是這是key這是value那有一個地方大家要注意喔就是要用雙引號把它刮起來它會比較嚴謹一點就是它嚴謹的點是在於說假如你有因為它是把它壓成文本格式所以你的key都要雙引號起來然後你的逗點這邊要逗點逗點然後這邊就不能有逗點喔所以後面這邊不能多逗點因為它比較嚴謹一點好那這類是用括號的方式來存然後這邊都是用雙引號好這邊有個建議就是說建議不要重複那基本上就是不要重複那這邊有提到就是說比如說就像是就算是你是一個object然後你有你的key是012你在存的時候你還是要把它雙引號雙引號起來這樣子好那可以存數字字串布林子array還有物件好那語法大概是長的是像這樣然後有name阿這些東西好所以像我們在這邊其實是重新再複習一次就是說你看這邊是一個superhero可是它實際上它是一個arrayarray裡面有兩個object大家這樣可以看得懂嗎方框框是array對不對好第0個是前面這一坨第1個是後面這一坨所以它第0個可以得到一個第一位超級英雄那它第1個它index為1就是第2個這個那它的age就是從這個object裡面再去拿這個39拿到39那它因為powers它這邊有powers然後這邊powers裡面有好幾種能力然後這邊又是一個array然後第0個array就是million time punchok那我們要來寫一下嗎我們把它抄一下然後我想要我們這邊是11-111-1-1.js然後我們把它我想要抄它所以我要放在這樣子比較好抄然後它其實是一個我這邊是用object我這邊是直接比如說json.exe然後我們裡面我們這邊只是先來demo讓大家理解就是怎麼去用然後這邊有一個然後我們有兩個物件然後這邊有namemolecule name然後這邊是一個這邊是一個樹立然後這樹立裡面有radiation可以變超小radiation.cg好那我先把這邊關掉好這邊是第1個的然後再來是第2個然後我想要把它這邊直接卡過來好了這樣改比較快好然後這個是moleculemolecule.cgmolecule.cgmolecule.cg39歲39歲39歲39歲39歲39歲molecule.cgmolecule.cgmolecule.cgmolecule.cgmolecule.cgmolecule.cgmolecule.cg存起來好所以我這邊有一個json.exe好好所以我們這邊可以log就是json.exe的喔他叫superhero喔sorry那所以我們這邊應該叫做superherohero然後我們這邊superhero然後的第0個然後我們存檔跑一下他就跑出這樣這是一個object對不對然後再來我可以去拿他的什麼這邊是object去access他的age然後我們就可以拿到29這個這個數字再來呢我們拿第就是index為1就是第2個這個人然後他的powers那因為每一個人他裡面他是什麼這個powers他是object嘛object就是powers去拿到這個去拿到這個然後他裡面呢他是什麼他是一個array那這個array裡面有012然後我們拿第0個所以就是是millionthompunch欸我忘記存檔了要記得要先存檔喔好這個是這邊的code好的那這邊是11-1