浪费我时间的七个 JavaScript 错误（以及如何纠正它们）

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 
{text};

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
}

首页课程

资料下载问答资讯