cover

概念圖

面試考題不是拿來背的,是拿來驗證你有沒有真的理解底層觀念的。如果你只會回答「let 有 block scope、var 沒有」,面試官下一題就會讓你知道什麼叫痛苦。

先講結論

前端面試考的不是你會多少 API,而是你能不能解釋「為什麼」。這篇挑了幾個高頻題目,不給你標準答案,而是告訴你面試官真正想聽什麼。

變數宣告:let / const / var 到底差在哪

這題幾乎 100% 會出。但你回答完 scope 差異之後,面試官通常會追問這個:

for (var i = 1; i <= 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 0);
}
// 輸出:6 6 6 6 6(不是 1 2 3 4 5)

為什麼?因為 var 是 function scope,整個迴圈共用同一個 i。等 setTimeout 的 callback 執行時,迴圈早就跑完了,i 已經是 6。

換成 let 就會印出 1 2 3 4 5,因為 let 是 block scope,每次迭代都有自己的 i

面試官想確認的是:你懂不懂 closureevent loop 的交互作用。不是背答案,是理解執行時機。

傳值 vs 傳參考:那個永遠有人答錯的題

let a = "aaa";
let b = a;
b = "bbb";
console.log(a); // "aaa" — 基本型別是傳值(copy)
 
let e = [1, 2, 3];
let f = e;
f.push(4);
console.log(e); // [1, 2, 3, 4] — 物件是傳參考(reference)

但如果用展開運算子呢?

let e = [1, 2, 3];
let f = [...e, 4];
console.log(e); // [1, 2, 3] — 展開是淺拷貝,建立新陣列

面試官接著會問:「那深層巢狀的物件用展開運算子夠嗎?」答案是不夠,你需要 structuredClone()JSON.parse(JSON.stringify())(後者有限制,不能處理 function 和 circular reference)。

0.1 + 0.2 !== 0.3

console.log(0.1 + 0.2); // 0.30000000000000004

這不是 JavaScript 的 bug,是 IEEE 754 浮點數的先天限制。所有使用浮點數的語言都有這個問題。

實務上怎麼解?金額計算用整數(以「分」為單位),或者用 Number.EPSILON 做容差比較:

Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON; // true

cookies / sessionStorage / localStorage

這題考的是你對瀏覽器儲存的理解深度:

cookiessessionStoragelocalStorage
大小~4KB~5MB~5MB
生命週期可設過期時間分頁關閉就消失永久(除非手動清除)
送到 Server每次 HTTP 請求自動帶上不會不會
跨分頁同域共享不共享同域共享

面試官的陷阱題:「token 該存哪裡?」如果你回答 localStorage,他會問你 XSS 攻擊怎麼辦。比較安全的做法是存在 httpOnly cookie 裡,JavaScript 碰不到。

vs =

console.log('' == false);  // true(型別轉換後比較)
console.log('' === false); // false(型別不同直接 false)

規則很簡單:永遠用 ===,除非你有非常明確的理由要用 ==(例如 value == null 同時檢查 null 和 undefined)。

如果面試官問你 == 的型別轉換規則,坦白說:「我知道規則很複雜,所以我在實務中一律用 === 避免這些隱式轉換的坑。」這比硬背轉換表更有說服力。

script / script async / script defer

一般 <script>:    解析暫停 → 下載 → 執行 → 繼續解析
async <script>:  解析繼續,下載完立即執行(可能中斷解析)
defer <script>:  解析繼續,DOM 完成後才執行(推薦)

實務建議:大部分情況用 deferasync 適合不依賴 DOM 的獨立腳本(像 Google Analytics)。

面試心態

最後一個不是考題的考題:當面試官問你「接到一包有歷史的 code,你會怎麼開始維護?」

千萬不要回答「先把 code 重構」。正確答案是:先跑起來、先看測試(如果有的話)、先理解業務邏輯、再決定要不要動。很多人接手 legacy code 的第一件事就是重構,然後把原本能跑的東西改到不能跑。這不叫重構,這叫破壞。


面試官問的每個問題都有下一題。與其背答案,不如搞懂原理——因為原理只有一套,但題目有無限種變化。


延伸閱讀