迹忆客 专注技术分享

作为 JavaScript 开发人员，大家可能在编码时遇到过不同类型的错误。 大多数情况下，这些都是类型错误或引用错误。 但是你有没有想过它们是什么意思？

在解决这些错误之前，大家是否曾尝试阅读解释器指定的错误类型？ 如果没有，应该这样做，因为了解这些错误可以帮助我们解决问题。

例如，当我们遇到错误时，我们可能会百度它。 复制并粘贴整个错误并尝试通过访问各种网站和论坛找到解决方案。 这是一种查找和解决错误的试错法。

但是，如果我们已经知道通常会出现错误的原因怎么办？ 这将节省我们原本花在在线搜索解决方案上的时间。 相反，我们可以通过查看错误类型开始自己寻找解决方案。

在本篇文章中，我们将了解两种最常遇到的错误类型，即类型错误和引用错误。 我们将了解它们发生的原因、它们之间的区别以及如何避免出现这些错误。

注意 ：JavaScript 中还有其他类型的错误，如语法错误、内部错误、范围错误和评估错误。 但本文的范围仅限于两个最常发生的错误。

什么是类型错误？

当我们使用不打算以特定方式使用的东西时，就会发生类型错误。 例如，用螺丝刀敲钉子，而不是用锤子。

让我们用一个例子来理解这一点：

// ⛔️ Uncaught TypeError: a is not a function
let a = 1
console.log(a()) 

这里 a 是一个用值初始化的变量。 我们遇到了一个错误，因为我们试图调用具有变量名称的函数。 变量不能作为函数调用。 函数和变量的工作方式不同。 所以在这种情况下，你得到了一个类型错误。 我们使用的 let 变量与其类型不同。

这给了我们一个类型错误。

解决方案：要解决此错误，我们必须在控制台中引用该变量，因为它是要使用的。 在这种情况下，我们将 a 作为变量而不是函数传递。

let a = 1
console.log(a) // 👉️ 1

再举一个例子：

// ⛔️ TypeError: Assignment to constant variable.
const a = 1
a = 2 // 你再次重新分配一个 const 类型的变量

在这里，我们将 const 类型变量 a 重新分配给一个新值。 但是你不能像这样改变 const 变量，所以在这种情况下你会得到一个类型错误

解决方案 ：一旦定义了 const 类型变量，就永远不要重新分配它。

const a = 1
const b = 2
console.log(a, b) // 👉️ 1 2

这是另一个使用数组的示例：

// ⛔️ TypeError: Assignment to constant variable.
const myArray = [1,2,3,4]
myArray = myArray.push(5) // 重新分配数组

在这种情况下，我们重新分配了 const 类型 myArray。 这给了我们一个类型错误，因为这种重新分配同样违反了 const 的属性。

解决方案：

const myArray = [1,2,3,4]
myArray.push(5)

console.log(myArray) // 👉️ [1,2,3,4,5]

我们可以轻松地将新值推送到数组而无需重新分配它。 这不会给你任何错误。 允许将值推入数组。 这样我们就可以避免出现错误。

如何避免出现类型错误

防止类型错误的最简单方法是避免对不同的变量和函数使用相同的名称。

如果我们使用不同的名称，将不会感到困惑或将一个名称替换为另一个名称，并且可以轻松避免出现此错误。

另一种方法是确保按预期使用变量。 当我们需要重新分配一个值时，不要使用 const，而是使用 let（它允许这种更改）。

什么是Reference Error （引用错误）?

当我们试图引用或使用不存在的东西时，就会发生引用错误。 例如，在工具箱中寻找一把螺丝刀，但没有。

让我们用一个例子来理解这一点：

// ⛔️ Uncaught ReferenceError: b is not defined
let a = 1
console.log(b) // undefined variable used

这里，a 是一个用值初始化的变量。 我们遇到了错误，因为我们试图打印不存在的变量 b。 我们还没有声明任何这样的变量，所以我们在这里得到了一个引用错误。

解决方案：仅使用已声明的变量以避免出现错误。

let a = 1
console.log(a) // 👉️ 1

这是另一个例子：

// ⛔️ ReferenceError: a is not defined
if(true){
    let a = 1
}

console.log(a)

在此示例中，我们试图访问其块外类型为 let 的变量。 解释器无法在块外找到它。 这给了我们一个错误。

解决方案：

if(true){
    let a = 1
    console.log(a) // 👉️ 1 
}

在其块或范围内使用变量不会给您任何错误。

让我们再举一个例子，但这一个可能很难理解。

// ⛔️ ReferenceError: Cannot access 'a' before initialization
if(true){
    console.log(a)
    let a = 1
}

a 仍在其范围内。 但是我们得到一个错误。 为什么？ 因为我们试图在定义变量之前使用它。 这是不允许的，并且违背了 let 变量的属性。

解决方法 ：定义好 let 变量后才使用。

if(true){
    let a = 1
    console.log(a) // 👉️ 1 
    
}

如何避免出现引用错误

避免出现引用错误的最简单方法是仅引用或访问已定义的变量。 只使用存在的变量。

我们还可以使用条件语句和错误处理来避免在变量或函数不存在时运行代码。

总结

当我们已经知道如何解决错误时，我们可以轻松地调试代码。 最好了解常见的错误以及如何避免这些错误。 这将节省我们在线搜索解决方案的时间，并节省我们在尝试找到解决方案时浪费的时间，因为对这些事情的一点了解和认识会有所帮助。