引言
為了更好地理解 JavaScript 的復(fù)雜之處，編寫出更干凈、更高效、更可靠的代碼，我們將深入探討 10 個(gè)即使是經(jīng)驗(yàn)豐富的 JavaScript 開(kāi)發(fā)者也容易犯的錯(cuò)誤。
這篇文章將揭示這些錯(cuò)誤背后的原因，并提供相應(yīng)的解決方案，幫助你避免這些陷阱，提升你的 JavaScript 編碼水平，最終寫出更加優(yōu)秀、更具可維護(hù)性的代碼。
1. 忽略使用 Object.freeze 或 Object.seal
錯(cuò)誤：
未能阻止對(duì)應(yīng)該保持不變的對(duì)象進(jìn)行修改可能會(huì)導(dǎo)致意想不到的副作用，尤其是在大型復(fù)雜應(yīng)用程序中。開(kāi)發(fā)人員可能會(huì)無(wú)意中修改本應(yīng)為常量的對(duì)象，從而導(dǎo)致難以追蹤的錯(cuò)誤。
const config = { theme: 'dark' }
Object.freeze(config)
config.theme = 'light'
如何避免：
在處理配置對(duì)象或任何應(yīng)該保持不變的數(shù)據(jù)結(jié)構(gòu)時(shí)，實(shí)現(xiàn) Object.freeze()。此做法有助于防止意外更改并保持應(yīng)用程序的一致性。
const settings = Object.freeze({
apiEndpoint: 'https://api.example.com',
timeout: 5000
});
2. 在事件監(jiān)聽(tīng)器中錯(cuò)誤地管理 this
錯(cuò)誤：
事件監(jiān)聽(tīng)器可能會(huì)讓開(kāi)發(fā)人員對(duì) this 關(guān)鍵字感到困惑，它通常指的是觸發(fā)事件的 DOM 元素，而不是預(yù)期的上下文。這種誤解會(huì)導(dǎo)致錯(cuò)誤，方法在錯(cuò)誤的上下文中被調(diào)用。
button.addEventListener('click', function() {
this.handleClick();
});
如何避免：
箭頭函數(shù)沒(méi)有自己的 this，因此它們從其封閉上下文繼承它?；蛘?，使用 bind() 顯式設(shè)置上下文。
button.addEventListener('click', () => {
this.handleClick();
});
button.addEventListener('click', function() {
this.handleClick();
}.bind(this));
3. 函數(shù)功能過(guò)多
錯(cuò)誤：
將過(guò)多的職責(zé)合并到一個(gè)函數(shù)中會(huì)使你的代碼變得復(fù)雜且難以維護(hù)。這樣的函數(shù)難以測(cè)試、調(diào)試和修改，增加了引入錯(cuò)誤的風(fēng)險(xiǎn)。
function handleUserAction(event) {
}
如何避免：
將函數(shù)分解成更小、更專注的函數(shù)。這不僅簡(jiǎn)化了每個(gè)函數(shù)，而且使代碼更容易理解和維護(hù)。
function validateInput(value) { }
function updateUI() { }
function submitData(value) { }
function handleUserAction(event) {
const input = event.target.value;
if (validateInput(input)) {
updateUI();
submitData(input);
}
}
4. 忽略函數(shù)邏輯中的邊緣情況
錯(cuò)誤：
經(jīng)驗(yàn)豐富的開(kāi)發(fā)者可能會(huì)忽略邊緣情況，導(dǎo)致函數(shù)在某些情況下失敗或行為異常。這會(huì)導(dǎo)致僅在特定條件下出現(xiàn)的錯(cuò)誤，使其難以重現(xiàn)和修復(fù)。
function getUserById(users, id) {
return users.find(user => user.id === id);
}
const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
console.log(getUserById(users, 1)); // { id: 1, name: 'Alice' }
console.log(getUserById(users, 3)); // undefined，如果未處理可能會(huì)導(dǎo)致問(wèn)題
如何避免：
在你的函數(shù)中加入錯(cuò)誤處理和驗(yàn)證，以處理邊緣情況和意外輸入。
function getUserById(users, id) {
const user = users.find(user => user.id === id);
if (!user) {
throw new Error('用戶未找到');
}
return user;
}
try {
console.log(getUserById(users, 1));
console.log(getUserById(users, 3));
} catch (error) {
console.error(error.message);
}
5. 忽略用戶輸入的清理
錯(cuò)誤：
即使是經(jīng)驗(yàn)豐富的開(kāi)發(fā)者有時(shí)也會(huì)忽略輸入清理，這會(huì)導(dǎo)致安全漏洞，如跨站腳本 (XSS)。未經(jīng)清理的輸入可以被攻擊者利用來(lái)執(zhí)行惡意腳本。
const userInput = "<img src='x' onerror='alert(1)'>"
document.body.innerHTML = userInput
如何避免：
始終清理和驗(yàn)證用戶輸入，以防止安全問(wèn)題。使用專門為此目的設(shè)計(jì)的庫(kù)，例如 DOMPurify，在處理或顯示用戶生成的內(nèi)容之前對(duì)其進(jìn)行清理和保護(hù)。
const sanitizedInput = DOMPurify.sanitize(userInput)
document.body.innerHTML = sanitizedInput
6. 忽略閉包的性能影響
錯(cuò)誤：
閉包可以捕獲并保留對(duì)變量的引用，如果未妥善管理，可能會(huì)導(dǎo)致內(nèi)存泄漏。這會(huì)影響應(yīng)用程序的性能并隨著時(shí)間的推移增加內(nèi)存使用量。
function createEventHandlers(elements) {
const handlers = []
for (let i = 0
// 每個(gè)閉包都捕獲了整個(gè) 'elements' 數(shù)組
handlers.push(function() {
console.log('元素被點(diǎn)擊：', elements[i].textContent)
})
}
return handlers
}
const elements = document.querySelectorAll('.list-item')
const handlers = createEventHandlers(elements)
如何避免：
謹(jǐn)慎使用閉包，尤其是在長(zhǎng)生命周期的對(duì)象或函數(shù)中。確保閉包不會(huì)無(wú)意中保留不再需要的海量數(shù)據(jù)或引用。
function createEventHandlers(elements) {
const handlers = []
for (let i = 0
const element = elements[i]
handlers.push(function() {
console.log('元素被點(diǎn)擊：', element.textContent)
})
}
return handlers
}
const elements = document.querySelectorAll('.list-item')
const handlers = createEventHandlers(elements)
// 現(xiàn)在，每個(gè)處理程序只保留對(duì)其需要的單個(gè)元素的引用，而不是整個(gè)數(shù)組
7. 不對(duì)高頻事件進(jìn)行去抖動(dòng)或節(jié)流
錯(cuò)誤：
在沒(méi)有去抖動(dòng)或節(jié)流的情況下處理高頻事件，如 scroll、resize 或 keypress，會(huì)導(dǎo)致函數(shù)調(diào)用過(guò)多，降低性能和用戶體驗(yàn)。
window.addEventListener('resize', handleResize);
如何避免：
實(shí)現(xiàn)去抖動(dòng)或節(jié)流，以限制事件處理程序執(zhí)行的速率。這減少了函數(shù)調(diào)用次數(shù)，提高了應(yīng)用程序的性能。
function debounce(fn, delay) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => fn.apply(this, args), delay);
};
}
window.addEventListener('resize', debounce(handleResize, 200));
8. 沒(méi)有利用解構(gòu)的強(qiáng)大功能
錯(cuò)誤：
在處理對(duì)象或數(shù)組時(shí)忘記使用解構(gòu)會(huì)導(dǎo)致冗長(zhǎng)、重復(fù)的代碼，降低可讀性并增加出錯(cuò)的風(fēng)險(xiǎn)。
const person = { name: 'John', age: 30, job: 'Developer' }
const name = person.name
const age = person.age
如何避免：
利用解構(gòu)簡(jiǎn)化從對(duì)象或數(shù)組中提取值。此技術(shù)提高了代碼可讀性并減少了樣板代碼。
const { name, age, job } = person;
9. 異步代碼中錯(cuò)誤的錯(cuò)誤處理
錯(cuò)誤：
未能正確處理異步代碼中的錯(cuò)誤會(huì)導(dǎo)致未處理的 promise 拒絕，從而導(dǎo)致應(yīng)用程序行為異常和用戶體驗(yàn)不佳。
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
}
fetchData().then(data => console.log(data));
如何避免：
始終使用 try/catch 塊（與 async/await 一起使用）或 catch()（與 promises 一起使用）來(lái)處理異步代碼中的錯(cuò)誤。這確保了錯(cuò)誤被正確捕獲和管理。
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error('網(wǎng)絡(luò)響應(yīng)不正常');
}
const data = await response.json();
return data;
} catch (error) {
console.error('獲取數(shù)據(jù)錯(cuò)誤：', error);
}
}
10. 忽略代碼組織的最佳實(shí)踐
錯(cuò)誤：
經(jīng)驗(yàn)豐富的開(kāi)發(fā)者可能會(huì)忽略代碼組織的最佳實(shí)踐，導(dǎo)致代碼庫(kù)過(guò)于龐大和難以維護(hù)。糟糕的組織會(huì)使代碼更難理解、擴(kuò)展和調(diào)試。
function app() {
function handleRequest() { }
function renderUI() { }
}
如何避免：
采用代碼組織的最佳實(shí)踐，例如將代碼模塊化成可重用組件或模塊，使用清晰的命名約定并保持一致的目錄結(jié)構(gòu)。這種方法提高了代碼的可維護(hù)性和可擴(kuò)展性。
export function fetchData() { }
export function renderUI() { }
import { fetchData } from './api';
import { renderUI } from './ui';
function app() {
fetchData();
renderUI();
}
結(jié)論
這些錯(cuò)誤突出了即使是經(jīng)驗(yàn)豐富的開(kāi)發(fā)者也會(huì)遇到的微妙但重要的挑戰(zhàn)。通過(guò)注意這些陷阱并遵循最佳實(shí)踐，你可以編寫更干凈、更高效、更安全的 JavaScript 代碼。
最后，如果本文的內(nèi)容對(duì)你有啟發(fā)，幫我點(diǎn)個(gè)贊，關(guān)注一波，分享出去，也許你的轉(zhuǎn)發(fā)能給別人帶來(lái)一點(diǎn)幫助。
：JavaScript 高手也會(huì)犯的 10 個(gè)錯(cuò)誤
400 186 1886
