在前端开发过程中，我们常常会遇到报错提示 Cannot read property xxx of undefined 的情况。这种错误提示可能出现在各种场景，比如获取对象属性、数组元素等等。这种错误提示通常表示我们尝试从一个 undefined 或者 null 类型的值中读取一个属性或者元素，导致了 JavaScript 运行时出错。在本篇文章中，我们将会介绍一些解决这种报错的方法与技巧，并且了解一些使用ES12新特性的相关内容。
为什么会出现 “Cannot read property xxx of undefined” 错误
在 JavaScript 中，undefined 和 null 是两种特殊的值类型。当我们使用一个变量或者对象属性时，如果这个变量或者属性的值是 undefined 或者 null，那么就会导致运行时错误，提示 Cannot read property xxx of undefined。
let obj = { name: 'Tom', age: 24 };
console.log(obj.hobby); // undefined
console.log(obj.hobby.length); // Uncaught TypeError: Cannot read property 'length' of undefined在上面的代码中，我们尝试获取一个不存在的对象属性 hobby，导致了 Cannot read property 'length' of undefined 的错误提示。这是因为 undefined 没有 length 属性。
解决方法与技巧
避免出现 Cannot read property xxx of undefined 错误有以下几种解决方法及技巧：
1. 对对象属性或者数组元素进行存在性判断
在使用对象属性或者数组元素之前，我们可以先进行存在性判断，避免因为获取了 undefined 类型值的属性或者元素，而导致 JavaScript 运行时错误。
使用 && 运算符进行简单判断：
let obj = { name: 'Tom', age: 24 };
if (obj.hobby && obj.hobby.length) {
console.log(obj.hobby.length); // 不会报错
}使用 if 语句进行判断：
let obj = { name: 'Tom', age: 24 };
if (obj.hobby !== undefined && obj.hobby !== null) {
console.log(obj.hobby.length); // 不会报错
}对于数组元素的判断同样可以使用上述方法。
2. 使用 Optional chaining 运算符
ES12（ES2021） 新增了一个可选链式运算符 Optional chaining ?.，可以简化存在性判断的代码，同时可以防止因疏漏而导致的报错。
let obj = { name: 'Tom', age: 24 };
console.log(obj.hobby?.length); // undefined在上面的代码中，使用了 Optional chaining 运算符 ?.，如果 obj.hobby 不存在，则直接返回 undefined，不会导致 JavaScript 运行时错误。
3. 将 null 转为默认值
在获取一个值的时候，如果它有可能取到 null，我们可以使用默认值来代替 null，以避免出现 Cannot read property xxx of undefined 错误。
let obj = { name: 'Tom', age: 24, hobby: null };
console.log(obj.hobby || []).push('reading'); // [ 'reading' ]在上面的代码中，obj.hobby 为 null，可以使用 || 运算符中断语句并返回默认值 []。
结论
在本篇文章中，我们介绍了解决 Cannot read property xxx of undefined 错误的几种方法和技巧：
- 对对象属性或者数组元素进行存在性判断；
- 使用 Optional chaining 运算符；
- 将
null转为默认值。
这些方法和技巧不止可以避免在运行时出现错误，还可以让我们的代码更加健壮和安全。
我们也应该更多的了解 JavaScript 的运行机制，避免出现一些低级的错误，提高我们的前端开发效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67510a10050cf9039c1988d3