本文同步分享於個人部落格：Liwen Chiou | Digital Architect & Full-Stack Engineer

📜 這裡的修煉規則：

孩子，在踏上今日的領地前，先坐下來喝杯酒吧。
修煉的路學長很長，別急著奔跑，先聽聽這份卷軸裡的古老叮嚀。

我在每一站的盡頭都為你鋪設了 「實戰演武場 CodePen」。那不只是程式碼的拼湊，而是你在這場暴風雨中，試圖用邏輯點燃的一顆星火。
成功突圍後，別忘了帶著你的戰利品回到 「QuestBoard 佈告欄」。在那裡，你會發現自己從不孤單，公會的夥伴們都正舉杯等待你的歸來。

記住...

「 導師看重的從來不是你的劍法有多華麗，而是當你被邏輯擊潰、滿身泥濘後，依然選擇握緊理性的劍柄，再次向真相發起衝鋒的勇氣。 」

🛡️ 【公會大廳：導師的修煉導讀】

「導師，我終於拿到了遠方王國寄來的包裹。但打開一看，裡面的說明書全是奇形怪狀的符號（JSON），而且有時候包裹裡缺了藥水、有時候缺了地圖。只要我一讀那些漏掉的東西，我的程式碼就立刻崩潰（TypeError）！我有什麼辦法能提前預知危險嗎？」

我拍了拍桌上的古老手帳，上面記載著現代 JS 職人的最強防禦術。

「孩子，首先你要理解異世界的語言 JSON。它雖然簡潔，但也冷酷。至於你說的崩潰問題，那是因為你在伸手去抓東西前，沒有先用 『遠程偵測術 (Optional Chaining)』 確認東西在不在。今天，我們要教你如何在殘缺的資料中平安穿梭，並學會用 『備案計畫 (Nullish Coalescing)』 給資料一個體面的退路。」

💡 【導師講義：底層真相探究】

1. JSON：異世界的通用傳送壓縮檔

JSON (JavaScript Object Notation) 是一種純文字格式。為了傳輸方便，所有物件都會被轉成一串「長得像物件的字串」。

• JSON.parse()：把字串拆開，變成 JS 物件（你在 Day 22 用的 .json() 其實就是這個動作的非同步版）。
• JSON.stringify()：把你的物件封裝成字串，準備寄出去。

2. 遠程偵測術：可選鏈結 ?. (先看再摸)

這是這兩年最救命的發明。以前我們要讀多層物件，得寫長長的 if (a && a.b && a.b.c)。

現在，你只要在屬性前加個 ?：

• 勇者?.背囊?.藥水：
  • 如果「背囊」不存在，它會直接回傳 undefined，而不是讓你的程式碼當機。

3. 備案計畫：空值合併 ??

當資料回來是 null 或 undefined 時，我們通常需要一個預設值。

|| (OR)

• 觸發條件：只要左側是 falsy 值
  • 0
  • ""
  • false
  • null
  • undefined
  • NaN
• 缺點：
  • 0 可能是合法資料
  • "" 可能是合法資料
  • 仍然會被替換成預設值

?? (Nullish Coalescing)

• 觸發條件：
  • null
  • undefined
• 優點：
  • 保留 0
  • 保留 false
  • 保留 ""
  • 只有真正沒有值時才使用預設值

🛡️ 【本日圖解心法：防禦偵測術】

導師的圖解心法： 想像你在黑暗的山洞裡尋寶（讀取深層物件）。如果你直接伸手（傳統讀取），可能會摸到空處而摔下懸崖（Runtime Error）。如果你發動偵測波（?.），它會先回彈告訴你前面的路斷了，讓你安全地停下來。

⚔️ 【戰術對抗：學長與學弟的代碼對決】

招式示範：讀取殘缺的勇者資料

❌ 冒險學弟：鐵頭硬衝派 (舊式寫法)

• 負能量評級：🔴 代碼冗長 / 🔴 容易漏寫判斷導致崩潰

// 如果資料裡沒寫 address，這裡就直接掛掉
if (hero && hero.info && hero.info.address) {
  console.log(hero.info.address.city);
}

✅ 勇者學長：優雅直覺派 (現代防護)

• 利潤評級：🟢 一行搞定 / 🟢 轉職高級開發者標配

// 即使沒有 info 也不會爆炸，只會得到 undefined
const city = hero?.info?.address?.city ?? "神祕遺忘之城";
console.log("當前位置：", city);

🛖 【營火叮嚀：導師的經驗談】

孩子，導師當年最慘的紀錄是在大型專案中，因為少寫了一個屬性檢查，導致整個網頁白屏（White Screen of Death）。

記住：「API 的回傳是不穩定的，但你的代碼必須是穩定的。」
從今天起，養成的習慣。

🎯 【實戰演武場】

• 📜 本日實戰任務：殘缺資料的救援行動 (CodePen)
• 🛡️ 任務達成證明：QuestBoard 公會報到處

⚔️ 任務鑑定條件：

1. 完成 📜 本日實戰任務 (CodePen)。
2. 將 CodePen 網址貼至 QuestBoard，並回填鑑定報告：
   • 初心者：偵測發動術 (成就感發掘)：
     • 1. 你是否成功使用 ?. 避免了讀取不存在屬性時的紅字報錯？
   • 冒險者：預設值陷阱 (理性挑戰)：[⚡ 觀念辨析]
     • 1. 測試 const level = 0 || 10; 與 const level = 0 ?? 10; 的結果有什麼不同？為什麼這對遊戲開發很重要？

📚 【圖書館卷軸：延伸學習】

• 精深研究： MDN 可選鏈結 ?.