标签: nullish-coalescing

如果变量不为空或未定义，则空合并运算符允许分配变量，否则为表达式。

a = b ?? other

这是对以前使用的改进，||因为||如果 b 是空字符串或其他虚假但不是空值，也会分配其他。

但是有时，我们也&&用于赋值，例如

a = b && func(b)

如果 b 不是空的，我们只想在 b 上执行 func，否则分配空的 b。

当然，&&检查虚假性，而不是无效性。有没有无效的版本&&？

Typescript 3.7引入了nullish 合并运算符。对于像这样的情况，它似乎是完美的类型保护

const fs = (s: string) => s
const fn = (n: number) => n

let a: string | null | undefined
let b: number | null | undefined

const x = (a ?? null) && fs(a)
const y = (b ?? null) && fn(b)

但是，如果您将该代码放入typescript Playground中，它会在传递给 fs / fn 函数的 a 和 b 参数上向您发出警报，例如：

我进一步进行了实验，发现这不仅是一个与空值合并运算符无关的问题，而且当 typescript 能够使用某些东西作为类型保护时和不能够使用某些东西时，我无法改变自己的想法（下面你可以找到一些示例）

最后两行最让我困惑。在我看来，分配给 x7 和 x8 的两个表达式是完全等效的，但是在分配给 x8 的表达式中，类型保护起作用，但对于 x7 表达式中的 typescript 来说似乎不行：

const fs = …

我正在尝试使用逻辑与 &&和空合并运算 ??符来条件渲染变量/值。但由于某种原因，我不清楚这两个运算符的用法以及它们是如何工作的。

请解释这两者之间的区别以及我们何时应该使用其中任何一个而不是if声明。

/* --------------------  ?? operator -------------------- */
const foo = null ?? '?? default string';
console.log(foo);

const baz = 0 ?? 10;
console.log(baz);

/* --------------------  && operator -------------------- */

const foo_1 = null && '&& default string';
console.log(foo_1);

const baz_1 = 0 && 20;
console.log(baz_1);

ES2020 introduced the nullish coalescing operator (??) which returns the right operand if the left operand is null or undefined. This functionality is similar to the logical OR operator (||). For example, the below expressions return the same results.

const a = undefined
const b = "B"

const orOperator = a || b
const nullishOperator = a ?? b
  
console.log({ orOperator, nullishOperator })

result:

{
    orOperator:"B",
    nullishOperator:"B"
}

So how is the nullish operator different …

Currently I am using below code for destructuring:

const myObj1 = {name: 'Abc'}
const {name} = myObj1
console.log(name)
const myObj2 = null
const {name2} = myObj2  // this will give error

Now, since we have optional chaining, I can do this:

const myObj = {name: 'Abc'}
const {name} = myObj
console.log(name) // 'Abc'
const myObj2 = null
const name2 = myObj2?.myObj2
console.log(name2) // undefined

是否有更好的方法或安全的方法来使用无效合并或可选链接进行解构？