JS中的可选链操作符（?.）、空值合并运算符（??）

一、可选链操作符  ?.

        js中的可选链接操作符 ?. 是ECMAScript2020 引入的一种语法，用于简化对可能为 null 或 undefined 的对象属性或方法的访问。它的使用可以减少繁琐的空值检查和避免在访问嵌套对象时引发的 TypeError 。使用方法大致如下：

1.语法：

object?.property // 访问对象的属性，如果对象为null或undefined，则返回undefined
object?.method() // 调用对象的方法，如果对象为null或undefined，则返回undefined

2. 访问对象属性的用法：

const obj = {
  prop1: {
    prop2: {
      prop3: 'value'
    }
  }
};

console.log(obj.prop1.prop2.prop3); // 'value'
console.log(obj.prop1.prop2.prop3.prop4); // TypeError: Cannot read property 'prop4' of undefined

// 使用可选链操作符
console.log(obj?.prop1?.prop2?.prop3); // 'value'
console.log(obj?.prop1?.prop2?.prop3?.prop4); // undefined

3. 调用对象的方法的用法：

const obj = {
  method1: () => {
    console.log('Method 1 called');
  }
};

obj.method1(); // 'Method 1 called'
obj.method2(); // TypeError: obj.method2 is not a function

// 使用可选链操作符
obj.method1?.(); // 'Method 1 called'
obj.method2?.(); // undefined

        注意：可选链操作符只能在运行时检查对象是否为 null 或 undefined ，并在对象为 null 或 undefined 时返回 undefined，而不会报错。它不会处理其他类型的错误，例如属性名拼写错误等。因此，在使用可选链操作符时仍然需要注意对象的属性和方法是否存在的问题。同时，可选链操作符目前尚未得到所有JavaScript引擎的完全支持，因此在使用时需要谨慎考虑兼容性问题。

二、 空值合并运算符 ??

         空值运算符用于在变量的值为 null 或 undefined 时，提供一个默认值。它主要用于简化处理可能为 null 或 undefined 场景。它与或运算符（||）有所不同，或运算符在变量值为 false 时也会返回默认值，而 ?? 只在变量的值为 null 或 undefined 时返回默认值。

1.语法

variable ?? defaultValue // 如果variable的值为null或undefined，则返回defaultValue，否则返回variable的值

2.使用默认值示例

const value1 = null;
const value2 = undefined;
const value3 = '';
const value4 = 0;
const value5 = false;
const value6 = 'Hello';

console.log(value1 ?? 'Default Value'); // 'Default Value'
console.log(value2 ?? 'Default Value'); // 'Default Value'
console.log(value3 ?? 'Default Value'); // ''
console.log(value4 ?? 'Default Value'); // 0
console.log(value5 ?? 'Default Value'); // false
console.log(value6 ?? 'Default Value'); // 'Hello'

 2.避免引发错误

const obj = {
  prop1: {
    prop2: {
      prop3: 'value'
    }
  }
};

console.log(obj.prop1.prop2.prop3); // 'value'
console.log(obj.prop1.prop2.prop3.prop4); // TypeError: Cannot read property 'prop4' of undefined

// 使用空值合并运算符
console.log(obj.prop1.prop2.prop3 ?? 'Default Value'); // 'value'
console.log(obj.prop1.prop2.prop3.prop4 ?? 'Default Value'); // 'Default Value'

         注意：?? 只有在变量的值为 null 或 undefined 时才返回默认值，对于其他为 false 的值，?? 不会返回默认值。在使用 ?? 时，需要明确区分 null 、undefined 和 其他 false 值之间的差异。

        可选链操作符 ?. 和空值合并运算符 ?? 尚未得到所有js引擎的完全支持，在使用时需要考虑兼容性问题。