在前端开发中，经常会遇到 JavaScript 的一个常见错误：不能读取未定义错误的属性。这通常是因为我们尝试访问对象或数组中不存在的属性或元素时引起的。如果不处理这些错误，它们可能导致应用程序崩溃或产生其他问题。本文将介绍如何避免这些错误并提高代码质量。
1. 使用 Optional chaining 运算符
Optional chaining 运算符 (?.) 是一种新的语言特性，在 ES2020 中被引入。该运算符可以用于访问对象深层次的属性，而不必检查每个属性是否存在。如果属性存在，则使用该属性的值，否则返回 undefined。
考虑以下示例：
-- -------------------- ---- -------
----- ---- - -
----- -------
-------- -
----- ---- ------
-------- -------
-
--
------------------------------- -- ---- -----
---------------------------------- -- ---------- ------ ---- -------- --------- -- ---------上面的代码中，当我们尝试访问未定义的 country 属性时，将会抛出一个类型错误。为了避免这种情况，我们可以使用 Optional chaining 运算符：
console.log(user.address?.country); // undefined
现在，如果 address 属性不存在，将返回 undefined 而不是抛出异常。
2. 使用 Nullish coalescing 运算符
Nullish coalescing 运算符 (??) 可以用于提供默认值，当变量或表达式的值为 null 或 undefined 时。这对于避免在应用程序中出现未定义错误非常有用。
例如：
const user = {
name: 'John',
age: null
};
console.log(user.age || 18); // 18
console.log(user.age ?? 18); // null上面的代码中，我们想要提供一个默认值为 18，但是如果使用逻辑或运算符，则会将 null 当作假值来处理。因此，我们可以使用 Nullish coalescing 运算符来处理。
3. 使用 TypeScript 或 Flow
TypeScript 和 Flow 是两种流行的静态类型检查工具。它们可以分析 JavaScript 代码，并在编译代码之前发现许多潜在的运行时错误。其中包括不能读取未定义错误的属性。通过使用这些工具，我们可以在开发过程中捕获这些错误并修复它们。
例如，在 TypeScript 中，我们可以使用可选属性来避免不能读取未定义错误的属性：
interface User {
name: string;
age?: number;
}在上面的代码中，age 属性被标记为可选的，这意味着它可能存在也可能不存在。在访问 age 属性时，我们必须先检查它是否存在。
结论
在本文中，我们介绍了三种避免 JavaScript 不能读取未定义错误的属性的方法。使用 Optional chaining 运算符、Nullish coalescing 运算符和静态类型检查工具可以有效地提高代码质量，并减少运行时错误。在编写 JavaScript 代码时，请始终将这些最佳实践融入到您的开发流程中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14695