使用短路求值编写美观而优雅的 Javascript 代码。

本文使用bloggu.io发布。免费试用。

想象一下这样的场景：你有一个变量，假设它是一个数组，你想获取它的长度。但该变量也可能是数组null，或者undefined出于某些与你无关的原因。
如果该变量不是数组，尝试访问其长度将引发异常：

Uncaught TypeError: Cannot read properties of null (reading 'length')。

这对于我们的最终用户来说，是一件非常令人讨厌的事情。作为优秀的开发人员，我们知道应该避免引发意外异常。为了解决这个问题，我们可以先尝试验证应该为数组的数据是否真的是数组，然后再访问其长度。像这样：

let length = 0
if (Array.isArray(arr)) {
    length = arr.length
}

这还不错，甚至是正常的做法。

但请看一下这个：

let length = (arr || []).length

你同意我的观点，那样更美观、更简短、更优雅。这就是短路求值。

注意：我们还可以使用其他 JavaScript 功能来解决这个问题，例如：

let length = arr?.length ?? 0;

但由于本文的目的是讨论，short-circuit evaluation让我们考虑第一个解决方案。

现在让我们深入探讨一下。

我们已经了解 Javascript 中的逻辑运算符：

• 逻辑与(&&)
• 逻辑或（||）
• 逻辑非（！）

但我们可以利用它们来做一些技巧：

返回第一个表达式的计算结果false

您可以使用&&。
以下是一些示例：

50 && true && 1 && false // Return: false
1 && 0 // Return: 0

如果所有表达式都计算完毕，true则返回最后一个表达式：

5 && 6 && true && 100  // Return: 100

返回第一个表达式的计算结果true

然后你就可以使用了||。
以下是一些示例：

0 || false || 10 // return: 10

当尝试访问可能不存在、可能为空或未定义的属性时，我们可以使用它来显示默认值。

因此，不要：

message = 'There is no information available'
if (website.data) {
    message = website.data
}

我们可以这样做：

message = website.data || "There is no information available"

文章到此结束。希望你喜欢这篇文章。关注我，了解更多关于 JavaScript、Python、Django 和 React 的技巧和提示。