iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
佛心分享-SideProject30

看得到的演算法:用 Vue 3 打造演算法互動視覺化平台 系列

身為前端工程師,平常開發時經常使用 `find`、`filter`、`sort` 等 JavaScript 內建方法,卻很少真正了解背後的演算法與效率差異。

因此這次鐵人賽,我想挑戰自己過去比較不熟悉的「演算法」,並結合熟悉的 **Vue**,製作一個「演算法互動視覺化平台」。

希望透過邊學、邊做、邊記錄的方式,更理解演算法的運作,因此這30 天內預計從基礎概念開始學習,逐步實作 Bubble Sort、Quick Sort 與 Dijkstra Algorithm,並將比較、交換、尋找最短路徑等執行過程呈現在畫面上。

參賽天數 21 天 | 共 21 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文
DAY 11

【Day 11】遞迴到底跑去哪了?用 Call Stack 看懂程式執行順序

上一章學到遞迴(Recursion)會在函式裡面不斷呼叫自己,但我一直有個疑問: 函式被呼叫之後,不是馬上就會執行嗎?那為什麼還會有「堆疊」的現象? 我原本以為...

DAY 12

【Day 12】別人在切柚子,我在切 Array:從 Pivot 開始理解 Quick Sort

先祝大家中秋節快樂!🌕 連假開始,別人在切柚子,我也在切—— 只不過我切的是 Array。😂 前面學 Bubble Sort 時,是透過相鄰兩個數字不斷比較...

DAY 13

【Day 13】用 TypeScript 寫出 Quick Sort

昨天理解 Quick Sort 的運作方式後,今天決定自己試著把流程轉成程式碼。 先簡單回顧 Quick Sort 幾個重要概念: Pivot:選擇一個基準...

DAY 14

【Day 14】Vue 實作 — Quick Sort 快照只記錄「位置」就夠了嗎?

昨天終於用 TypeScript 寫出了 Quick Sort,今天準備把它放進 Vue,讓排序過程像之前的 Bubble Sort 一樣動起來。 前面實作 B...

DAY 15

【Day 15】Vue 實作 — Quick Sort 動起來之前,哪時候要進行快照記錄?

昨天已經先整理好 Quick Sort 一張快照需要記錄哪些狀態,今天就要回到 Day 13 寫好的 Quick Sort ,開始思考另一個問題: 到底要在哪些...

DAY 16

【Day 16】Vue 實作 — 開始做 Quick Sort 動畫後,我決定換一種寫法

前兩天已經整理好 Quick Sort 的「快照要記什麼」以及「什麼時候記」,原本以為今天終於可以直接開始實作動畫。 但真的開始寫之後,我才發現一個問題: 我原...

DAY 17

【Day 17】Vue 實作 — Quick Sort 的快照,比我想像中還要複雜

昨天把 Quick Sort 改成 Lomuto Partition 後,今天終於可以回頭實作 Day 14、15 規劃的快照。 原本以為前面已經想好「快照要記...

DAY 18

【Day 18】莫名有種親切感的 Graph,但它到底是什麼?

終於來到新單元啦!前面一路從 Bubble Sort、Quick Sort 學到遞迴,今天要開始認識一個新的資料結構:Graph(圖)。 Graph 對我來說其...

DAY 19

【Day 19】Graph 畫完之後呢?認識兩種常見的表示方式

上一章認識 Graph 之後,我已經知道可以透過 Vertex(頂點) 和 Edge(邊) 表示資料之間的關係。 不過昨天都是先理解 Graph 是怎麼畫出來,...

DAY 20

【Day 20】從 A 到 B 怎麼走最快?先理解「最短路徑問題」

前面認識 Graph 時有提到,Edge 除了表示兩個 Vertex 之間有連接關係之外,還可以加上 Weight(權重),用來表示距離、時間或成本。 但今天遇...