当前位置: 首页 > news >正文

JavaScript的可选链操作符 ?.

JavaScript的可选链操作符(Optional Chaining Operator)是 ES2020(ES11) 引入的新特性,通过语法 ?. 简化对深层嵌套对象属性、方法或数组元素的访问,避免因中间值为 null 或 undefined 而引发的错误。

核心特性与用法:

  1. 对象属性访问
    语法:obj?.prop
    示例:user?.address?.street

    • 若 user 或 address 为 null/undefined,返回 undefined,而非报错。

  2. 函数调用
    语法:obj.method?.()
    示例:user.getName?.()

    • 若 getName 不存在,不执行调用,返回 undefined

  3. 数组元素访问
    语法:arr?.[index]
    示例:data?.[0]

    • 若 data 为 null/undefined,返回 undefined

  4. 短路机制
    仅在左侧值为 null/undefined 时停止操作,其他假值(如 0false)仍会继续访问属性。

优势对比:

  • 传统写法:冗长的逻辑与(&&)检查
    config && config.user && config.user.preferences && config.user.preferences.theme

  • 可选链:简洁直观
    config?.user?.preferences?.theme

注意事项:

  • 不可用于赋值obj?.prop = 123 会报错。

  • 兼容性:需通过 Babel 等工具转译以支持旧环境(如 IE)。

  • 与 delete 结合:允许 delete obj?.prop,但需确保操作安全。

适用场景:

  • 处理不确定结构的 API 响应数据。

  • 简化深层嵌套对象的属性访问。

  • 安全调用可能未定义的方法。

示例对比:

// 传统写法
const theme = config 
  && config.user 
  && config.user.preferences 
  && config.user.preferences.theme;

// 可选链写法
const theme = config?.user?.preferences?.theme;
const nextStep = () => {
  // 只有区域绘制数据有值的时候,才能往下走
  if (buildingData.value?.length > 0){
    currentStep.value++
  }else{
    message.warn('请先绘制区域')
  }
}

可选链操作符显著提升了代码的可读性和健壮性,是现代 JavaScript 开发中处理不确定数据结构的实用工具。

http://www.dtcms.com/a/121763.html

相关文章:

  • 【WPF】IOC控制反转的应用:弹窗但不互相调用ViewModel
  • 构建实时、融合的湖仓一体数据分析平台:基于 Delta Lake 与 Apache Iceberg
  • 基于机器视觉的多孔零件边缘缺陷检测(源码C++、opencv、凸包、凸缺陷检测)
  • eplan许可证的用户权限管理
  • 4.实战篇-延迟约束
  • 基于MCP协议调用的大模型agent开发02
  • 11. 盛最多水的容器
  • Linux系统之rm命令的基本使用
  • leetcode每日一题:子数组异或查询
  • 主键索引和唯一索引的区别
  • linux安装mysql常出现的问题
  • 【Linux】进程信号(下)
  • 显示背光发烫异常解析
  • SQL语法进阶篇(一),数据库复杂查询——子查询
  • Redis过期key处理、内存淘汰策略与缓存一致性策略实践方案
  • PG:数据库表年龄大和表大的解决方案
  • Vue 框架组件间通信方式
  • Matplotlib图表坐标轴中文标签显示问题
  • 打印大X | 第六届蓝桥杯省赛C++C组
  • TDengine 数据模型设计:多列模式与单列模式对比(二)
  • PowerBI之DAX 2:聚合、统计、关系、表操作函数
  • 力扣题解:142. 环形链表 II
  • 柳宗元经典的10首唐诗
  • 指定运行级别
  • 【补题】Educational Codeforces Round 150 (Rated for Div. 2) C. Ranom Numbers
  • 计算机中的单位
  • 基于php扩展加密的一个简单逆向
  • 深入 C++ 线程库:从创建到同步的探索之旅
  • 天基光学图像仿真原理简介
  • 一个很好用的vue2在线签名组件