JSON 的方法和型別

有時候在學習的時候，最怕就是遇到一個問題越解越混淆的狀況，原本只是一個小小的問題，卻越發不可收拾，努力了幾個小時決定上網問人，好險都能在好心人的幫助下，釐清自己的一些觀念。

今天試著接 API ，對於教學範例的 API 都是結構較於單純的 JSON ，自己上網找到想接的巴黎開放數據，資料結構卻很複雜，包了好幾層物件、陣列，在一一抓出來後在迴圈的使用上又有點生疏，然後在休息的時候找到一個範例，剛好講到處理 JSON 的一些方法，然後就照著範例丟到瀏覽器的開發工具，然後無限迴圈就開始了。

先來釐清幾件事：
MDN JSON.parse() 方法把會把一個 JSON 字串轉換成 JavaScript 的數值或是物件。

MDN JSON.stringify() 方法將一個 JavaScript 物件或值轉換為 JSON 字串

MDN JSON 是一種語法，用來序列化物件、陣列、數值、字串、布林值和 null 。它基於 JavaScript 語法，但與之不同：JavaScript 不是 JSON，JSON 也不是 JavaScript。

JSON 物件包含兩個方法: 用於解析 JavaScript Object Notation (JSON) 的 parse() 方法，以及將物件/值轉換為 JSON 字串的 stringify() 方法。除了這兩個方法, JSON 這個物件本身並沒有其他作用，也不能被呼叫或者作為建構式函式呼叫。

讓我混亂的範例是這樣的：

const json = {
  name: 'jason',
  age: '23',
  phone: '0922',
};

// 排除 age
const obj = JSON.parse(json, (key, value) => {
  if (key === 'age') return undefined;
  return value;
});

//{name: "jason", phone: "0922"}

丟到 Chrome 的開發工具的 console 發現出錯 Uncaught SyntaxError: Unexpected token o in JSON at position 1，想說有可能是哪個地方出問題，想把它修好，然後一直修不好。

去 MDN 看 JSON.parse()的範例，但範例是直接把整個物件外加上括號'丟進去JSON.parse()裡面，但我想要的是把物件加上括號放進去一個變數，在當成參數帶進去JSON.parse()裡面卻一直出錯，一樣是Uncaught SyntaxError的錯誤，然後到六角的 slack 去問，很多人熱心解答，也發現我傻傻分不清楚JSON.parse()裡參數應該是字串，而在過程中，又發現 Chrome 的 console，會自己改樣子，像是：

const json = {
  name: 'jason',
  age: '23',
  phone: '0922',
};
console.log(json);
// {name: "jason", age: "23", phone: "0922"}

原本key有的字串型態，都不見了！又一個自己不懂的問題。怎麼解釋這個現象？

JS 強制轉型有兩種

在 slack 上有人建議推薦看這篇 Summer 的你懂 JavaScript 嗎？#8 強制轉型（Coercion）嚇出一身汗，越發現自己處於「不知道自己不知道」的狀態下。原來 JavaScript 裡的強制轉型，明的暗的轉型都應該無時無刻的注意，否則這些強制轉型帶來的副作用，應該會讓人鬱悶。

接著在 slack 上也有人一一跟我詳解，是我把字串和物件搞混了，的確，我沒注意到許多方法的參數示意定要某種型別這件事，還有人寫了範例給我，真的超感動的。

繼續在 Chrome console 測試，結果越試越亂，越覺得是不是太久沒關機，電腦開始秀逗了（其實是我自己！）。決定關機出去走一走，回來煮完吃完飯後繼續，很想搞懂真正的「JSON」格式應該什麼樣子，為什麼要使用 JSON 這兩種方法，找著找著就找到這篇 MIS 腳印的JSON 格式與 JavaScript 解析教學範例看到這段：

// 宣告字串須使用 '' 括起來，否則就會變成是 JavaScript object 了
// 如在不同行必須在每行結尾處加上 \，否則會產生 SyntaxError
var jsonString =
  '{ \
    "number": "1020501", \
    "name": "小傑", \
    "age": 32, \
    "sex": "M", \
}';

然後照著範例的作法，在每行尾部加上\與在物件前後使用'將物件框起來，就可以將此變數 jsonString帶進JSON.parse()裡當參數了。但為什麼？如果有一大堆資料需要轉，這樣一行行加不會很費時嗎？

記得之前也看了一篇 MIS 腳印的文章，或許是寫作風格的不同，他的文筆比較容易理解，解釋的也很清楚。這部分的達其實也是自己需要加強的，也許自己在釐清問題和發問時，都不夠詳細，才會有時問的時候覺得沒有描述的很清楚，回應自然無法真的解決我想解決的問題。

我想寫程式就是這樣吧，既然是要和機器溝通就得講的清清楚楚，一點模糊地帶都不允許，這或許也是磨練自己一向太感性或隨意的問題，把寫程式當設計來做可行不通，切記。

常常想起大哥的話，在得知我要轉職前，身為資深工程師的他說：「妳確定你要走這條路？妳到底知不知道解 BUG 的辛苦？」我當時確實是不知道啊！但是當我可以在 42 熬了一個月都為了不懂的事情而在那裡試著理解，就想自己對此應該是有耐性和熱忱的，或許需要的時間很多，或許自己投入的時機也不太對，但是自己是個容易忘記辛苦的人，所以，就讓我繼續下去吧。