JS 超反人類語法避坑清單（實用版）

...（spread / rest）

[...arr]

 問題點：完全看不出在幹嘛
 正解：展開 / 複製 / 轉陣列

建議（你這種場景）

Array.from(arrLike)

 ✔ 比較好懂
 ✔ 好搜尋

---

??（nullish coalescing）

const name = input ?? "預設";

 只在 null / undefined 才用預設

 很多人以為等於 ||

0 || 100   // → 100 ❌
0 ?? 100   // → 0 ✅

坑點：0 / "" / false 不會觸發

---

|| 當預設值（舊寫法雷區）

const val = input || 100;

 問題：

• 0
• ""
• false

全部會被吃掉

 現代建議：

const val = input ?? 100;

---

&& 偷偷執行（超陰）

isReady && doSomething();

 意思是：

• 如果 isReady = true → 執行

 問題：可讀性很差（新手完全看不懂）

建議

if (isReady) doSomething();

---

== vs ===（經典炸彈）

0 == false   // true 😱
"" == 0      // true 😱

永遠用：

===

除非你非常確定在幹嘛（通常不是）

---

[] == false（地獄級）

[] == false  // true 🤯

 原因：JS 會偷偷轉型

 解法：

不要用 ==

---

parseInt 沒給 radix

parseInt("08")

某些舊環境會變 0（當八進位）

正確：

parseInt("08", 10)

---

map 沒 return（超常見 bug）

arr.map(x => {
  x * 2;
});

 結果：

[undefined, undefined, undefined]

要嘛：

arr.map(x => x * 2);

或

arr.map(x => {
  return x * 2;
});

---

forEach 不能 break（很多人中招）

arr.forEach(x => {
  if (x === 3) break; // ❌ 直接爆
});

 用：

for (const x of arr) {
  if (x === 3) break;
}

---

this（最大魔王）

const obj = {
  name: "A",
  fn: function () {
    console.log(this.name);
  }
};

還算正常

但：

const fn = obj.fn;
fn(); // undefined 😱

this 會變

---

建議（簡化人生）

少用 this，多用：

const name = "A";

function fn() {
  console.log(name);
}

或 arrow function（但也有坑）

---

setTimeout + loop

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}

 輸出：

3 3 3 😱

 用 let

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}

---

空陣列判斷

if (arr) // ❌

 永遠 true

 正確：

if (arr.length > 0)

---

核心原則

如果你是走你這條路（高效 + 原生）：

優先選：

• 可讀性高
• 好搜尋
• 行為明確