# ⒽJs-Json格式裏物件跟陣列的注意事項 ## :bulb: 到底Json是什麼 >Json就是以文字為基底去儲存和傳送簡單結構的資料.加上他是純文字格式,更好簡單跟其他程式溝通或交換資料. >優點在於 >*相容性高,格式支援多 如(==JS的基本型別 和 物件型別==) >*許多程式都支援函式庫讀取或修改 ## :bulb:Json是如何應用的 >比方:==線上產品縮圖== >JS透過Ajax方式將ID傳送到伺服器端,而server收到id後, >會將其資料屬性如價格,描述編成Json資料,再回傳瀏覽器 >JS收到Json資料,會把其解碼顯示在網頁上 >==透過網頁將資料傳到伺服器,過程會把post跟get編成Json格式== ## :bulb:Json如何取值的呢? >![](https://hackmd.io/_uploads/SJ_9eR88K.png) >比方我在物件裡面新增了001這個屬性 >但console.log(home.001)卻都無法取值出來? >這就說到了關鍵 >Json物件取值有一定格式 >正確格式為 >> ### ==console.log(home["001"]);== >> ### 也就是無法用點直接取值的時候,則用陣列包字串格式 ## :bulb:Json跟XML區別 > ### Json範例(主要使用在 C, C , C#, Java, JavaScript, Perl, Python) >JSON(JavaScript Object Notation)一種輕量級的資料交換格式 >> ### ==Json格式範例== ```var json = '{"name":"Justin","age":knock-knock,"childs":[{"name":"Emily","birthdaydate":"0221"}]}'; #### 排版後 { "name":"Emily(my-niighbor)", "age":"knock-knock", "childs":[ { "name":"Emily", "birthdaydate":"0221" } ] } ``` >### XML範例主要用在PHP >>XML是標準通用標記語言 (SGML) 的子集,非常適合 Web 傳輸。XML 提供統一的方法來描述和交換獨立於應用程式或供應商的結構化資料。 >### ==XML格式範例== ``` <data> <student> <name>Emily(my-niighbor)</name> <age>:knock-knock</age> <firstname>Emily</firstname> <report> <subject> <name>Math</name> <score>80</score> </subject> <subject> <name>English</name> <score>90</score> </subject> ``` ## :bulb:從官方網站看出Json格式裡物件跟陣列的差別 ### 首先看到物件格式 ![](https://hackmd.io/_uploads/Hy_6HrLLK.png) ### 再看到陣列格式 ![](https://hackmd.io/_uploads/H1bQUrU8K.png) ### 是不是有一種~~沙小~~傻笑的感覺,其實簡單點來看就是 > #### Object{string0:value,string1:value,string2:value,...;} > >陣列呢? >格式就是["Karen","有廖","Natsu","ZY","Keep"] 同性質東西集合 ## :bulb:Json格式的兩個重點 > #### 1.要特別注意的是,Json Object的==鍵值,一定是用“文字”==!~ 比方{0:"Karen",1:"Steve",2:"Lien"}//錯誤格式 正確{"0":"Karen","1":"Steve","2":"Lien"}//正確格式 > #### 2.在Json格式文件中,是不能用注解的~~ > #### 3.Json格式文件有些字元必須以跳脫的(escape character)方式呈現 ![](https://hackmd.io/_uploads/SkeLcSLLK.png) ## :bulb: 補充 > #### 假如物件要轉換到陣列,那麽key的資料就不會呈現,只留下value; > #### 假如陣列要轉換到物件,那就是對每個key值編上value,但長的像是把所有key值合并在一起。 > #### “==變數沒有型別 值才有==” >#### 參考 >>Kuro的It幫幫忙 >>https://ithelp.ithome.com.tw/articles/10190962 >>Json官方網站 http://www.json.org >>小惡魔 https://blog.wu-boy.com/2011/04/%E4%BD%A0%E4%B8%8D%E5%8F%AF%E4%B8%8D%E7%9F%A5%E7%9A%84-json-%E5%9F%BA%E6%9C%AC%E4%BB%8B%E7%B4%B9/