常见的编写原生JavaScript代码时容易出现的错误

👍 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️ 评论，你的意见是我进步的财富！

1. 未定义变量：尝试使用未定义的变量。

// 示例：使用未定义的变量
console.log(undefinedVariable); // 未定义的变量会引发 ReferenceError

2. 拼写错误：变量、函数或对象属性的名称拼写错误。

// 示例：拼写错误的变量名
let myVar = 42;
console.log(myvar); // 变量名拼写错误，应为 myVar

3. 语法错误：常见的语法错误包括括号不匹配、分号丢失等。

// 示例：缺少分号
let x = 5
console.log(x); // 缺少分号会引发语法错误

4. 类型错误：尝试将不兼容的数据类型进行操作。

// 示例：将字符串与数字相加
let x = "5";
let y = 10;
let z = x + y; // 这会导致字符串拼接而不是数学运算

5. 未处理的异常：没有捕获或处理异常。

// 示例：未处理的异常
try {
  // 一些可能引发异常的代码
} catch (error) {
  console.error(error.message);
}

6. 使用未定义的方法或属性：尝试访问对象上不存在的方法或属性。

// 示例：访问不存在的方法
let obj = {};
obj.someMethod(); // 未定义的方法会引发 TypeError

7. 闭包问题：在循环中不正确地使用闭包，导致变量的值不符合预期。

// 示例：在循环中使用闭包
for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i); // 所有的回调都会输出相同的值 5
  }, 1000);
}

8. 跨域问题：尝试通过Ajax请求跨域资源，而没有启用跨域请求。

// 示例：跨域请求
fetch('https://example.com/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

9. 不合理的事件处理：将事件处理程序附加到不存在的元素或使用不正确的事件名称。

// 示例：附加事件处理程序到不存在的元素
document.getElementById('nonexistent-element').addEventListener('click', function() {
  // 无法找到元素会引发错误
});

10. 未引入外部库：尝试使用未引入的外部JavaScript库或框架。

```javascript
// 示例：未引入jQuery库
$('.my-element').addClass('active'); // 未引入jQuery库会导致错误
```