JavaScript 中没有“else”的三元运算符

Question

我总是不得不将 null 放在没有任何内容的 else 条件中。有办法解决吗？

例如，

condition ? x = true : null;

基本上，有没有办法执行以下操作？

condition ? x = true;

现在它显示为语法错误。

仅供参考，这里是一些真实的示例代码：

!defaults.slideshowWidth ? defaults.slideshowWidth = obj.find('img').width()+'px' : null;

Answer 1

首先，三元表达式不是 if/else 构造的替代品 - 它相当于返回一个值的 if/else 构造。也就是说，if/else 子句是代码，三元表达式是表达式，意味着它返回一个值。

这意味着以下几点：

• 仅当 = 左侧有一个要分配返回值的变量时才使用三元表达式
• 仅当返回值是两个值之一时才使用三元表达式值（或者如果合适的话使用嵌套表达式）
• 表达式的每个部分（在 ? 和 : 之后）应该返回一个没有副作用的值（表达式 x = true 返回 true，因为所有表达式都返回最后一个值，但它也会更改 x，而 x 对返回值没有任何影响）

简而言之 - 三元表达式的“正确”使用是

var resultofexpression = conditionasboolean ? truepart: falsepart;

代替您的示例 condition ？ x=true : null ;，当您使用三元表达式来设置 x 的值时，您可以使用：

 condition && (x = true);

这仍然是一个表达式，因此可能无法通过验证，因此更好的方法是

 void(condition && x = true);

最后一个将通过验证。

但话又说回来，如果预期值是布尔值，则只需使用条件表达式本身的结果

var x = (condition); // var x = (foo == "bar");

---

UPDATE

与您的示例相关，这可能更合适：

defaults.slideshowWidth = defaults.slideshowWidth || obj.find('img').width()+'px';

Answer 2

不，它需要三个操作数。这就是为什么它们被称为三元运算符。

但是，对于您的示例，您可以这样做：

if(condition) x = true;

尽管如果您将来需要添加多个语句，则使用大括号会更安全：

if(condition) { x = true; }

编辑： 现在您提到了实际的代码您的问题适用于：

if(!defaults.slideshowWidth)
    { defaults.slideshowWidth = obj.find('img').width()+'px'; }

Answer 3

更常见的是，人们使用逻辑运算符来缩短语句语法：

!defaults.slideshowWidth &&
  (defaults.slideshowWidth = obj.find('img').width() + 'px');

但在您的特定情况下，语法可以更简单：

defaults.slideshowWidth = defaults.slideshowWidth || obj.find('img').width() + 'px';

如果 defaults.slideshowWidth<，此代码将返回 defaults.slideshowWidth 值/code> 被评估为 true，否则 obj.find('img').width() + 'px' 值。

请参阅短路评估< /a> 逻辑运算符的详细信息。

Answer 4

var x = condition || null;

Answer 5

我们现在还有“空合并运算符” (??)。它的工作原理与“OR”运算符类似，但仅在左侧表达式为 null 或未定义时返回它，对于其他虚假值则不会返回它。

例子：

const color = undefined ?? 'black';   // color: 'black'
const color = '' ?? 'black';   // color: ''
const color = '#ABABAB' ?? 'black';   // color: '#ABABAB'

Answer 6

您可以

x = condition ? true : x;

这样写，以便当条件为假时 x 不会被修改。

这相当于

if (condition) x = true

编辑：

!defaults.slideshowWidth 
      ? defaults.slideshowWidth = obj.find('img').width()+'px' 
      : null 

有几个替代方案 - 我并不是说这些更好/更差 - 只是替代方案

传递 null 作为第三个参数有效，因为现有值为 null。如果您重构并更改条件，则存在不再正确的危险。将现有值作为三元中的第二个选择传递可以防止这种情况：

!defaults.slideshowWidth = 
      ? defaults.slideshowWidth = obj.find('img').width()+'px' 
      : defaults.slideshowwidth 

更安全，但可能不那么好看，并且需要更多的打字。在实践中，我可能会写

defaults.slideshowWidth = defaults.slideshowWidth 
               || obj.find('img').width()+'px'

Answer 7

简单点又怎么样

    if (condition) { code if condition = true };

Answer 8

要在数组或对象声明内使用没有 else 的三元运算符，您可以使用 ES6 扩展运算符，...()：

const cond = false;
const arr = [
  ...(cond ? ['a'] : []),
  'b',
];
    // ['b']

对于对象：

const cond = false;
const obj = {
  ...(cond ? {a: 1} : {}),
  b: 2,
};
    // {b: 2}

原始来源

Answer 9

您可以考虑改用保护表达式（有关更多信息，请参阅 Michael Thiessen 的 优秀文章）。

令 x 为您要测试的逻辑表达式，z 为当 x 为 true 时您要返回的值。然后您可以这样写：

y == x && z

如果x 为真，y 的计算结果为z。如果x为假，则y也为假。

Answer 10

在你的情况下，我认为三元运算符是多余的。您可以使用 ||、&& 将变量直接分配给表达式。运营商。

!defaults.slideshowWidth ? defaults.slideshowWidth = obj.find('img').width()+'px' : null ;

会变得：

defaults.slideshowWidth = defaults.slideshowWidth || obj.find('img').width()+'px';

更清晰，更“javascript”风格。

Answer 11

为什么不编写一个函数来避免 else 条件呢？

这是一个例子：

const when = (statement, text) => (statement) ? text : null;

const math = when(1 + 2 === 3, 'Math is correct');
const obj = when(typeof "Hello Word" === 'number', "Object is a string");

console.log(math);
console.log(obj);

您还可以为任何对象实现该功能。以下是 string 类型的示例：

const when = (statement, text) => (statement) ? text : null;

String.prototype.if = when;

const msg = 'Hello World!';
const givenMsg = msg.if(msg.length > 0, 'There is a message! Yayyy!');
console.log(givenMsg);

Answer 12

执行此操作的简单方法是：

if (y == x) z;

Answer 13

从技术上讲，它可以返回任何内容。
但是，我想说，对于单行，三元更容易键入，并且至少短 1 个字符，因此速度更快。

passTest?hasDriversLicense=true:0
if(passTest)hasDriversLicense=true