Data Structures：同一份資料，用不同結構會讓操作成本完全不同

Learning outcomes

• 能依 operation 選 Array/Stack/Queue/Set/Map。
• 能說明 order、uniqueness、key lookup 等語意差異。
• 能區分 logical data structure 與語言內建 implementation。
• 能預測錯選結構造成的複雜度與可讀性問題。

1. Array：有順序、可索引、適合遍歷

const lessons = [
  "Values",
  "Functions",
  "DOM"
];

lessons[1];
// "Functions"

Array 適合 sequence。若你常做「依 id 找 item」，每次線性 scan 可能不是最佳選擇。

2. Stack：LIFO

push(A)
push(B)
pop() → B
pop() → A

Call stack、undo history、DFS 都常用 stack model。重點是最後加入者先取出。

3. Queue：FIFO

enqueue(A)
enqueue(B)
dequeue() → A
dequeue() → B

Job queue、request queue、BFS 等情境通常更接近 first-in-first-out。

4. Set：唯一集合

const tags =
  new Set();

tags.add("js");
tags.add("js");

tags.size;
// 1

Set 很適合 membership / uniqueness；但如果你需要 key → value，就更像 Map。

5. Map：key → value lookup

const byId =
  new Map();

byId.set(
  101,
  { title: "JavaScript" }
);

byId.get(101);

Map 把「找某個 key 的 value」變成核心 operation。

Project checkpoint：Course Index

同一份 lessons 同時建立 Array 與 Map index：Array 保留排序，Map 提供 id lookup。

const lessons = [...];

const byId =
  new Map(
    lessons.map(
      lesson => [
        lesson.id,
        lesson
      ]
    )
  );

Debug evidence：資料明明有，lookup 卻很慢

先問資料規模、lookup 次數、是否每次都 find() 整個 array。不要看到慢就先換 framework；資料結構可能才是瓶頸。