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

文章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-1717 分鐘閱讀

用 Immer 處理不可變資料：在 produce 裡照常 push，原陣列不變

用 Immer 的 produce 改寫 push、update、pop：在回呼函數裡對 draft 做 push、指派、pop，Immer 在底層保證原陣列不變並回傳新陣列，並比較 Immutable.js 的差異。

Functional JavaScript First Steps

#frontendMasters #functionalJavaScriptFirstSteps #JavaScript #Immutability #ImmutableDataStructure

2026-10-1632 分鐘閱讀

不改原陣列的 push、pop 與 update：展開運算子、slice、map

把會原地修改的 push、pop 與索引指派改寫成回傳新陣列：push 用展開運算子，pop 用 slice(0, -1)，update 用帶索引的 map 或 slice，並留意 slice 只做淺拷貝。

Functional JavaScript First Steps

#frontendMasters #functionalJavaScriptFirstSteps #JavaScript #Immutability #Mutation

2026-10-1618 分鐘閱讀

不可變資料：用 map 取代原地修改，認識持久化資料結構

函數式不原地修改資料，而是產生新版本：用城市改名範例比較直接改陣列與用 map 回傳新陣列，再看持久化資料結構如何以樹狀結構只複製變動部分，降低複製的時空成本。

Functional JavaScript First Steps

#frontendMasters #functionalJavaScriptFirstSteps #JavaScript #Immutability #Mutation

2026-10-1525 分鐘閱讀

實作 pipe 函數：用遞迴與展開運算子把多個函數由左到右串成管線

用 head、tail 與展開運算子遞迴實作 pipe：零個函數回傳 identity function，一個就直接回傳，多個時先套用第一個再交給剩下函數的管線，免去倒著讀的巢狀呼叫。

Functional JavaScript First Steps

#frontendMasters #functionalJavaScriptFirstSteps #JavaScript #FunctionComposition #Pipe

2026-10-1515 分鐘閱讀

函數合成：用 hypeUp 範例看懂函數管線與由內而外的執行順序

函數式程式就是一個函數，靠合成小函數組成：上一個的輸出成為下一個的輸入。用 ender 與 hypeUp 範例看懂部分應用如何重用，以及巢狀呼叫跟閱讀方向相反的執行順序。

Functional JavaScript First Steps

#frontendMasters #functionalJavaScriptFirstSteps #JavaScript #FunctionComposition #Closure

2026-10-1427 分鐘閱讀

用閉包做部分應用：把 diamondPattern 拆成鎖定顏色或寬度的函數

閉包練習：用 makeMonotonePattern、makeFixedWidthPattern 回傳鎖定顏色或寬度的函數，把三個參數的 diamondPattern 部分應用成可重用的圖案函數，改寫成箭頭函數。

Functional JavaScript First Steps

#frontendMasters #functionalJavaScriptFirstSteps #JavaScript #Closure #PartialApplication

2026-10-1423 分鐘閱讀

閉包（Closure）：從 makeAdjectifier 看懂部分應用與柯里化

閉包讓內層函數記住定義時外層作用域的值，離開作用域後依然記得。用 makeAdjectifier 與 curryGreet 範例，看懂部分應用與柯里化怎麼鎖定參數、做出可重用的函數。

Functional JavaScript First Steps

#frontendMasters #functionalJavaScriptFirstSteps #JavaScript #Closure #PartialApplication

2026-10-1328 分鐘閱讀

遞迴版 reduce 與 reducer 函數：用累加器寫出 sum 與 max

先讀懂遞迴版 reduce 怎麼把 initialValue 當累加器、對 tail 反覆遞迴，再寫出 sum 與 max 的 reducer，處理 undefined 的陷阱，並把要記住的東西變成函數輸入。

Functional JavaScript First Steps

#frontendMasters #functionalJavaScriptFirstSteps #JavaScript #HigherOrderFunction #Recursion

2026-10-1316 分鐘閱讀

用遞迴實作 map：把轉換後的 head 接上 tail 的遞迴結果

延續遞迴版 filter 的寫法重新實作 map：base case 同樣是空陣列，遞迴情況對 head 套用轉換函數，再用 concat 接上對 tail 遞迴呼叫 map 的結果，全部寫在一行。

Functional JavaScript First Steps

#frontendMasters #functionalJavaScriptFirstSteps #JavaScript #HigherOrderFunction #Recursion

2026-10-1223 分鐘閱讀

用遞迴實作 filter：靠 head、tail、concat 寫出函數式高階函數

不用內建 filter 與迴圈，靠遞迴與 length、head、tail、concat 重寫 filter：從空陣列的 base case 寫起，用三元運算子決定第一個元素的去留，再遞迴處理其餘元素。

Functional JavaScript First Steps

#frontendMasters #functionalJavaScriptFirstSteps #JavaScript #HigherOrderFunction #Recursion

1 2 3 4...36