聊聊JavaScript中.?、??、??=的用法以及含义

当我们在JavaScript中使用对象或者变量时，可能会出现有些属性或者变量是未定义的情况，这时就会用到JavaScript中的三个操作符： . 、?. 、??和??=。下面我将分别详细讲解它们的用法和含义。

. 访问对象属性

首先让我们看下JavaScript中最基本的 . 操作符。这个操作符用于访问对象的属性。例如：

const person = {
  name: 'Jack',
  age: 25,
}

console.log(person.name); // Jack

上述代码中，我们可以通过 . 操作符获取 person 对象中的 name 属性。这是JavaScript中最基本的访问对象属性的方式。

?. 可选链操作符

然而，在JavaScript中，对象的属性可能是 undefined 或者对象本身就是 null，这时直接使用 . 操作符访问属性将会抛出错误。这时我们就可以使用 ?. 操作符进行可选链操作，以确保对象属性存在。例如：

const person = {
  name: 'Jack',
  age: 25,
  address: {
    city: 'Shanghai',
    street: 'Nanjing Road',
  }
}

console.log(person.address?.city); // Shanghai
console.log(person.address?.country); // undefined

上述代码中，我们可以看到通过添加 ?. 操作符后，访问不确定是否存在的 address 对象中的 city 属性不再会报错。如果该属性不存在，该操作符会返回 undefined。这里短路求值很容易理解，即当 person 或者 address 任意一个是 undefined 或者 null 的时候，就会返回结果了，无需继续往下访问了。

?? 空值合并操作符

除了可选链操作符 ?. 之外，JavaScript 又引入了另一个操作符 ??。这个操作符的作用是合并空值，即如果左边的值是 undefined 或者 null，则返回右边的值。例如：

const name = undefined;
console.log(name ?? 'Anonymous'); // Anonymous

const age = null;
console.log(age ?? 0); // 0

在上述代码中，我们可以看到第一个例子， name 变量的值是 undefined，因此返回了 'Anonymous'。而在第二个例子中，因为 age 变量的值是 null，因此返回了 0。需要注意的是，使用 ?? 操作符时需要注意运算的优先级。

??= 空值合并赋值操作符

最后，我们再看一个操作符 ??=。这个操作符可以在一个变量的值为 null 或 undefined 时，将其赋值为一个默认值。例如：

let name = null;
name ??= 'Anonymous';
console.log(name); // 'Anonymous'

let age = 0;
age ??= 25;
console.log(age); // 0

在上述代码中，我们可以看到第一个例子， name 变量原来的值是 null，因此被赋值为 'Anonymous'。而在第二个例子中，因为 age 变量的值是 0，因此不会被赋值为默认值。需要注意的是，使用 ??= 操作符时也需要注意运算的优先级。

综上所述，这里是对 .、?.、?? 和 ??= 操作符的详细讲解。希望这些解释能够帮助大家更好地理解这些操作符的作用和使用。