【忍者：JavaScript開發技巧探秘第二版】閱讀紀錄

2025年10月10日 · 閱讀時間約 3 分鐘

因為看到有人分享這本書，所以就去圖書館借實體書來看，順便重新複習JS。

會針對一些印象特別深刻的部分做分享。有趣的是，在這本書發行的2017年，當時的非同步還沒有async/await語法糖可以使用。

箭頭函式在寫React時，幾乎都會用到箭頭函式寫法，當初在學習的時候，時常分不清楚()跟的使用時機在寫React時，幾乎都會用到箭頭函式寫法，當初在學習的時候，時常分不清楚()跟的使用時機

//零個或大於一個參數時()是必要
(param1, param2) => expression
//只有一個參數時可省略()
//多行的程式區塊需搭配使用{}呈現
param1 => {
  myStatement1;
  myStatement2;
}

相較於使用函式表達式，箭頭函式可以避免提升問題以外，對於Hooks的應用也會更好搭配

// 箭頭函式可以直接作為 useCallback 的參數
const handleClick = useCallback(() => {
  // ... 函式邏輯
}, [dependencies]);

使用map、filter和reduce，也能看見箭頭函式的身影

array
  .map(i => i * 5)
  .filter(i => i > 10)
  .reduce((acc, i) => acc + i, 0)

2 . 閉包(Closure)

function animate(elementId) {
  // 1. 取得元素
  var elem = document.getElementById(elementId);
  // 檢查元素是否存在
  if (!elem) {
    console.error("找不到 ID 為 " + elementId + " 的元素。");
    return;
  }
  // 2. 初始化計數器 (tick)
  var tick = 0;
  // 3. 設置計時器
  // 因為 tick 和 timer 是在函式內定義的區域變數，
  // 每次呼叫 animate 時都會建立新的獨立變數，確保 box1 和 box2 的動畫互不干擾。
  var timer = setInterval(function () {
    if (tick < 100) {
      // 4. 計算並應用新的位置
      var position = tick + "px";
      elem.style.left = position;
      elem.style.top = position;
      // 5. 增加計數器
      tick++;
    }
    else {
      // 6. 達到 100 步後停止動畫
      clearInterval(timer);
    }
  }, 10); // 每 10 毫秒執行一次
}
// 呼叫函式來啟動動畫
animate("box1");
animate("box2");