这个嵌套的三元运算符如何使用 javascript 工作？

Question

我想了解这个嵌套的三元运算符是什么意思，使用 javascript？

下面是代码，

const columns = !isUser1Readable
    ? allColumns.filter(column => !columnIdsUser1.includes(column.id))
    : !isUser2Readable
    ? allColumns.filter(column => !columnIdsUser2.includes(column.id))
    : allColumns;

我明白了什么？

似乎如果 isUser1Readable 的计算结果为假，它会过滤所有列数组，使其不包含来自 columnIdsUser1

的列

如果 isUser1Readable 为真且 isUser2Readable 为假，则过滤所有列数组，使其不包含来自 columnIdsUser2 的列

但是什么时候将 allColumns 分配给列？

谁能帮我理解上面这个嵌套三元运算符的作用。谢谢

Answer 1

but when does allColumns is assigned to columns?

在剩下的情况下，即 isUser1Readable 和 isUser2Readable 都为真。

链接的三元表达式可以解释为if ... else if ... else序列：

let columns;
if (!isUser1Readable) {
    columns = allColumns.filter(column => !columnIdsUser1.includes(column.id));
} else if (!isUser2Readable) {
    columns = allColumns.filter(column => !columnIdsUser2.includes(column.id));
} else {
    columns = allColumns;
}

Answer 2

条件运算符¹是贪心。缩进表达更清晰：

const columns = !isUser1Readable
    ? allColumns.filter(column => !columnIdsUser1.includes(column.id))
    : !isUser2Readable
        ? allColumns.filter(column => !columnIdsUser2.includes(column.id))
        : allColumns;

如果!isUser1Readable是true，columns被赋值为allColumns.filter(column => !columnIdsUser1.includes(column.id))的结果。
否则
- 如果!isUser2Readable是true，columns被赋值为allColumns.filter(column => !columnIdsUser2.includes(column.id))
- 否则，columns被赋值为allColumns。

but when does allColumns is assigned to columns?

当!isUser2Readable和!isUser2Readable都为false时。

¹ 尽管人们经常称它为“三元运算符”，但它实际上只是 a 三元运算符（接受三个操作数的运算符）。它目前是 JavaScript 唯一的三元运算符，但这可能会改变。它的名字是“条件运算符”。

Answer 3

因为三元运算符是这样定义的

condition ? exprIfTrue : exprIfFalse

Condition: 是检查的条件
exprIfTrue：是在 Condition 的计算结果为 true 的情况下处理的代码
exprIfFalse：是在 Condition 被评估为 false 的情况下处理的代码

您提供的代码可以这样重构

let allColumns = [];
if(!isUser1Readable) {
    allColumns = allColumns.filter(column => {
        return !columnIdsUser1.includes(column.id);
    });
} else if (!isUser2Readable) {
    allColumns = allColumns.filter(column => {
        return !columnIdsUser2.includes(column.id);
    });
}else {
    columns = allColumns;
}

您可以了解更多 Conditional (ternary) operator

Answer 4

我非常喜欢在表达式中使用嵌套条件运算符，但我发现创作风格对于提高可读性确实很重要。（尽管 YMMV。）

我会这样写：

const columns =
  ( !isUser1Readable ? allColumns.filter(column => !columnIdsUser1.includes(column.id))
  : !isUser2Readable ? allColumns.filter(column => !columnIdsUser2.includes(column.id))
                     : allColumns);

读作：

const columns =
  (      if !X : do A
  : else if !Y : do B
               : otherwise do C)

所以当且仅当两个布尔值 (X & Y) 都是 true 时才返回 allColumns这意味着前两个检查都将评估为 false.

这个嵌套的三元运算符如何使用 javascript 工作？

How does this nested ternary operator work using javascript?

javascript

conditional-operator