Javascript 运算符 - 将空合并与三元结合

如何解决Javascript 运算符 - 将空合并与三元结合

所以我有一些代码，我基本上试图在一行中执行 if、else if、else 语句，但基于无效性而不是真实性。

假设我在 person 对象上有一个布尔值“status”：

let person = {
  status: true
}

我想根据以下条件显示文本：

真：'已验证'
错误：“未验证”
不存在：'正在加载...'

我可以像这样使用三元运算符：

person?.status ? 'Verified' : 'Not Verified'

但是如果 person 对象不存在，或者如果“status”字段不存在，它将返回一个 falsey 值。

如果我像这样使用空合并运算符：

person?.status ?? 'Loading...'

我可以用非常简洁易读的代码获得想要的结果，但没有办法在不使用辅助函数的情况下格式化文本。

有没有办法将这些组合成一行可读的代码，或者我是否坚持编写一个辅助函数或使用更长的代码行，如下所示：

person?.status == null ? 'Loading...' : (person.status ? 'Verified' : 'Not Verified')

也许我很挑剔，但我只是想知道是否有人有更优化、更简洁的方法来做到这一点。

感谢您的帮助！

解决方法

我只是想知道是否有人有更优化、更简洁的方法来做到这一点。

你有这个倒退。更简洁并不更易读。一行中的操作越多，就越难弄清楚它的作用：

a ?? b ? c ?? d?.e : f || x

在精神上解析比不在一行中解析要困难得多。除其他事项外，您需要记住操作的顺序 - OR 是指 (f || x) 还是对整个表达式进行 OR 运算？

将解析为 (a ?? b ? c ?? d?.e : f) || x。然而，在你的脑海中评估这一点几乎没有帮助。

更优化和可读的编写方式是使用常规的 if/else 语句

let status;
if (person?.status == null)
    status = 'Loading...';
else if (person.status)
    status = 'Verified';
else
    status = 'Not Verified';

如果需要，可以封装在一个函数中。

function status(person) {
    if (person?.status == null)
        return 'Loading...';
    if (person.status)
        return 'Verified';

    return 'Not Verified';
}

如果你真的需要一些简短的东西，你可以有一个简单的查找表来解析不同的可能值：

const lookup = {
    "null" : 'Loading...',"true" : 'Verified',"false": 'Not Verified',}

/* ... */

const status = lookup[person?.status ?? null];

也可能：删除空合并运算符并在查找中对 undefined 进行编码：

const lookup = {
    "null"      : 'Loading...',"undefined" : 'Loading...',"true"      : 'Verified',"false"     : 'Not Verified',}

/* ... */

const status = lookup[person?.status];

这大多无关紧要，但有点有趣。您可以结合查找和函数来创建一个相当小的函数，该函数不使用 if/else 或 switch-es 来确定要返回的内容：

const status = person => ({
    "null"      : 'Loading...',})[person?.status];

console.log( status() );                //Loading...
console.log( status(null) );            //Loading...
console.log( status({}) );              //Loading...
console.log( status({status: true}) );  //Verified
console.log( status({status: false}) ); //Not Verified

这不是最佳做法，但偶尔会很方便。它可以帮助制作原型。然后，从函数中提取对象是一个简单的重构，这反过来又允许您从配置中加载它，例如。在这种情况下，如果您有类似的东西，它可能有助于将其翻译成不同的语言

{
  'english': {
        "null"      : 'Loading...',},'pig-lating': {
        "null"      : 'Oadinglay...',"undefined" : 'Oadinglay...',"true"      : 'Erifiedvay',"false"     : 'Otnay Erifiedvay',}
}