简介

传统上，我们习惯于在JavaScript中使用if-else 语句来执行条件性变量赋值和处理控制流。在这篇文章中，我们将探讨使用短路评估来完成同样的任务。

什么是短路评估？

短路评估的语法已经有些熟悉了；它使用了你通常在if-else 语句中看到的|| 或&& 逻辑操作符......但在if-else 以外使用。|| 操作符可以用来返回表达式中的第一个真值，而&& 操作符可以用来阻止后续代码的执行。

|| 操作符可以用来返回表达式中的第一个真值，而&& 操作符可以用来阻止执行后续代码。

一些例子

使用||操作符

下面是一个将if-else 语句转换为短路评估的例子。在这个例子中，我们想为我们的用户获得一个显示名称。如果user 对象有一个name 属性，我们将使用该属性作为显示名称。否则，我们将直接调用我们的用户 "Guest"。

const user = {};
let displayName;
if (user.name) {
  displayName = user.name;
} else {
  displayName = 'Guest';
}
console.log(displayName); // "Guest"

使用短路评估可以大大简化这个过程。

const user = {};
const displayName = user.name || 'Guest';
console.log(displayName); // "Guest"

由于user.name 是undefined ，它是假的。因此，"Guest "将从短路评估中返回!反过来说，如果user.name 存在并且不是错误的，它将被返回。

const user = { name: 'Daffodil' };
const displayName = user.name || 'Guest';
console.log(displayName); // "Daffodil"

真正巧妙的是我们可以把这些条件连在一起。比方说，我们还可能有一个用户的昵称。我们的if-else 条件可能开始变得非常丑陋。

const user = { name: 'Joe Smith' };
let displayName;
if (user.nickname) {
  displayName = user.nickname;
} else if (user.name) {
  displayName = user.name;
} else {
  displayName = 'Guest';
}
console.log(displayName); // "Joe Smith"

使用短路求值，这一切都变得简单多了。

const user = { name: 'Joe Smith' };
const displayName = user.nickname || user.name || 'Guest';
console.log(displayName); // "Joe Smith"

好多了!

使用&&运算符

&& 短路的工作方式有点不同。使用&& 操作符，我们可以确保只有在前面的表达式是真实的情况下才会运行后面的表达式。这到底是什么意思呢？让我们看看另一个例子!在这个例子中，如果服务器响应不成功，我们想在控制台显示一个错误。首先，我们可以使用和if 语句来做这件事。

const response = { success: false };
if (!response.success) {
  console.error('Oh no!');
}

使用短路求值，同样可以完成如下的工作。

const response = { success: false };
!response.success && console.error('Oh no!');

如果response.success 为真，那么!response.success 为假。因此，整个表达式将评估为false ，解释器不需要查看&& 右边的任何东西。

潜在的麻烦。合法的Falsey值

假设你的应用程序可能知道也可能不知道一个用户有多少个孩子。你可能会想到使用下面的短路评估。

const numberOfChildrenDisplay = user.numberOfChildren || 'Unknown';

这里的问题是，0 是一个已知孩子数量的合法值，但0 是错误的！因此，下面的行为是不正确的。所以下面的行为将是不正确的。

const user = { numberOfChildren: 0 };
const numberOfChildrenDisplay = user.numberOfChildren || 'Unknown';
console.log(numberOfChildrenDisplay); // "Unknown"

结论

短路评估可以成为变量赋值和控制流的很好的速记工具，只是在使用时要确保考虑虚假值的有效性