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

主要观点总结

文章介绍了JavaScript中常见的7个错误及其对应的解决方案，包括混用箭头函数和普通函数处理事件、在React中直接操作DOM而不是使用状态、错误使用for...in遍历数组、忘记在异步操作中使用await、用innerHTML操作DOM、直接修改样式而非使用CSS类和使用==而不是===进行比较等。文章旨在帮助读者避免这些错误，提高代码效率和质量。

关键观点总结

关键观点1: 混用箭头函数和普通函数处理事件

箭头函数和普通函数对this的处理方式不同，需要根据具体情况选择使用。普通函数中的this引用触发事件的元素，而箭头函数则保持this指向其定义时的环境。

关键观点2: 在React中直接操作DOM而不是使用状态

在React组件中直接使用DOM操作方法可能导致不可预测的行为，建议使用React提供的useState或useRef来管理DOM的变化。

关键观点3: 错误使用for...in遍历数组

for...in会遍历数组的索引而非值，可能导致数据处理错误。建议使用for...of来遍历数组的值。

关键观点4: 忘记在异步操作中使用await

处理Promise时忘记使用await可能导致数据加载完成前尝试使用数据，应始终使用await确保数据加载完成后再使用。

关键观点5: 用innerHTML操作DOM的安全问题

直接用innerHTML设置用户输入内容可能导致安全漏洞，如XSS攻击。应显示纯文本时使用textContent，或借助库对HTML进行清理。

关键观点6: 直接修改样式而非使用CSS类

通过JavaScript直接更改样式会让代码难以维护，建议使用classList来添加或移除预定义的CSS类，提高代码可读性。

关键观点7: 使用==而不是===进行比较

使用==进行比较会进行类型转换，可能导致意外的错误。应使用===进行严格比较，确保类型和值都一致。

文章预览

JavaScript 是初学者友好的语言，简单易学……至少我刚开始是这么认为的。但随着时间的推移，深入了解后才发现，这门语言隐藏了一些非常棘手的陷阱。 我踩过不少这些坑，为了让你少走弯路，这里总结了最容易浪费时间的 7 个 JavaScript 错误，以及对应的解决方案。 1. 混用箭头函数和普通函数处理事件 箭头函数和普通函数对 this 的处理方式不同。普通函数中的 this 引用触发事件的元素，而箭头函数则保持 this 指向其定义时的环境。 建议 ： 如果需要 this 引用被点击的元素，用普通函数。 如果希望 this 保持原样，用箭头函数。 示例： // 普通函数：`this` 引用被点击的元素 element.addEventListener( 'click' ,  function ( )  {    this .classList.add( 'active' );  // 正常工作 }); // 箭头函数：`this` 保持定义时的环境 element.addEventListener( 'click' , () => {    th ………………………………