JavaScript 是初學(xué)者友好的語(yǔ)言，簡(jiǎn)單易學(xué)……至少我剛開(kāi)始是這么認(rèn)為的。但隨著時(shí)間的推移，深入了解后才發(fā)現(xiàn)，這門語(yǔ)言隱藏了一些非常棘手的陷阱。
我踩過(guò)不少這些坑，為了讓你少走彎路，這里總結(jié)了最容易浪費(fèi)時(shí)間的 7 個(gè) JavaScript 錯(cuò)誤，以及對(duì)應(yīng)的解決方案。
1. 混用箭頭函數(shù)和普通函數(shù)處理事件
箭頭函數(shù)和普通函數(shù)對(duì) this 的處理方式不同。普通函數(shù)中的 this 引用觸發(fā)事件的元素，而箭頭函數(shù)則保持 this 指向其定義時(shí)的環(huán)境。
建議：
- 如果需要
this 引用被點(diǎn)擊的元素，用普通函數(shù)。 - 如果希望
this 保持原樣，用箭頭函數(shù)。
示例：
// 普通函數(shù)：`this` 引用被點(diǎn)擊的元素
element.addEventListener('click', function() {
this.classList.add('active'); // 正常工作
});
// 箭頭函數(shù)：`this` 保持定義時(shí)的環(huán)境
element.addEventListener('click', () => {
this.classList.add('active'); // 可能無(wú)法按預(yù)期工作
});
2. 在 React 中直接操作 DOM 而不是使用狀態(tài)
在 React 組件中使用 document.querySelector 等直接操作 DOM 的方法，可能會(huì)導(dǎo)致不可預(yù)測(cè)的行為。
建議：
使用 React 提供的 useState 或 useRef 來(lái)管理 DOM 的變化。
示例：
// 錯(cuò)誤：直接操作 DOM
document.querySelector('#myDiv').textContent = 'Hello';
// 正確：通過(guò)狀態(tài)更新 DOM
const [text, setText] = useState('Hello');
return <div id="myDiv">{text}</div>;
3. 錯(cuò)誤使用 for...in 遍歷數(shù)組
for...in 會(huì)遍歷數(shù)組的索引（鍵），而不是值，這可能導(dǎo)致數(shù)據(jù)處理錯(cuò)誤。
建議：
用 for...of 遍歷數(shù)組的值。
示例：
// 錯(cuò)誤：遍歷索引
for (let index in array) {
console.log(array[index]);
}
// 正確：遍歷值
for (let value of array) {
console.log(value);
}
4. 忘記在異步操作中使用 await
如果在處理 Promise 時(shí)忘記使用 await，代碼可能會(huì)在數(shù)據(jù)加載完成前嘗試使用數(shù)據(jù)，導(dǎo)致錯(cuò)誤。
建議：
處理異步數(shù)據(jù)時(shí)始終使用 await，確保數(shù)據(jù)加載完成后再使用。
示例：
// 錯(cuò)誤：數(shù)據(jù)尚未加載完成
const data = fetch(url);
console.log(data); // 打印的是 Promise，而不是數(shù)據(jù)
// 正確：等待響應(yīng)完成
const response = await fetch(url);
const data = await response.json();
console.log(data);
5. 用 innerHTML 操作 DOM
直接用 innerHTML 設(shè)置用戶輸入內(nèi)容可能導(dǎo)致安全漏洞（如 XSS 攻擊）。
建議：
顯示純文本時(shí)使用 textContent，或借助庫(kù)對(duì) HTML 進(jìn)行清理。
示例：
// 錯(cuò)誤：可能存在安全隱患
element.innerHTML = userInput;
// 正確：安全顯示純文本
element.textContent = userInput;
6. 直接修改樣式而非使用 CSS 類
通過(guò) JavaScript 直接更改樣式會(huì)讓代碼變得難以維護(hù)。
建議：
使用 classList 來(lái)添加或移除預(yù)定義的 CSS 類，以提高代碼的可讀性。
示例：
// 錯(cuò)誤：直接修改樣式
element.style.display = 'none';
// 正確：使用 CSS 類
element.classList.toggle('hidden');
7. 使用 == 而不是 === 進(jìn)行比較
== 會(huì)進(jìn)行類型轉(zhuǎn)換，例如將 '5' 和 5 視為相等，這容易導(dǎo)致意外的錯(cuò)誤。
建議：
使用 === 進(jìn)行嚴(yán)格比較，確保類型和值都一致。
示例：
// 錯(cuò)誤：允許類型轉(zhuǎn)換，容易引發(fā)問(wèn)題
if (value == '5') {
// 即使 value 是數(shù)字 5，也可能為 true
}
// 正確：嚴(yán)格比較類型和值
if (value === 5) {
// 只有 value 是數(shù)字 5 才為 true
}
總結(jié)
這些常見(jiàn)的 JavaScript 錯(cuò)誤可能會(huì)浪費(fèi)你大量時(shí)間，但只要加以避免，就能讓代碼更加高效、可靠。希望這些小技巧能幫你寫(xiě)出更優(yōu)質(zhì)的代碼！
該文章在 2024/12/4 15:18:34 編輯過(guò)
400 186 1886
