阿昇

以前分別用不同的方式建立個人部落格，2021 年時還寫了一篇文章，不過舊網站都沒在用了。

All programmers should be familiar with conditional statements, as they are encountered in various fields.

This article primarily shares the conditional handling methods I have learned as a frontend engineer and JS user over the years.

所有會寫程式的人，應該都對條件判斷不陌生，不論什麼領域都常遇到。

這篇文章主要分享我作為前端工程師暨 JS 使用者，在這幾年學會的條件判斷處理方式。

最近看完 Clean Code 這本書，但其實嚴格來說也不算完整看完，因為本書是以 Java 當作基礎撰寫，且又有許多物件導向程式設計的概念，對目前的我來說並不是非常熟悉，所以有很多內容是直接跳過的或是似懂非懂地看過去；即使如此，還是從中吸收到許多觀念。

我認為這本書的精華是 Ch.12 羽化 以及 Ch.17 程式碼的氣味與啟發，如果時間不夠的人又想了解 Clean Code 這本書在說什麼，可以直接翻閱這兩章：

• Ch.12 羽化
  • 簡單設計四守則，包含 執行完所有的測試、沒有重複的部分、表達程式設計師的本意 以及 最小化類別與方法的數量。
• Ch.17 程式碼的氣味與啟發
  • 引用了 Martin Fowler 在重構這本書裡許多不同的 Code Smells，並加上本書作者 Robert 自己發現的 smells。

（2026/08/18 更新內容）

此篇為舊文章，我已經另外整理資料結構與演算法的筆記，可以參考資料結構與演算法。

預備知識​

了解本文內容之前需要具備的 prerequisite：

• JavaScript 基礎知識及 ES6 語法
• 物件導向觀念
• Big O Notation
• 資料結構的基礎理解
• 遞迴
• Binary Search Tree
• Tree Traversal
• Heap

什麼是 Priority Queue？​

Priority Queue （以下簡稱 PQ）中的每個 element 都有各自的 priority

• priority 高的元素會比 priority 低的先被處理
• 若有兩個 priority 相同的 elements，則按照它們各自在 priority queue 中的順序決定先後順序，即 queue 的特性「先進先出」

因為有利用 priority 來決定排序的特性，所以 PQ 也往往會用 heap 來實現。

（2026/08/18 更新內容）

此篇為舊文章，我已經另外整理資料結構與演算法的筆記，可以參考資料結構與演算法。

預備知識​

了解本文內容之前需要具備的 prerequisite：

• JavaScript 基礎知識及 ES6 語法
• 遞迴
• Tree
• Tree Traversal

前言​

近年來有許多人轉職當軟體工程師，其中網頁前端又是最熱門的選項，而前端工程師的工作內容多是處理 UI 切版、串 API 以及優化效能等等，所以有許多人認為前端不需要懂演算法與資料結構。

我在自學演算法與資料結構時，原先也覺得這只是用來應付面試的技能，直到最近在工作上實際運用到相關內容，這才了解到學習這些知識的優點。

這篇文章會實作一種常見的 UI Component: Tree View，藉此來分享如何將電腦科學的基礎知識運用在實務上。

（2026/08/18 更新內容）

此篇為舊文章，我已經另外整理資料結構與演算法的筆記，可以參考資料結構與演算法。

什麼是 Heap？​

Heap 是一種 tree，常用來實現 Priority Queue（後續於另篇文章分享），每個 node 最多具有兩個 children，和 Binary Search Tree 很類似，差別在於 heap 的 parent 和 child 數值具有額外的規則，分有兩種：

• Max Heap：parent 的值大於 children 的值
• Min Heap：parent 的值小於 children 的值

由此可知，heap 的結構會比起 binary search tree 還簡潔，因為 parent 一定會被調整成為值比 children 還要小（或大），這樣就不會產生 binary search tree 結構一直往單支發展的樣子，此外在加入 node 時會先往 left 加入。

（2026/08/18 更新內容）

此篇為舊文章，我已經另外整理資料結構與演算法的筆記，可以參考資料結構與演算法。

預備知識​

了解本文內容之前需要具備的 prerequisite：

• JavaScript 基礎知識及 ES6 語法
• 物件導向觀念
• Big O Notation
• 資料結構的基礎理解
• 遞迴
• 資料結構 Stack 與 Queue
• 資料結構 Tree 以及 Binary Search Tree

什麼是 Tree Traversal？​

Tree Traversal 指的是走訪 Tree 上的每一個 node，這邊的 tree 指的是所有種類的 tree，包括 Binary Tree、Binary Search Tree (BST) 等。

要走訪（遍歷）一個 Tree 有兩種常見方法：

• Breadth First Search
• Depth First Search

（2026/08/18 更新內容）

此篇為舊文章，我已經另外整理資料結構與演算法的筆記，可以參考資料結構與演算法。

預備知識​

了解本文內容之前需要具備的 prerequisite：

• JavaScript 基礎知識及 ES6 語法
• 物件導向觀念
• Big O Notation
• 資料結構的基礎理解
• 遞迴
• 資料結構 Tree

什麼是 Binary Search Tree？​

Binary Search Tree（以下簡稱 BST）顧名思義也是 tree 一種類型，它具有以下特徵：

• 每個 parent node 最多只有兩個 children nodes，且每一個 node 的值都不重複（這點是 Binary Tree 的特徵）
• 左側每個 children nodes 的值都小於它的 parent node 的值
• 右側每個 children nodes 的值都大於它的 parent node 的值

（2026/08/18 更新內容）

此篇為舊文章，我已經另外整理資料結構與演算法的筆記，可以參考資料結構與演算法。

這篇會講解 tree 這種資料結構，然後因為 tree 的類型有很多種，所以實作部分會在之後的文章進行。

什麼是 Tree？​

Tree 是 graph 的其中一種形式，是一種具有多個 node 資料結構，且這些 node 之間有 parent / child 關係。

有關於 graph 的更詳細的內容，之後會寫在另一篇文章介紹。

source: 樹 (資料結構) - 維基百科