iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 59 瀏覽

鐵人賽佛心分享-SideProject30 DAY 26

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

技術【Day 26】Vue 實作 — Dijkstra 都算出最短路徑了，為什麼畫面還不能直接用？

上一篇已經把 Graph 畫面整理好了，今天終於要開始把前面寫好的 Dijkstra 執行過程做成動畫。一開始我想得很單純，既然之前 Bubble Sort、...

菜味很濃的拉拉 ‧ 2026-10-09

0 Like 0 留言 64 瀏覽

鐵人賽佛心分享-SideProject30 DAY 25

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

技術【Day 25】Vue 實作 — 尋路地圖大改造！這次只讓 Weight 改變

上一篇最後提到，我決定換另一種方式來畫 Graph。一開始會讓使用者調整 Vertex 數量，是因為當節點很少時，其實很容易直接用肉眼判斷最短路徑；但當資料越...

菜味很濃的拉拉 ‧ 2026-10-08

0 Like 0 留言 55 瀏覽

鐵人賽佛心分享-SideProject30 DAY 24

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

技術【Day 24】Vue 實作 — 畫出 Graph，我的尋路地圖是怎麼產生的？

前面已經把 Dijkstra 寫出來了，接下來終於要開始做視覺化。我原本的構想是：使用者可以設定 Node 數量 Node ID 使用流水號產生 Weig...

菜味很濃的拉拉 ‧ 2026-10-07

0 Like 0 留言 107 瀏覽

鐵人賽佛心分享-SideProject30 DAY 23

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

技術【Day 23】用 TypeScript 寫 Dijkstra：我有最短距離了，現在出發前往終點！

上一篇已經把 Dijkstra 從手算轉成 TypeScript，可以算出每個 Node 從起點出發的最短 Distance。但今天重新看結果時，我發現還少了...

菜味很濃的拉拉 ‧ 2026-10-06

0 Like 0 留言 99 瀏覽

鐵人賽佛心分享-SideProject30 DAY 22

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

技術【Day 22】用 TypeScript 寫 Dijkstra：寫到第三輪，我才發現程式一直在做同一件事

上一篇已經跑過一次 Dijkstra，知道尋找最短路徑的過程中，需要記錄幾個重要資訊： Distance：目前從起點到這個節點的最短距離 Previou...

菜味很濃的拉拉 ‧ 2026-10-05

0 Like 0 留言 92 瀏覽

鐵人賽佛心分享-SideProject30 DAY 21

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

技術【Day 21】Dijkstra 是怎麼一步一步找到最短路徑的？

昨天找出了 Graph 中從 A 到 G 的最短路徑，但如果節點越來越多，光靠人工把所有 Path 都列出來比較，顯然不太實際。所以今天終於要進入這次 Gra...

菜味很濃的拉拉 ‧ 2026-10-04

0 Like 0 留言 92 瀏覽

鐵人賽佛心分享-SideProject30 DAY 20

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

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

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

菜味很濃的拉拉 ‧ 2026-10-03

0 Like 0 留言 94 瀏覽

鐵人賽佛心分享-SideProject30 DAY 19

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

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

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

菜味很濃的拉拉 ‧ 2026-10-02

0 Like 0 留言 91 瀏覽

鐵人賽佛心分享-SideProject30 DAY 18

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

技術【Day 18】莫名有種親切感的 Graph，但它到底是什麼？

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

菜味很濃的拉拉 ‧ 2026-10-01

0 Like 0 留言 64 瀏覽

鐵人賽佛心分享-SideProject30 DAY 16

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

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

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

菜味很濃的拉拉 ‧ 2026-09-29

0 Like 0 留言 111 瀏覽

鐵人賽佛心分享-SideProject30 DAY 13

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

技術【Day 13】用 TypeScript 寫出 Quick Sort

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

菜味很濃的拉拉 ‧ 2026-09-26

0 Like 0 留言 110 瀏覽

鐵人賽佛心分享-SideProject30 DAY 12

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

技術【Day 12】別人在切柚子，我在切 Array：從 Pivot 開始理解 Quick Sort

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

菜味很濃的拉拉 ‧ 2026-09-25

0 Like 0 留言 96 瀏覽

鐵人賽佛心分享-SideProject30 DAY 11

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

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

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

菜味很濃的拉拉 ‧ 2026-09-24

0 Like 0 留言 135 瀏覽

鐵人賽佛心分享-SideProject30 DAY 10

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

