逻辑赋值运算符的实例介绍

我们经常需要在我们构建的应用程序中实现条件逻辑。这篇文章介绍了一种新的简明语法，我们现在可以在JavaScript和TypeScript中使用不同的逻辑运算符：

逻辑OR赋值

在编写代码时，如果一个变量当前是假的，我们经常会将该变量设置为某个值。考虑一下下面的例子：

function getDefaultValue() {
  console.log("getDefaultValue");
  return 1;
}

let score: number | null = null;
score = score || getDefaultValue();console.log(score);

在这个例子中，score 被赋值给getDefaultValue 的结果，因为score 最初是假的：

如果score 最初是真值，那么第二个参数就不会被评估：

let score: number | null = 9;score = score || getDefaultValue();
console.log(score);

新的逻辑OR赋值运算符为我们提供了这种模式的稍短语法：

let score: number | null = null;
score ||= getDefaultValue();console.log(score);

逻辑nullish赋值

在前面的例子中使用nullish凝聚运算符(??)意味着只有当变量是null 或undefined ，才会应用默认值：

let score: number | null = 0;
score = score ?? getDefaultValue();console.log(score);

新的逻辑nullish赋值运算符为这个模式提供了一个稍短的语法：

score ??= getDefaultValue();

逻辑与赋值

我们经常使用逻辑AND运算符(&&)来表达条件逻辑。下面是一些示例代码：

let value = "F";
let valid: boolean = true;
valid = valid && value !== "";valid = valid && value.length > 2;console.log(valid);

新的逻辑与赋值运算符为我们提供了这种模式的稍短的语法：

valid &&= value !== "";
valid &&= value.length > 2;

很好!

归纳总结

新的逻辑赋值运算符为我们编写的一些条件性代码提供了更短的语法。

该语法在除IE以外的所有主要浏览器中都被支持。Babel通过plugin-proposal-logical-assignment-operators插件支持它，而TypeScript最近在4.0中也增加了对它的支持。