时间戳

首页 > 解决方案 > Javascript 运算符 - 将 Nullish Coalescing 与三元相结合

javascript - Javascript 运算符 - 将 Nullish Coalescing 与三元相结合

问题描述

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

假设我在一个人对象上有一个布尔值“状态”：

let person = {
  status: true
}

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

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

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

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

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

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

我可以通过非常简洁易读的代码获得所需的结果，但是如果不使用辅助函数，就无法格式化文本。

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

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

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

谢谢你的帮助！

标签： javascriptoptimizationlogicoperatorsreadability

解决方案

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

你有这个倒退。更凝练并不更具可读性。一行中的操作越多，就越难弄清楚它的作用：

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

比不是全部在一行中更难在心理上解析。除其他事项外，您需要记住操作的顺序 - OR 是指(f || x)还是 OR-ing 整个表达式到那里？

它将被解决为(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...',
    "undefined" : 'Loading...',
    "true"      : 'Verified',
    "false"     : 'Not Verified',
})[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...',
        "undefined" : 'Loading...',
        "true"      : 'Verified',
        "false"     : 'Not Verified',
    },
  'pig-lating': {
        "null"      : 'Oadinglay...',
        "undefined" : 'Oadinglay...',
        "true"      : 'Erifiedvay',
        "false"     : 'Otnay Erifiedvay',
    }
}

推荐阅读