程式碼之外，還有生活的藝術前端工程師 / 攝影 / 生活紀錄

文章355
標籤208

標籤查看更多

分類查看更多

Advanced Web Dev Quiz (27)
Deep JavaScript Foundations v3 (69)
Full Stack Fundamentals (47)
Functional JavaScript First Steps (21)
JavaScript Hard Parts v3 (50)
JS地下城 (5)
Testing Fundamentals (27)
TypeScript Fundamentals (28)
Web Performance Fundamentals (41)
You Might Not Need a Framework (32)
學習經歷 (2)
生活亂談 (2)
程式筆記 (4)

Dev：前端技術與學習筆記

技術分享、踩坑紀錄和筆記，不定期更新

353 篇

2026-10-1217 分鐘閱讀

高階函數與一級函數：用三明治看懂 filter、map、reduce 的差別

高階函數與一級函數：函數能像字串、數字一樣當成值傳來傳去，接收或回傳函數的就是高階函數。用三明治比喻 filter、map、reduce 各自接收的函數與回傳結果的差別。

Functional JavaScript First Steps

#frontendMasters #functionalJavaScriptFirstSteps #JavaScript #HigherOrderFunction

2026-10-1248 分鐘閱讀

Claude Code Status Line：賞心悅目地顯示 context、cache、用量

自訂 Claude Code status line 的三行設定：目錄與 git 狀態、context 使用率、prompt cache 冷熱與失效原因，加上 5 小時與 7 天用量上限，附完整腳本。

程式筆記

#ClaudeCode #StatusLine #PromptCaching #RateLimit

2026-10-1120 分鐘閱讀

遞迴畫圖練習：用 SVG 與模板字串畫出層層交替的菱形圖案

遞迴畫圖練習：寫一個回傳 SVG 字串的純函數 diamondPattern，用模板字串組出正方形，每層互換顏色、縮小寬度，再用 g 元素的 transform 旋轉與平移，畫出內嵌菱形。

Functional JavaScript First Steps

#frontendMasters #functionalJavaScriptFirstSteps #JavaScript #Recursion #PureFunction

2026-10-1113 分鐘閱讀

遞迴的效能問題：call stack 如何拖慢遞迴，以及尾呼叫最佳化

遞迴的效能問題：每次呼叫函數都會在 call stack 加上新的 stack frame、配置新記憶體，遞迴太深可能讓引擎當掉或變慢。用費波那契實測差異，再認識尾呼叫最佳化。

Functional JavaScript First Steps

#frontendMasters #functionalJavaScriptFirstSteps #JavaScript #Recursion #Performance

2026-10-1017 分鐘閱讀

費波那契數列練習：用 for 迴圈與遞迴各寫一次 Fibonacci

費波那契數列練習：同一題分別用命令式 for 迴圈與遞迴實作。看懂迴圈版如何用 previous、current 追蹤位置，遞迴版又如何照著數列定義寫出 base case 與遞迴呼叫。

Functional JavaScript First Steps

#frontendMasters #functionalJavaScriptFirstSteps #JavaScript #Recursion #Iteration

2026-10-1013 分鐘閱讀

用遞迴計算階乘：比較 while 迴圈與遞迴寫法，哪個比較好讀？

階乘是函數式程式設計練習遞迴的經典題目。對照 while 迴圈與遞迴兩種 factorial 實作，看懂兩者如何算出同一個結果，以及遞迴為什麼讀起來比較燒腦、需要刻意練習。

Functional JavaScript First Steps

#frontendMasters #functionalJavaScriptFirstSteps #JavaScript #Recursion #BaseCase

2026-10-0910 分鐘閱讀

迭代 vs 遞迴：用遞迴取代 for 迴圈，看懂 base case 與無狀態

迭代 vs 遞迴：for 迴圈靠變數隨時間改變的狀態重複執行，函數式改用遞迴呼叫自己、每次傳入不同輸入。用 sum 範例比較兩者，看懂 base case 如何防止 stack overflow

Functional JavaScript First Steps

#frontendMasters #functionalJavaScriptFirstSteps #JavaScript #Recursion #Iteration

2026-10-0929 分鐘閱讀

隔離不純：把副作用推到程式最外層，用 SVG 渲染練習拆出純函數

隔離不純：把操作 DOM 等副作用推到程式最外層，核心保持純粹。用 SVG 練習把命令式程式碼拆成 pureGetSVG 與 impureRenderApp，看懂純函數為何不能呼叫不純函數。

Functional JavaScript First Steps

#frontendMasters #functionalJavaScriptFirstSteps #JavaScript #PureFunction #SideEffect

2026-10-0826 分鐘閱讀

純函數練習：判斷 12 個函數純不純，看懂副作用與可變陣列陷阱

純函數沒有副作用且具決定性。透過 12 個函數練習判斷：內建 Date 為何仍純，讀檔與 console.log 為何不純，可變陣列的陷阱，內部 mutation 為何無妨，與不純的傳染。

Functional JavaScript First Steps

#frontendMasters #functionalJavaScriptFirstSteps #JavaScript #PureFunction #SideEffect

2026-10-0812 分鐘閱讀

純函數（Pure Function）是什麼？用 greet 範例看懂副作用與外部狀態，把不純的函數改寫成純函數

函數式程式設計歸結起來就是純函數：只看輸入、只回傳輸出，不讀取外部狀態，也不對外部世界產生副作用。透過 greet 範例拆解讀取外層變數、console.log 與沒有 return 為什麼不純，以及如何把外部變數改成參數、改用 return 回傳結果，讓同樣的輸入永遠得到同樣的輸出，不受外部變動影響。

Functional JavaScript First Steps

#frontendMasters #functionalJavaScriptFirstSteps #JavaScript #PureFunction #SideEffect

1 2 3 4 5...36