未定义的角度对象数组值抛出错误

在编程中，当你尝试访问一个未定义（undefined）的对象属性时，通常会抛出一个错误。这种情况在你处理角度对象数组时尤为常见。下面我将详细解释这个问题，并提供一些解决方案。

基础概念

未定义（undefined）：在JavaScript中，如果一个变量被声明了但没有被赋值，或者一个对象的属性不存在，那么它的值就是undefined。

对象数组：这是一个数组，其中的每个元素都是一个对象。

问题描述

假设你有一个角度对象数组，每个对象包含一些属性，比如degrees。如果你尝试访问一个不存在的对象或者对象的某个属性，就会抛出错误。

示例代码

let angles = [
  { degrees: 30 },
  { degrees: 60 },
  undefined, // 这里有一个未定义的值
  { degrees: 90 }
];

for (let i = 0; i < angles.length; i++) {
  console.log(angles[i].degrees); // 这里会抛出错误
}

错误原因

在上述代码中，angles[2]是undefined，当你尝试访问angles[2].degrees时，JavaScript会抛出一个错误，因为undefined没有degrees属性。

解决方案

1. 使用条件检查

在访问对象属性之前，先检查对象是否为undefined。

for (let i = 0; i < angles.length; i++) {
  if (angles[i] !== undefined) {
    console.log(angles[i].degrees);
  }
}

2. 使用可选链操作符（Optional Chaining）

可选链操作符（?.）是ES2020引入的一个新特性，可以简化对嵌套对象属性的访问，并在属性不存在时返回undefined而不是抛出错误。

for (let i = 0; i < angles.length; i++) {
  console.log(angles[i]?.degrees);
}

3. 过滤掉未定义的值

你可以在遍历之前先过滤掉数组中的undefined值。

let filteredAngles = angles.filter(angle => angle !== undefined);

for (let i = 0; i < filteredAngles.length; i++) {
  console.log(filteredAngles[i].degrees);
}