处理 TypeError: “Cannot convert undefined or null to object” 的几种方法

在 JavaScript 开发中，当尝试使用 Object.values 或其他需要对象的操作时，遇到 TypeError: Cannot convert undefined or null to object 是一种常见的错误。这种错误通常是由于输入数据 undefined 或 null 引起的。在本文中，我们将探讨几种有效的防止和处理这种错误的方法。

错误背景

Object.values 是一个用于获取对象所有属性值的方法。如果传递给它的参数是 undefined 或 null，就会抛出 TypeError。以下是一个可能引发错误的示例：

let data = null; // data 可能是 undefined 或 null
let list = Object.values(data); // 这里会抛出 TypeError

为了解决这个问题，我们需要在调用 Object.values 之前对数据进行检查。

方法一：添加空值检查

最直接的方法是在调用 Object.values(data) 之前，显式检查 data 是否为 undefined 或 null。如果是，就初始化为空数组。

let list = [];
if (data !== undefined && data !== null) {
    list = Object.values(data);
}

方法二：使用默认值

另一种方法是使用逻辑或操作符 || 给 data 设置一个默认值 {}，这样即使 data 为 undefined 或 null，Object.values 也能正常工作。

let list = Object.values(data || {});

方法三：结合逻辑运算符

你可以使用三元运算符简化检查，这样代码更加简洁明了：

let list = data ? Object.values(data) : [];

实战示例

假设我们正在从一个 API 获取数据，并希望将这些数据转换为值数组。我们可以结合上面的方法来确保在任何情况下都不会抛出错误。

async function fetchData() {
    try {
        const response = await fetch('your-api-endpoint');
        const data = await response.json();
        
        // 确保 data 不为 undefined 或 null
        let list = data ? Object.values(data) : [];
        
        console.log(list);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

fetchData();

在这个示例中，我们首先通过 fetch 方法从 API 获取数据，然后使用 await response.json() 将响应解析为 JSON 格式。接下来，我们使用三元运算符检查 data 是否为 undefined 或 null，并相应地返回值数组或空数组。

总结

在处理可能为 undefined 或 null 的对象时，务必要进行适当的检查，以避免 TypeError: Cannot convert undefined or null to object 错误。本文介绍了三种有效的方法来处理这种情况：

1. 添加空值检查
2. 使用默认值
3. 结合逻辑运算符

选择合适的方法可以确保代码更加健壮，并提升应用程序的稳定性。在实际开发中，建议根据具体场景选择最合适的方法来处理潜在的空值问题。

希望这篇文章对你有所帮助！如果你有其他问题或建议，欢迎在下方留言讨论。