JS 可选链接说明

Question

我在我的 React 项目中发现了可选链接的一个非常好的用例。我以前用过一点，但这行代码让我有点困惑。

我有一个 table 是 sortable。其中一列显示成功或失败，具体取决于 failed_date 是空值还是日期。

sortedRows = sortedRows.sort((a, b) => a?.failed_date?.localeCompare(b?.failed_date));

但令我困惑的是 '?.' 的值是多少？检查无效？

a.failed_date?.localeCompare() 是检查 failed_date?. 是否为 null/undefined 还是检查 ?.localeCompare() 是否为 null/undefined？

与b?.failed_date相同是检查b为空吗？或 failed_date.

我认为我的困惑来自于查看 Documentation

因为 arr?.[50] 检查元素 50 是否为空但 obj.method?.() 检查方法是否为空？

查看第二个代码块（我认为现在是正确的）a.failed_date 可能是空的，如果 a.failed_date 是空的，则不会执行 localeCompare？但是，如果 a.failed_date 不为空但 b.failed_date 为空怎么办？ localeCompare 不关心吗？我没有收到错误，但我使用的是 localeComapre(b?.failed_date)

sortedRows = sortedRows.sort((a, b) => a.failed_date?.localeCompare(b.failed_date));

Answer 1

假设您定义如下变量

const variable = { value: 'test' };

那么你想要访问 variable?.value 它等于 variable === null || variable === undefined ? undefined : variable.value.

与数组相同。

检查 typescript playground 并查看 js 输出 https://www.typescriptlang.org/play?#code/MYewdgzgLgBAhgJwXAnjAvDA2gXQNwBQBiyKA-AHRYCsADDkA

Answer 2

基本上，该上下文中的 ? 表示 可选链接 。

它是如何工作的，例如，如果您定义了一个如下所示的对象，并且您想要尝试访问 views 属性，它会抛出一个错误。

const obj = { website: "whosebug.com", };
console.log(obj.views.toFixed(0)); // Error!

这是因为您正在尝试访问 undefined 的方法，该方法没有任何内容。

为避免此错误，我们可以使用可选链接，如下所示。

const obj = { website: "whosebug.com", };
console.log(obj?.views?.toFixed(0)); // undefined

可选链接告诉 JavaScript 完成 method/read 键，但如果它不存在，则不会抛出错误，只是 return undefined。

它也适用于数组；一样的方法！例如，如果索引 78 不存在，它不会抛出错误，而是 return undefined.

const arr = [1, 2, 3];
console.log(arr?.[78]?.toString());

JS 可选链接说明

JS optional chaining clarification

javascript

typescript

reactjs

optional-chaining