JavaScript中?. 和??分别是什么详解

让我来详细讲解JavaScript中?.和??的使用。

?.运算符

?.运算符是ES2020（也称为ES11）中的新功能，它是用于简化可选链式调用的一种语法糖。可选链式调用允许我们选择性地访问一个对象的属性，它避免了访问未定义的对象属性时出现的TypeError错误。

示例1：

const user = {
  name: 'Tom',
  age: 25,
  address: {
    city: 'Shanghai'
  }
};

// 使用可选链式调用
const city = user?.address?.city;
console.log(city);  // 'Shanghai'

// 如果访问的属性不存在，会返回undefined，而不是TypeError错误
const gender = user?.gender?.male;
console.log(gender);  // undefined

// 当我们访问属性时，在属性名之前使用问号（?），它表示如果对象存在该属性，则访问该属性，否则返回undefined。

示例2：

const phone = user.phone?.model;
console.log(phone);  // undefined

// phone是undefined，因为user对象中没有phone属性。

在上面的示例中，我们尝试访问一个未定义的属性phone，?在属性名之前表示如果该对象存在该属性，则访问该属性，否则返回undefined。

??运算符

??运算符也是ES2020中的一个新特性，它是用于提供默认值的一种语法糖。当左侧的操作数为null或undefined时，它会使用右边的操作数作为默认值。

示例1：

const name = null ?? 'defaultName';
console.log(name);  // 'defaultName'

const age = undefined ?? 30;
console.log(age);  // 30

在上面的示例中，如果左侧的值为null或undefined，则使用右侧的默认值。name被赋值为默认名称defaultName，而age被赋值为默认年龄30。

示例2：

const price = 0 ?? 10;
console.log(price);  // 0

// price被赋值为0，因为0不是null或undefined

在上面的示例中，左侧的值为0。请注意，0被视为有效值，因此该值被用作price的值，并且使用默认值10的操作数没有被使用。

希望上述示例已经让你对?.和??运算符有了更加清晰的理解。