避免嵌套三元答案

【问题标题】：Avoid nested ternary避免嵌套三元
【发布时间】：2016-11-19 11:39:21
【问题描述】：

我写了这样的代码：

query = (type) ? (parent) ? { parent: parent } : { type: type } : {}

我不知道应该避免嵌套三元。但是正确编写它的简短方法是什么？

这似乎不是很短 - 我不知道这是否正确：

if (type && parent)
    query = { parent: parent };
else if (type && !parent)
    query = { type: type };
else
    query = {};

【问题讨论】：

好吧，为什么嵌套三元没那么有用？
为什么 eslint 将其标记为错误？
"我不知道应该避免嵌套三元。" - 谁说的？
它不易阅读。

标签： javascript ternary-operator

【解决方案1】：

第一个条件运算符 (?) 的两个表达式将是 (parent) ? { parent: parent } : { type: type } 和最后一个表达式 {} 的结果。

它的工作方式是

var a  = 1, b = 2;
console.log( a == 1 ? b == 2 ? 3 : 2 : 1 );//outputs 3 
console.log( a == 2 ? b == 2 ? 3 : 2 : 1 );//outputs 1 
console.log( a == 1 ? b == 1 ? 3 : 2 : 1 );//outputs 2

因此，首先评估 a==1，然后再评估第二个 b==2。

所以，你需要这样做

if ( type )
{
   if (parent)
   {
     query = { parent: parent };
   }
   else
   {
     query = { type: type };
   }
}
else
{
     query = {};
}

【讨论】：

那个 oneliner 有不同的行为。它设置type，而不考虑parent，并设置parent，即使没有type。
@str 不确定我是否明白这一点，但查看 OP 的代码，我认为 type 和 parent 不存在于彼此的上下文中，因此无论 parent 和即使没有type，也会设置parent。
是的，即使您的长表格也显示了这一点。如果type && parent，则设置parent，如果type && !parent，则设置type，否则设置{}。
@str 哦，你的意思是说链接的顺序和我上一个单行不一样？
不仅仅是订单。请参阅我的回答中的 oneliner。

【解决方案2】：

嵌套的三元运算符通常不是很可读。您的示例相对简单。但是，当以不同方式嵌套运算符时，您必须知道执行顺序才能正确理解它。例如（借用here）：

a == b ? a : b ? c : d

您是否清楚这将如何执行？是吗

(a == b ? a : b) ? c : d

或

a == b ? a : (b ? c : d)

？在 JavaScript 中，三元运算符是 right associative，这意味着它的计算结果是后者。在某些编程语言中，三元运算符不是右结合的，而是左结合的。这表明嵌套三元运算符可能会造成混淆，因此应该避免或通过添加括号来明确完成。

如果您想针对您的特定问题使用单行符，可以使用以下方法：

var query = (type && parent && {parent:parent}) || (type && {type:type}) || {};

但是，在我看来，以下内容更具可读性：

var query = {};
if (type) {
    query = parent ? { parent: parent } : { type: type };
}

【讨论】：

【解决方案3】：

这个怎么样：

var query = {};

if (type){
    if(parent){
        query = {parent: parent};
    }else{
        query = {type: type};
    }
}

【讨论】：