Day 00 賽前宣言
本系列文為 iThome 鐵人賽「JS 核心重構:勇者轉職傳說」的前導宣言。深入探討 JavaScript 異步處理、作用域鏈、原型繼承與記憶體管理等底層機制,結合 RPG 勇者轉職體驗與視覺化圖解,幫助開發者打造穩健強大的前端與 Node.js 開發能力。
Day 01 控制台與第一眼
本章為 JavaScript 核心重構的第一天,我們將從最基礎卻最關鍵的「控制台 (Console)」開始。深入解析 console.log()、console.table() 與 console.dir() 等觀測語法的底層運作與適用情境,並解析為何應避免阻斷性的 alert(),建立正確的除錯思維。
Day 02 變數宣告與作用域
本章為 JavaScript 核心重構的第二天,我們將深入探討變數宣告與作用域的生存法則。在程式開發中,隨意宣告變數或無視作用域邊界是引發不可預期 Bug 的元兇。本篇將完整比較 const、let 與 var 的底層特性差異,包含區塊作用域 (Block Scope)、暫時死區 (TDZ) 的保護機制以及 typeof 型別辨析,帶領冒險者建立清晰的變數管理觀念與守衛法則。
Day 03 箭頭函式與隱形回傳
本章為 JavaScript 核心重構的第三天,我們將深入探討箭頭函式 (Arrow Function) 的極速語法與底層機制。對比傳統宣告式函式的繁複結構與提升 (Hoisting) 特性,解析箭頭函式如何利用語法簡化與隱形回傳 (Implicit Return) 達成一行俐落代碼;同時完整辨析傳統 function 與箭頭函式在 Lexical Scope 中 this 指向的本質差異,幫助冒險者擺脫沉冗咒語,掌握現代高階的極速開發技巧。
Day 04 寶箱與名單
本章為 JavaScript 核心重構的第四天,探討物件與陣列的容器差異與存取原理。了解如何運用物件的大括號與屬性標籤存放複合資訊,以及陣列的有序清單。學習傳值與傳址的基本觀念,擺脫選錯資料結構的窘境。
Day 05 記憶體傳址與副本
本章為 JavaScript 核心重構的第五天,將帶領你揭開記憶體底層的傳值 (Pass by Value) 與傳址 (Pass by Reference) 之謎。透過「影印術」與「倉庫提貨單」的比喻,解析物件分身術造成的意外連動災難,並初步介紹如何運用解構語法 (Destructuring) 建立安全的資料副本,穩固未來的不可變性 (Immutability) 基礎。
Day 06 展開運算子
本章為 JavaScript 核心重構的第六天,將帶領你破解陣列與物件的傳址詛咒。透過「爆破影印術」的比喻,解析如何運用展開運算子 (...) 瞬間斷開資料連結。本文更進一步探討淺拷貝 (Shallow Copy) 與深拷貝 (Deep Copy) 的差異及陷阱,穩固資料不可變性 (Immutability) 的實作基礎。
Day 07 記憶膠囊與閉包
本章為 JavaScript 核心重構的第七天,將帶領你揭開變數有效範圍與保護機制的秘密。透過「記憶膠囊與守護結界」的比喻,深入解析 IIFE (立即執行函式) 與閉包 (Closure) 的運作原理。教你如何建立獨立的時空來封裝資料,避免全域變數污染,穩固進階架構中的私有狀態管理基礎。
Day 08 物件導航與操作
本章為 JavaScript 核心重構的第八天,將帶領你學會如何優雅地處理龐大的物件結構。面對非有序的「混沌寶箱」,不再需要手動點名屬性。透過 Object.keys、Object.values 與 Object.entries 這三大現代化掃描儀,帶你把封閉的物件轉換為可隨意操作的陣列清單,大幅提升資料處理效率。
Day 09 陣列大戰與自動化生產線
本章為 JavaScript 核心重構的第九天,將帶領你告別手動、容易出錯的傳統 for 迴圈,引進全自動化生產線 map、filter 與 reduce 等現代陣列方法。透過這三大陣列職位,你將學會如何以「聲明式」語法來篩選、加工與歸納資料,並體會不可變性(Immutability)在專案維護中的巨大價值。
Day 10 this 變色龍盔甲
在 JavaScript 中,this 總是指向未知的對象嗎?本文圖解 this 的變色龍判定法,透過物件調用、簡易調用、箭頭函式與 call/apply/bind 契約魔法,讓你精準鎖定 this 的真實身份,避開回呼函式中的陷阱。
Day 11 類別 Class
在開發大型 JavaScript 專案時,重複手寫相似的物件是個災難。本文透過公會導師的圖解,帶你認識 Class 類別與 Constructor 規格書的概念,從手動刻劃屬性晉升為「一鍵批量生產」的高效開發模式。
Day 12 邏輯開關短路判斷
在 JavaScript 中如何擺脫繁瑣的 if/else?本文深度解析 &&、|| 與 ??(空值合併運算子)的短路判斷機制,剖析 Truthy 與 Falsy 假值陷阱,並帶你掌握數值 0 的邊界防禦,寫出兼具簡潔與安全性的高品質程式碼。
Day 13 DOM 樹大探險
如何精準抓取網頁中的 HTML 元素?本文帶你探索 DOM 樹狀結構地圖,解析 querySelector 與 querySelectorAll 的底層運作差異,掌握 NodeList 與陣列的本質區別,並靈活運用 data-* 屬性實現乾淨優雅的資料綁定。
Day 14 事件監聽與互動
如何讓網頁響應用戶的操作?本文深入剖析 addEventListener 的底層運作機制,從標靶、事件類型到回呼函式的參數拆解,詳解 Event Object 事件物件與 e.target 的定位線索,並透過 e.preventDefault() 掌控瀏覽器預設行為,實現結構與行為完美分離的互動架構。
Day 15 事件委派與冒泡
當網頁元素大量增加或動態生成時,如何避免記憶體暴增與重複綁定?本文深入解析 DOM 事件冒泡(Event Bubbling)機制與事件委派(Event Delegation)技巧,比較 e.target、e.currentTarget 與 closest() 的實戰用法,打造高效能且具備擴展性的前端事件架構。
Day 16 瀏覽器小帳本 LocalStorage
如何在網頁重整後依然保留使用者的個人化設定?本文深入解析 Web Storage 運作架構,橫向對比 LocalStorage、SessionStorage 與 Cookie 的生命週期與應用場景,掌握 setItem、getItem 存取四招與 JSON 序列化打包拆箱術,並探討 XSS 安全防護與非同步狀態同步的最佳實踐。
Day 17 時間管理 Timeout 與 Interval
如何在 JavaScript 中精準掌控時間與非同步節奏?本文深入剖析 setTimeout 與 setInterval 的運作底層,詳解 Timer ID 的捕獲與安全拆彈術(clearTimeout / clearInterval),探討冷卻時間防連點與 setTimeout(0) 的 Event Loop 排隊本質,打造穩健高效的時間管理架構。
Day 18 期中實戰 任務佈告欄
本章節為前半段修煉的期中集大成實戰!透過純原生 JavaScript 打造具備完整 CRUD(增、查、改、刪)功能的公會任務佈告欄。深度貫徹「資料驅動(Data-Driven UI)」核心心法,結合陣列操作、DOM 動態渲染與 LocalStorage 本地狀態持久化,奠定現代前端框架思維。
Day 19 事件循環 Event Loop
為什麼 setTimeout(..., 0) 不會立即執行?本文深入剖析 JavaScript 的單執行緒(Single Thread)本質與事件循環(Event Loop)核心架構,透過 Call Stack(呼叫堆疊)、Web APIs 與 Task Queue(任務佇列)的三大空間協同運作圖解,解析同步與非同步任務的執行順序與主執行緒阻塞危機。
Day 20 Promise 與非同步承諾
告別巢狀回呼地獄!本文深入拆解 JavaScript Promise 的核心機制,從 Pending、Fulfilled 到 Rejected 三大狀態轉換,結合矮人鐵匠預約券生動圖解,解析 .then() 與 .catch() 鏈式調用的傳遞靈魂,帶你優雅掌控非同步時空契約。
Day 21 Async / Await 時空暫停術
告別繁瑣的 Promise 鏈條!本文深入剖析 JavaScript 的頂級語法糖 Async / Await,透過時空暫停泡泡生動圖解,解析如何以同步語法書寫非同步代碼,並掌握 try...catch 錯誤防禦機制,帶你輕鬆駕馭非同步時空魔法。
Day 22 Fetch API 跨國物資搬運
掌握與外部伺服器連線的關鍵技能!本文詳解 JavaScript 原生 Fetch API,拆解「等包裹」與「拆包裝」的兩階段非同步流程,結合 response.ok 防呆機制與瀏覽器 Network 面板除錯心法,帶你優雅搬運遠端 API 物資。
Day 23 JSON 與防禦偵測術
面對殘缺不全的遠端 API 資料不再恐慌!深入解析 JSON 序列化與反序列化機制,掌握可選鏈結(Optional Chaining ?.)與空值合併運算子(Nullish Coalescing ??)的現代防禦偵測心法,徹底告別 TypeError 白屏危機。
Day 24 錯誤處理與復活保險甲
深入解析 JavaScript 錯誤處理機制,拆解 Try...Catch...Finally 生命週期與 throw new Error() 主動防禦心法,確保系統面對異常與網路斷線時依然穩健運作。
Day 25 結業實戰與氣象觀測站
整合非同步請求 Async/Await、Fetch API、JSON 解析、可選串連運算子(?.)與 Try...Catch 完整錯誤防禦機制,手把手打造串接 OpenWeather 真實數據的異世界氣象觀測站。
Day 26 防抖與節流
本篇文章介紹 JavaScript 中的兩大效能優化神兵:防抖 (Debounce) 與節流 (Throttle)。透過閉包與計時器的結合,我們能有效過濾無意義的頻繁觸發事件,如搜尋框輸入與捲軸滾動,大幅減輕伺服器與瀏覽器的負擔。
Day 27 資料驅動
本篇文章帶領冒險者跨越「手動操作 DOM」的舊思維,正式進入「資料驅動 (State-driven)」的現代前端架構領域。我們將探討如何將應用程式拆分為 State 與 Render,實現 UI = f(state) 的核心心法。
Day 28 React 與 JS
本篇文章將揭曉過去 30 天 JavaScript 核心修煉的最終目的。我們將把箭頭函式、解構賦值、閉包與資料驅動等基礎知識,完美映射至 React 框架的底層邏輯,讓你明白現代前端框架其實就是 JavaScript 的延伸與昇華。
Day 29 重鑄你的傳奇裝備
第29天,將純JS任務佈告欄升級為React聖劍版。透過組件化思考與資料驅動狀態管理,體驗React宣告式UI的強大威力與乾淨邏輯。
Day 30 慶功宴與新地圖
第30天完結篇,總結JS核心的轉職心法與五大階段。帶著宣告式UI與組件化思維,迎向React、TypeScript與前端工程化的未來冒險地圖。