?? 运算符、?. 运算符和 ?. .运算符

基本用法
?? 运算符（空值合并运算符）可以用来判断一个值是否为null或undefined，并提供一个默认值。其语法为：value1 ?? value2，如果value1是null或undefined，则返回value2；否则返回value1的值。

下面是一个示例代码：

const x = null;
const y = 10;
const result = x ?? y;

console.log(result); // 输出 10

在这个例子中，由于x是null，以返回了y的值。

与 || 运算符的区别
?? 运算符与 || 运算符类似，但它们有一些重要的区别。|| 运算符只能判断一个值是否为 “false”（例如：null、undefined、false、0、‘’），而 ?? 运算符能够精确地判断一个值是否为null或undefined。

下面是一个对比例子：

const x = 0;
const y = 10;
const result1 = x || y; // 使用 || 运算符
const result2 = x ?? y; // 使用 ?? 运算符

console.log(result1); // 输出 10
console.log(result2); // 输出 0

在这个例子中，由于x的值为0，它被判定为 “falsy” 值，所以使用 || 运算符时返回了y的值，而使用 ?? 运算符时返回了的值。

实际应用场景举例
表单输入默认值
const username = getInputValue('username') ?? '加菲猫';

在这个例子中，如果getInputValue(‘username’)返回的值为null或undefined，则username会被设置为加菲猫作为默认值。

函数参数默认值
function greet(name) {
  name = ?? '加菲猫';
  console.log(`Hello, ${name}`);
}

在这个例子中，如果没有传入name参数或传入的值为null或undefined，则name会被设置为加菲猫作为默认值。

解决方案2：?. 运算符
基本用法
?. 运算符（可选链运算符）可以简化对可能为null或undefined的值进行属性访问或方法调用的代码。其语法为：object?.property 或 object?.method()。

下面是一个示例代码：

const obj {
  foo: {
    bar: '咕咕'
  }
};

const result = obj?.foo?.;

console.log(result); // 输出 "咕咕"

在这个例子中，由于obj.foo.bar存在，所以返回了其值"咕咕"。

与 . 运算符的区别
?运算符与.运算符类似，但它们之间有一些关键的区别。如果对象的某个属性或方法不存在，. 运算符会抛出一个TypeError，而?. 运算符会返回undefined，不会导致程序崩溃。

下面是一个对比例子：

const obj = {
  foo: null
};

const result1 = obj.foo.bar; // 使用 . 运算符
const result2 = obj?.foo?.bar; // 使用 ?. 运算符

console.log(result1); // TypeError: Cannot read property 'bar' of null
console.log(result2); // 输出 undefined

在这个例子中，虽然obj.foo存在，但它的值为null，所以使用. 运算符对bar进行访问抛出TypeError，而使用?. 运算符时返回了undefined。

实际应用场景举例
链式对象访问
const user = {
  name: '加菲猫',
  address: {
    street: '东大街',
    city: '陕西'
  }
};

const city = user.address?.city;

在这个例子中，如果user.address存在，则city被为其值；否则city将为undefined。

安全地调用函数
const handler = obj?.method?.();

在这个例子中，如果obj.method存在，则会调用它并将返回值赋给handler变量；否则handler将为undefined。

解决方案3：?. 运算符的进一步简化：?..
基本用法
?. 运算符的进一步简形式是?.. 通过将两个运算符组合在一起，可以更加简洁地处理链式对象访问或函数调用的情况。其语法：object?.property 或 object?..method()。

下面是一个示例代码：

const user = {
  name: 'John',
  address: {
    street: '东大街',
    city: '陕西'
  }
};

const city = user?..address?.city;

console(city); // 输出 "陕西"

在这个例子中，由于user.address.city存在，所以返回了其值"New York"。

实际应用场景举例
链式对象访问
const user {
  name: '加菲猫',
  address: {
    street: '东大街',
    city: '陕西'
  }
};

const city = user?..address.city;

在这个例子中，如果user存在且address存在，则city被设置为其值；否则city将为undefined。

安全地调用函数
const handler = obj?..method();

在这个例子中，如果obj存在且method存在，则会调用它并将返回值赋给handler变量；否则handler将为undefined。