JS中 ?. 、??、??=用法以及使用场景

前言

这个错误相信不少的前端工程师都遇到过，在开发过程中，难免会遇到。要么就是自己考虑不全造成的，要么就是后台返回数据或者传输数据造成的，因此，做非空判断就成了一件必不可少的事情，下面介绍一些es6新语法方便我们开发。

1. 可选链式操作符

   1.1 可选链操作符允许您在访问对象属性或调用函数时，检查中间的属性是否存在或为 null/undefined如果中间的属性不存在或为空，表达式将短路返回 undefined，而不会引发错误

   let obj = { 
      data: {
          third: 43
      }
   }
   console.log(obj?.data?.third) // 使用可选链式操作符后，只要前面有一个属性为空或者undefined，即返回undefined，不会引发错误
   
   在传统判断写法中，我们通常会这么做，需要手动检查某个属性，或者是具体业务中使用if判断某个属性是不是为 null 或 undefined
   obj && obj.data && obj.data.third

   1.2 使用场景

   调用可能为 null 或 undefined 属性的时候
   链式访问某个对象的属性的时候，不必在手动检查某个属性

2. 空值合并运算符

   2.1 空值合并运算符，即在变量的值是 null 和 undefined 的时候，为变量提供一个默认值，否则返回变量本身的值

   'hello world' ?? 'hi' 
   // 'hello world' 
   '' ?? 'hi' 
   // '' 
   false ?? 'hi' 
   // false 
   null ?? 'hi' 
   // 'hi' 
   undefined ?? 'hi' 
   // 'hi'
   **在传统写法中，空字符串以及0，转布尔类型是false，会被默认为假，而在新的语法中，成功的兼容了此问题**

   2.2 使用场景

   提供默认值，而不使用 falsy 值（如空字符串、0 等）
   在处理可能为 null 或 undefined 的变量时，选择性地提供备用值

3. 空值合并赋值操作运算符

   3.1 当??=左侧的值为 null、undefined 的时候，才会将右侧变量的值赋值给左侧变量，其他所有值都不会进行赋值

   let b = '你好'; 
   let a = 0;
   let c = null; 
   let d = '123';
   b ??= a; // b = '你好”'
   c ??= d // c = '123'

   3.2 使用场景

   可以在在变量没有被赋值或被赋值为 null 或 undefined 时，将默认值分配给变量

4. 结语

这些运算符在处理可能为 null 或 undefined 的值时非常有用，可以简化代码并提高可读性。
然而，需要注意的是，它们是在 ECMAScript 2020 标准中引入的，因此在旧版本的 JavaScript 中
可能不被支持。