技術【Day 10】熟悉又陌生的遞迴 Recursion

今天開始認識 Recursion（遞迴），查了一下才發現，原來遞迴最基本的概念就是：函式在執行過程中再次呼叫自己。但為什麼函式需要呼叫自己？以前端來說，我們...

菜味很濃的拉拉 ‧ 2026-09-23

0 Like 0 留言 88 瀏覽

鐵人賽佛心分享-SideProject30 DAY 9

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

技術【Day 9】Vue 實作 — 讓 Bubble Sort 動起來

昨天已經成功把隨機產生的 Array 畫成長條圖，今天終於要開始挑戰這個專案最重要的部分：讓 Bubble Sort 動起來。目前我把畫面分成三個區塊：左側顯...

菜味很濃的拉拉 ‧ 2026-09-22

0 Like 0 留言 88 瀏覽

鐵人賽佛心分享-SideProject30 DAY 6

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

技術【Day 6】用 TypeScript 實作 Bubble Sort

昨天理解 Bubble Sort 怎麼運作之後，今天要試著把紙上理解的流程真正轉換成程式碼。先簡單回顧 Bubble Sort 的三個重要概念： Comp...

菜味很濃的拉拉 ‧ 2026-09-19

0 Like 0 留言 102 瀏覽

鐵人賽佛心分享-SideProject30 DAY 5

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

技術【Day 5】排序還有分很多種？Bubble Sort 又是什麼？

以前在前端寫 Code 的時候，我其實完全沒有想過「排序的底層到底是怎麼運作的」。例如要處理一組資料，我可能就是使用 for 迴圈把資料一個一個拿出來比較，或...

菜味很濃的拉拉 ‧ 2026-09-18

0 Like 0 留言 91 瀏覽

鐵人賽佛心分享-SideProject30 DAY 4

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

技術【Day 4】別再被 O(n²) 嚇到了！第一次認識時間複雜度

最近開始接觸演算法之後，常常看到一些奇怪的符號： O(1)、O(n)、O(n²)…… 第一次看到的時候真的有點害怕，瞬間勾起數學惡夢（笑）。但也因為一直看到它...

菜味很濃的拉拉 ‧ 2026-09-17

0 Like 0 留言 142 瀏覽

鐵人賽佛心分享-SideProject30 DAY 3

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

技術【Day 3】資料結構跟演算法有什麼關係？初步認識 Array、Stack、Graph

前兩天開始認識演算法後，我一直看到另一個很常一起出現的名詞：資料結構（Data Structure）。資料結構的定義就是：「資料結構（Data Struc...

菜味很濃的拉拉 ‧ 2026-09-16

0 Like 0 留言 170 瀏覽

鐵人賽佛心分享-SideProject30 DAY 2

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

技術【Day 2】演算法到底是什麼？其實我們每天都在使用演算法？

昨天決定開始學習演算法之後，我第一個遇到的問題不是「哪個演算法比較快」，而是一個更基本的問題：「所以，演算法到底是什麼？」身為前端工程師，我們平常其實一直都...

菜味很濃的拉拉 ‧ 2026-09-15

0 Like 0 留言 205 瀏覽

鐵人賽佛心分享-SideProject30 DAY 1

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

技術【Day 1】老實說，我以前一直不知道前端工程師為什麼要學演算法？

以前的我只在乎「功能做不做得出來」，但隨著專案越來越大，我開始發現，「做得出來」好像不等於「寫得好」。身為一名前端工程師，我最近一直在思考一個問題：「演算法...

菜味很濃的拉拉 ‧ 2026-09-14

0 Like 0 留言 148 瀏覽

鐵人賽 JavaScript DAY 16

一條線救一隻狗：我用 PixiJS、Matter.js 和一條有閘門的 AI 產線做完一款網頁小遊戲系列第 16 篇

技術 Day 16｜蜜蜂怎麼追人：三個向量加起來就夠了

模組四｜蜜蜂、碰撞與勝負（Day 16–20） Day 15 講完玩家畫的那條防線為什麼停不下來、以及最直覺的修法會把遊戲弄壞。今天換到線的另一邊：往線上壓...

harryfan ‧ 2026-08-21

0 Like 0 留言 262 瀏覽

鐵人賽 JavaScript DAY 14

一條線救一隻狗：我用 PixiJS、Matter.js 和一條有閘門的 AI 產線做完一款網頁小遊戲系列第 14 篇

技術 Day 14｜幾何抽稀：一千個點怎麼變成四十個

