10 种最常见的 Javascript 错误(频率最高)

在 Javascript 编程中，常常会遇到各种各样的错误，有些错误甚至会让我们束手无策。下面是 10 种最常见的 Javascript 错误及解决方案：

1. “Uncaught TypeError: Cannot read property 'x' of undefined”

这种错误通常是因为我们试图获取一个 undefined 或 null 的属性值。解决此问题可采取以下两种方式：

使用 typeof 检查对象是否存在：
javascript if (typeof obj !== 'undefined' && obj.x !== undefined) { // code goes here }
使用 optional chaining 操作符 ?.：
javascript if (obj?.x !== undefined) { // code goes here }

2. “Uncaught TypeError: Cannot set property 'x' of undefined”

这种错误通常是因为我们试图设置一个 undefined 或 null 的属性值。解决此问题可采取以下两种方式：

使用 typeof 检查对象是否存在：
javascript if (typeof obj !== 'undefined') { obj.x = 1; }
使用 optional chaining 操作符 ?. 与 nullish 合并操作符 ??：
javascript obj?.x ??= 1;

3. “Uncaught ReferenceError: x is not defined”

这种错误通常是因为我们试图访问一个未声明的变量。解决此问题可检查变量名是否正确拼写，并使用 var、let 或 const 关键字声明。

4. “Uncaught TypeError: x is not a function”

这种错误通常是因为我们试图调用一个非函数类型的变量。解决此问题可检查变量是否为函数类型。

5. “Uncaught TypeError: Cannot read property 'length' of null”

这种错误通常是因为我们试图访问一个 null 或 undefined 类型的数组长度。解决此问题可检查数组是否存在并具有可迭代性，或使用默认值：

const arr = null;
const len = (arr ?? []).length;

6. “Uncaught RangeError: Maximum call stack size exceeded”

这种错误通常是因为我们出现了递归调用函数并无法退出。解决此问题可通过修改递归条件或使用迭代替代递归。

7. “Uncaught SyntaxError: Unexpected token x”

这种错误通常是因为我们代码中存在语法错误，例如拼写错误或缺少括号等。解决此问题可检查错误的代码行，并修改错误代码。

8. “Uncaught TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation”

这种错误通常是因为我们在 window 对象上调用 fetch 函数而不是在中间件中使用 fetch。解决此问题可通过使用中间件调用 fetch 函数。

function fetchData() {
    fetch('https://myapi.com/data')
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.error(error));
}