鐵人檔案
身為前端工程師，平常開發時經常使用 `find`、`filter`、`sort` 等 JavaScript 內建方法，卻很少真正了解背後的演算法與效率差異。
因此這次鐵人賽，我想挑戰自己過去比較不熟悉的「演算法」，並結合熟悉的 **Vue**，製作一個「演算法互動視覺化平台」。
希望透過邊學、邊做、邊記錄的方式，更理解演算法的運作，因此這30 天內預計從基礎概念開始學習，逐步實作 Bubble Sort、Quick Sort 與 Dijkstra Algorithm，並將比較、交換、尋找最短路徑等執行過程呈現在畫面上。
以前的我只在乎「功能做不做得出來」，但隨著專案越來越大，我開始發現，「做得出來」好像不等於「寫得好」。 身為一名前端工程師，我最近一直在思考一個問題： 「演算法...
昨天決定開始學習演算法之後，我第一個遇到的問題不是「哪個演算法比較快」，而是一個更基本的問題： 「所以，演算法到底是什麼？」 身為前端工程師，我們平常其實一直都...
前兩天開始認識演算法後，我一直看到另一個很常一起出現的名詞：資料結構（Data Structure）。 資料結構的定義就是： 「資料結構（Data Struc...
最近開始接觸演算法之後，常常看到一些奇怪的符號： O(1)、O(n)、O(n²)…… 第一次看到的時候真的有點害怕，瞬間勾起數學惡夢（笑）。 但也因為一直看到它...
以前在前端寫 Code 的時候，我其實完全沒有想過「排序的底層到底是怎麼運作的」。 例如要處理一組資料，我可能就是使用 for 迴圈把資料一個一個拿出來比較，或...
昨天理解 Bubble Sort 怎麼運作之後，今天要試著把紙上理解的流程真正轉換成程式碼。 先簡單回顧 Bubble Sort 的三個重要概念： Comp...
前幾天都在學演算法、Big O、Bubble Sort 等基礎概念，今天終於要正式開始建立我的演算法視覺化平台了！ 這次預計使用 Vue 3 + Vite +...
昨天建立好 Vue 專案的基本架構，今天終於要開始製作第一個跟演算法視覺化有關的功能：把 Array 畫成長條圖。 假設有一組資料： const arr = r...
昨天已經成功把隨機產生的 Array 畫成長條圖，今天終於要開始挑戰這個專案最重要的部分：讓 Bubble Sort 動起來。 目前我把畫面分成三個區塊：左側顯...
今天開始認識 Recursion（遞迴），查了一下才發現，原來遞迴最基本的概念就是：函式在執行過程中再次呼叫自己。 但為什麼函式需要呼叫自己？ 以前端來說，我們...