模組三｜畫線：從手指到剛體（Day 10–15）昨天的狀態機裡有一個叫 simplifying 的階段，它的內容是四行函式呼叫。今天把那四行拆開。 poi...

harryfan ‧ 2026-08-19

1 Like 0 留言 287 瀏覽

鐵人賽 Software Development DAY 2

從0開始的資料結構旅程! 系列第 2 篇

技術 Day 2 - 什麼是演算法?

我們昨天介紹了資料結構，那今天來簡單的看演算法吧!先簡單解釋一下為什麼要在資料結構的文章裡介紹演算法，我們經常在各個地方都能看到演算法的存在，其實他沒有你想像...

cheese_91383 ‧ 2026-08-08

1 Like 0 留言 1092 瀏覽

技術洛谷 P2440 木材加工

筆記：【演算法新手村】[初階]筆記03 - 二分練習題題目木材廠有 n 根原木，現在想把這些木頭切割成 k 段長度均為 l 的小段木頭（木頭有可能有剩餘）...

bethepeak ‧ 2026-03-04

0 Like 0 留言 1031 瀏覽

技術洛谷 P3397 地毯

筆記:【演算法新手村】[初階]筆記06 - 差分(二維) 題目在 n × n 的格子上有 m 個地毯。給出這些地毯的信息，問每個點被多少個地毯覆蓋。 I...

bethepeak ‧ 2026-03-03

0 Like 0 留言 817 瀏覽

技術 LeetCode 2536. Increment Submatrices by One

筆記：【演算法新手村】[初階]筆記06 - 差分(二維) 題目翻譯給定一個正整數 n，代表一個初始全為 0、大小為 n × n 的二維矩陣 mat（索引從...

bethepeak ‧ 2026-03-02

1 Like 0 留言 1167 瀏覽

技術【演算法新手村】[初階]筆記06 - 差分(二維)

上一篇：【演算法新手村】[初階]筆記06 - 差分(一維) 同樣引入一個問題，給定一個 N × M 的矩陣，有 Q 次操作，每次將左上 (x1, y1) 到右...

bethepeak ‧ 2026-03-01

0 Like 0 留言 900 瀏覽

技術 LeetCode 1094. Car Pooling

筆記：【演算法新手村】[初階]筆記06 - 差分(一維) 題目翻譯有一輛車，車內共有 capacity 個空座位。這輛車只會向東行駛（也就是說，它不能掉頭向...

bethepeak ‧ 2026-02-28

0 Like 0 留言 929 瀏覽

技術 LeetCode 1109. Corporate Flight Bookings

筆記：【演算法新手村】[初階]筆記06 - 差分(一維) 題目翻譯有n 個航班，編號從 1 到 n。給定一個預訂紀錄陣列 bookings，其中 booki...

bethepeak ‧ 2026-02-27

技術 【Day 26】Vue 實作 — Dijkstra 都算出最短路徑了，為什麼畫面還不能直接用？

技術 【Day 25】Vue 實作 — 尋路地圖大改造！這次只讓 Weight 改變

技術 【Day 24】Vue 實作 — 畫出 Graph，我的尋路地圖是怎麼產生的？

技術 【Day 23】用 TypeScript 寫 Dijkstra：我有最短距離了，現在出發前往終點！

技術 【Day 22】用 TypeScript 寫 Dijkstra：寫到第三輪，我才發現程式一直在做同一件事

技術 【Day 21】Dijkstra 是怎麼一步一步找到最短路徑的？

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

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

技術 【Day 18】莫名有種親切感的 Graph，但它到底是什麼？

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

技術 【Day 13】用 TypeScript 寫出 Quick Sort

技術 【Day 12】別人在切柚子，我在切 Array：從 Pivot 開始理解 Quick Sort

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

技術 【Day 10】熟悉又陌生的遞迴 Recursion

技術 【Day 9】Vue 實作 — 讓 Bubble Sort 動起來

技術 【Day 6】用 TypeScript 實作 Bubble Sort

技術 【Day 5】排序還有分很多種？Bubble Sort 又是什麼？

技術 【Day 4】別再被 O(n²) 嚇到了！第一次認識時間複雜度

技術 【Day 3】資料結構跟演算法有什麼關係？初步認識 Array、Stack、Graph

技術 【Day 2】演算法到底是什麼？其實我們每天都在使用演算法？

技術 【Day 1】老實說，我以前一直不知道前端工程師為什麼要學演算法？