"!."和"?."这两个操作符有什么区别？

在 JavaScript 中，?. 和 !. 是两个不同的操作符，用于处理对象属性的访问和方法调用。

1. ?.（可选链操作符）: ?. 允许在链式属性访问中进行安全导航，即使链中的某个属性为 null 或 undefined，也不会引发错误。如果链中的任何一个属性不存在，则整个表达式的值将为 undefined。

   例如：

   let obj = {
     foo: {
       bar: {
         baz: 42
       }
     }
   };
   
   console.log(obj?.foo?.bar?.baz); // 输出 42
   console.log(obj?.foo?.qux?.baz); // 输出 undefined
   console.log(obj?.nonExistent?.property); // 输出 undefined
   

   在上述例子中，?. 允许我们在访问 obj 对象的属性时，安全地进行链式访问，即使某些属性不存在也不会导致错误。

2. !.（非空断言操作符）: !. 用于断言某个表达式的结果不为 null 或 undefined，即使 TypeScript 或编译器认为可能为 null 或 undefined，你可以使用 !. 来告诉编译器你知道它不会为 null 或 undefined。

   例如：

   let obj = {
     foo: {
       bar: {
         baz: 42
       }
     }
   };
   
   console.log(obj!.foo!.bar!.baz); // 输出 42
   console.log(obj!.nonExistent!.property); // 抛出 TypeError: Cannot read property 'property' of undefined
   

   在上述例子中，!. 告诉编译器我们确信 obj 对象的属性和方法一定存在，如果它们不存在，则会抛出错误。

总结：

• ?. 用于安全导航，在链式属性访问中避免错误。
• !. 用于断言某个表达式的结果不为 null 或 undefined，告诉编译器我们确信该表达式不会为 null 或 undefined。