如何在 JavaScript 中安全地访问数组元素？

• 什么是可选链操作符（?.）？
  可选链操作符（?.）是 JavaScript（ES2020）引入的新语法，用于安全地访问嵌套对象的深层属性。它的作用是防止因链中的属性为 null 或 undefined 而抛出运行时错误。如果链中遇到的引用无效，表达式会短路并返回 undefined，避免代码崩溃。主要特性包括：
  • 访问属性：object?.property
  • 动态访问属性或数组元素：object?.[expression]（表达式可以是属性名、索引或变量）
  • 调用可能不存在的方法：object?.method(args)
    示例场景：处理配置对象或 API 返回的不确定数据结构时，使用可选链减少繁琐的条件检查。例如：

    const user = { profile: { name: 'Alice', address: null } };
    console.log(user?.profile?.address?.city); // undefined 而无错误
    

• 如何使用可选链操作符访问数组？
  数组可通过可选链安全访问，使用语法 array?.[index]。这允许获取数组元素，而如果数组变量不存在或元素为 null/undefined，则返回 undefined。使用方式包括：
  • 访问元素直接访问：arr?. 以安全获取索引为 0 的元素。
  • 访问数组长度：arr?.length 避免数组未初始化导致错误。
  • 访问多重嵌套：结合属性和下标表达式处理数组对象。
    示例代码：
    ```javascript let scores = [90, 85, null]; console.log(scores?.?.toString()); // undefined, 无对 null 调用错误

  // 数组可能未定义的情况 const config = { userScores: undefined }; console.log(config?.userScores?.); // undefined 无异常

  // 动态索引访问 const index = 0; console.log(config?.userScores?.[index]); // undefined ```
  最佳实践：对响应式数据或用户输入使用可选链访问数组，简化代码并提升健壮性。