零合并操作符 ??和可选链操作符 ?.

痛定思痛。 2023-01-08 04:20 110阅读 0赞

# 零合并操作符 #

零合并操作符 `??` 是一个逻辑操作符，当左侧的操作数为 `null` 或者 `undefined` 时，返回右侧操作数，否则返回左侧操作数。

expr1 ?? expr2
    复制代码

空值合并操作符一般用来为常量提供默认值，保证常量不为 `null` 或者 `undefined`，以前一般使用 `||` 来做这件事 `variable = variable || 'bar'`。然而，由于 `||` 是一个布尔逻辑运算符，左侧的操作数会被强制转换成布尔值用于求值。任何假值（`0`， `''`， `NaN`， `null`， `undefined`）都不会被返回。这导致如果你使用 `0`、`''`、`NaN` 作为有效值，就会出现不可预料的后果。

正因为 `||` 存在这样的问题，而 `??` 的出现就是解决了这些问题，`??` 只会在左侧为 `undefined`、`null` 时才返回后者，`??` 可以理解为是 `||` 的完善解决方案。

可以在浏览器中执行下面的代码感受一下：

undefined || 'default' // 'default'
    null || 'default'      // 'default'
    false || 'default'     // 'default'
    0 || 'default'         // 'default'
    
    undefined ?? 'default' // 'default'
    null ?? 'default'      // 'default'
    false ?? 'default'     // 'false'
    0 ?? 'default'         // 0
    复制代码

另外在赋值的时候，可以运用赋值运算符的简写 `??=`

let a = {b: null, c: 10}
    a.b ??= 20
    a.c ??= 20
    console.log(a)     // 输出 { b: 20, c: 10 }

# 可选链操作符 `?.` #

可选链操作符 `?.` 允许读取位于连接对象链深处的属性的值，而不必验证链中的每个引用是否有效。`?.` 操作符的功能类似于 `.` 链式操作符，不同之处在于，在引用为 `null` 或者 `undefined` 的情况下不会引起错误，该表达式短路返回值是 `undefined`。

当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短、更简明。

const obj = {
      a: 'foo',
      b: {
        c: 'bar'
      }
    }
    
    console.log(obj.b?.c)      // 输出 bar
    console.log(obj.d?.c)      // 输出 undefined
    console.log(obj.func?.())  // 不报错，输出 undefined
    复制代码

以前可能会通过 `obj && obj.a && obj.a.b` 来获取一个深度嵌套的子属性，现在可以直接 `obj?.a?.b` 即可。

可选链除了可以用在获取对象的属性，还可以用在数组的索引 `arr?.[index]`，也可以用在函数的判断 `func?.(args)`，当尝试调用一个可能不存在的方法时也可以使用可选链。

调用一个对象上可能不存在的方法时（版本原因或者当前用户的设备不支持该功能的场景下），使用可选链可以使得表达式在函数不存在时返回 `undefined` 而不是直接抛异常。

const result = someInterface.customFunc?.()
    复制代码

# #