- CSS技巧與案例詳解
- vue2與vue3技巧合集
- VueUse原始碼解讀
JavaScript 是初學者友好的語言,簡單易學……至少我剛開始是這麼認為的。但隨著時間的推移,深入瞭解後才發現,這門語言隱藏了一些非常棘手的陷阱。
我踩過不少這些坑,為了讓你少走彎路,這裡總結了最容易浪費時間的 7 個 JavaScript 錯誤,以及對應的解決方案。
1. 混用箭頭函式和普通函式處理事件
箭頭函式和普通函式對 this
的處理方式不同。普通函式中的 this
引用觸發事件的元素,而箭頭函式則保持 this
指向其定義時的環境。
建議:
- 如果需要
this
引用被點選的元素,用普通函式。 - 如果希望
this
保持原樣,用箭頭函式。
示例:
// 普通函式:`this` 引用被點選的元素
element.addEventListener('click', function() {
this.classList.add('active'); // 正常工作
});
// 箭頭函式:`this` 保持定義時的環境
element.addEventListener('click', () => {
this.classList.add('active'); // 可能無法按預期工作
});
2. 在 React 中直接操作 DOM 而不是使用狀態
在 React 元件中使用 document.querySelector
等直接操作 DOM 的方法,可能會導致不可預測的行為。
建議:
使用 React 提供的 useState
或 useRef
來管理 DOM 的變化。
示例:
// 錯誤:直接操作 DOM
document.querySelector('#myDiv').textContent = 'Hello';
// 正確:透過狀態更新 DOM
const [text, setText] = useState('Hello');
return <div id="myDiv">{text}</div>;
3. 錯誤使用 for...in
遍歷陣列
for...in
會遍歷陣列的索引(鍵),而不是值,這可能導致資料處理錯誤。
建議:
用 for...of
遍歷陣列的值。
示例:
// 錯誤:遍歷索引
for (let index in array) {
console.log(array[index]);
}
// 正確:遍歷值
for (let value of array) {
console.log(value);
}
4. 忘記在非同步操作中使用 await
如果在處理 Promise 時忘記使用 await
,程式碼可能會在資料載入完成前嘗試使用資料,導致錯誤。
建議:
處理非同步資料時始終使用 await
,確保資料載入完成後再使用。
示例:
// 錯誤:資料尚未載入完成
const data = fetch(url);
console.log(data); // 列印的是 Promise,而不是資料
// 正確:等待響應完成
const response = await fetch(url);
const data = await response.json();
console.log(data);
5. 用 innerHTML
操作 DOM
直接用 innerHTML
設定使用者輸入內容可能導致安全漏洞(如 XSS 攻擊)。
建議:
顯示純文字時使用 textContent
,或藉助庫對 HTML 進行清理。
示例:
// 錯誤:可能存在安全隱患
element.innerHTML = userInput;
// 正確:安全顯示純文字
element.textContent = userInput;
6. 直接修改樣式而非使用 CSS 類
透過 JavaScript 直接更改樣式會讓程式碼變得難以維護。
建議:
使用 classList
來新增或移除預定義的 CSS 類,以提高程式碼的可讀性。
示例:
// 錯誤:直接修改樣式
element.style.display = 'none';
// 正確:使用 CSS 類
element.classList.toggle('hidden');
7. 使用 ==
而不是 ===
進行比較
==
會進行型別轉換,例如將 '5'
和 5
視為相等,這容易導致意外的錯誤。
建議:
使用 ===
進行嚴格比較,確保型別和值都一致。
示例:
// 錯誤:允許型別轉換,容易引發問題
if (value == '5') {
// 即使 value 是數字 5,也可能為 true
}
// 正確:嚴格比較型別和值
if (value === 5) {
// 只有 value 是數字 5 才為 true
}
總結
這些常見的 JavaScript 錯誤可能會浪費你大量時間,但只要加以避免,就能讓程式碼更加高效、可靠。希望這些小技巧能幫你寫出更優質的程式碼!
首發於公眾號 大遷世界,歡迎關注。📝 每週一篇實用的前端文章 🛠️ 分享值得關注的開發工具 ❓ 有疑問?我來回答
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄,有一線大廠面試完整考點、資料以及我的系列文章。