JavaScript中?.和??操作符详解与区别

可选链操作符（?. ）和空值合并操作符（??）是 JavaScript 引入的两个新特性，分别用于简化属性访问和默认值处理。

可选链操作符（?.）

可选链操作符（?.）允许开发者安全地访问可能为空或未定义的属性或方法。当尝试访问嵌套对象的属性时，如果中间层级存在 null 或 undefined，该操作符会直接返回 undefined 而不会抛出错误。例如：

const obj = {
  foo: {
    bar: 123
  }
};

// 普通访问属性的方式
const x = obj.foo.bar; // x = 123

// 使用可选链操作符
const y = obj?.foo?.bar; // y = 123

// 如果对象未定义，则返回 undefined
const z = undefined?.foo?.bar; // z = undefined

空值合并操作符（??）

空值合并操作符（??）用于判断变量是否为 null 或 undefined。若左侧值为 null 或 undefined，则返回右侧的默认值；否则返回左侧变量本身的值。这与传统的逻辑或运算符（||）存在显著差异：?? 仅在左侧为 null 或 undefined 时才使用右侧值，对于空字符串、0、false 等“假值”，它会直接返回左侧值而非默认值。例如：

const x = undefined ?? 'default'; // x = 'default'
const y = null ?? 'default'; // y = 'default'
const z = 'value' ?? 'default'; // z = 'value'
const a = '' ?? 'default'; // a = ''
const b = '' || 'default'; // b = 'default'

需要注意的是，?? 操作符需要在 ES11 及以上的版本才能使用。

与 || 运算符的区别：

1. || 运算符仅在左侧值为假值（包括 0, '', undefined, null, false 等）时返回右侧值。

2. ?? 运算符仅在左侧值为 null 或 undefined 时才返回右侧值。

总结

本文介绍了 JavaScript 中 ?. 和 ?? 的基本用法。如需了解更多 JS 中 ?. 和 ?? 的相关内容，请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！