解决 TypeError：无法将 undefined 或 null 视为对象

在前端开发中，我们经常会遇到 TypeError：无法将 undefined 或 null 视为对象 的错误。这个错误通常会发生在我们试图访问一个 undefined 或 null 的属性或方法时。在本文中，我们将探讨这个错误的原因，以及如何解决它。

错误原因

在 JavaScript 中，undefined 和 null 都是特殊的值。undefined 表示一个未定义的值，而 null 表示一个空值。当我们试图将它们作为对象来访问时，就会出现 TypeError 错误。

例如，下面的代码会出现 TypeError 错误：

let obj = null;
console.log(obj.foo);

在这个例子中，我们试图访问一个 null 对象的 foo 属性，这会导致 TypeError 错误。

解决方法

为了避免 TypeError 错误，我们需要在访问对象之前检查它是否为 undefined 或 null。有几种方法可以做到这一点。

使用 if 语句检查

使用 if 语句是最常见的方法之一。例如，我们可以使用以下代码来检查对象是否为 undefined 或 null：

let obj = null;

if (obj !== undefined && obj !== null) {
  console.log(obj.foo);
}

在这个例子中，我们使用 if 语句检查对象是否为 undefined 或 null。如果对象不是 undefined 或 null，就可以安全地访问它的属性或方法。

使用逻辑运算符检查

另一种方法是使用逻辑运算符 &&。例如，我们可以使用以下代码来检查对象是否为 undefined 或 null：

let obj = null;

obj && console.log(obj.foo);

在这个例子中，我们使用逻辑运算符 && 来检查对象是否为 undefined 或 null。如果对象不是 undefined 或 null，就可以安全地访问它的属性或方法。

使用默认值

在某些情况下，我们可能希望在对象为 undefined 或 null 时提供一个默认值。例如，我们可以使用以下代码来提供一个默认值：

let obj = null;

console.log(obj?.foo || "default value");

在这个例子中，我们使用了可选链运算符 ?. 来访问对象的属性。如果对象为 undefined 或 null，就会返回 undefined。然后，我们使用逻辑运算符 || 来提供一个默认值。

总结

在本文中，我们讨论了 TypeError：无法将 undefined 或 null 视为对象 的错误。我们了解了这个错误的原因，并提供了几种解决方法。通过使用这些方法，我们可以避免 TypeError 错误，并编写更健壮的 JavaScript 代码。

示例代码

let obj = null;

if (obj !== undefined && obj !== null) {
  console.log(obj.foo);
}

obj && console.log(obj.foo);

console.log(obj?.foo || "default value");

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6587ced6eb4cecbf2dd09db1